.. Your Daily Design Dosis

Tweet Parade (no.43 Oct 2012)

| Comments Off

It’s Saturday .. It’s time for a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, SEO, WordPress and more. A broad scale of topics, but never-the-less the underlying focus is on Design.

Also I see this as my personal bookmarks of great articles from the Community of the last period. These hand-picked articles and tutorials are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Creating SVG vector graphics for maximum browser compatibility – This article describes how to design vector graphics and maximize SVG features while retaining browser compatibility. It is a resolution independent format for graphics on the web.

Basic Ready-to-Use CSS Styles – This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements

Clearing Floats: Why is it Necessary Even in “Modern” Browsers? – The necessity to clear floats is not a browser bug; it’s actually, well, more of a CSS feature. And it’s still needed in so-called “modern”.

The Road To Reusable HTML Components – This article isn’t so much about the resulting HTML as it is about the methodology of writing HTML. Your opinion on the class names, structures and source order that I suggest along ..

Styling Scalable Vector Graphic (SVG) With CSS – Today we are going to continue our discussion on Scalable Vector Graphic (SVG), and as we have pointed out in our previous post, one of the advantages of using SVG is that it can be styled with CSS.

8 Code Snippets for New Website Projects – In this article I’d like to share 8 bits of code which any web developer can use. These code blocks include typical HTML5 and some more intermediate-level CSS3 solutions for various website layouts.

Examples Of Using New HTML5 Attributes – There are many additional features that come with HTML5 such as the HTML5 attribute placeholder and required.

WebPlatform: Trustworthy Programming Language Documentation Backed by Facebook, Google, Microsoft! – What if you could find trustworthy documentation about PHP and CSS under one roof?

Beginners guide to HTML5 Canvas – The HTML5 Canvas element is arguably the most important addition to the next-gen specification, providing an array of possibilities for bringing graphical capabilities natively into the browser

Splash Vector Graphics on your Responsive Site – Creating mobile content that dazzles means balancing the amount of data downloaded against maximal visual impact. Vector graphics are a great way to deliver stunning visual results using minimal bandwidth.

Kick-Start Your Project: A Collection of Handy CSS Snippets – Don’t start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development.

Using Unprefixed CSS3 Gradients in Modern Browsers –  In this article, I’ll take you through some differences between the old and new syntax and behavior and provides some insight into the change.

Working With Text In Scalable Vector Graphics (SVG) – In this post, as the title said, we will look into creating Text with SVG. There are a lot of things we can do with text beyond what plain HTML text is capable of doing.

Usability, User Experience, Responsive Webdesign, Mobile, etc.

Standard Conventions, Innovative Experiences – Pushing the boundaries in experience design often requires the use of standard conventions to ensure the experience is usable, familiar, and understandable.

Adaptive and Fluid Approach in Responsive Web Design – Each approach has its own positives that make it an ideal choice, and negatives that may make you second guess using it.No one approach is ever perfect for everything.

A Look Into: Scalable Vector Graphics (SVG) – SVG is still considerably underused, whereas there are a lot of advantages in using Vector rather than Bitmap to serve graphic or image on a website.

That Nasty Responsive Image Problem- One of those issues is bandwidth. Loading a full-sized image that is shrunk down for smaller sites will always yield an image of acceptable quality, but on smaller devices with less bandwidth  ..

When Should We Use App, Responsive and Mobile Design? – There is no final answer for the above solutions, any of those options can work for everyone. However, if we dig deeper about the functions, pros or cons of each model you may find an easier answer to your questions.

Beginner guide to a mobile app using the jQuery Mobile JavaScript Framework (with video) – jQuery Mobile is an excellent way to create web applications for mobile devices, but it suffers from a bit of a PR problem.

Easy Fixes to Common Accessibility Problems – Making a site or application accessible can seem so overwhelming that it can completely stall efforts before they begin. So, in the spirit of small things that make a big difference, here’s a list of fixes for common accessibility problems.

Responsive Web Design Tips- Responsive Web Design has many benefits that are spreading its use over the online world very quickly. Some of the benefits of Responsive Web Design are as follows

Common Responsive Web Design Blunders – There is no success without overcoming hurdles and there are some great challenges in responsive web design also, which sometimes force you to make mistakes in designing a responsive layout.

Ditch Traditional Wireframes – While this article is not about getting rid of the wireframing process itself, now is a good time for questioning and improving some of the materials and deliverables that have become de facto standards in the UX field.

Three quick tips to help the responsive web design process – Have you ever noticed that some browsers (such as Safari, Chrome and Firefox) do not allow you to reduce the width of the viewport narrower than a certain point?

Mobile Web Development – What you need to know before you start building – Unfortunately, there is no one-size-fits-all solution for building a mobile Website. Let’s review several popular and emerging mobile strategies.

UX design for start-ups:get to know your users – User experience design is deeply human centric – it dies without a decent amount of interaction between human beings. Let’s befriend our users!

Responsive CSS Framework Comparison – Bootstrap vs. Foundation vs. Skeleton

Webdesign in Common, Web Typography, jQuery, Tools, etc.

Freelance Web Design: How To Tackle Larger Projects and Commissions – It’s no wonder many web designers and developers feel ill-equipped with the challenges they face day-to-day and are struggling to take home a healthy profit.

Having a Center Of Attraction in Your Web Design – The basic thumb rule: The focal points hold on the attention of the user and the main idea of the website is conveyed with it. The focal point is the eye-catching centerpiece of the page

Designing the Proper Landing Page – By designing the proper landing page with the correct elements and the right visual components can help you achieve higher conversion, optimize ROI and fulfill in a better way the desired intent of your web page and website

28 Beginner’s Tutorials for Learning about MySQL Databases – Developing and programming with databases is a huge step onto a large plateau of information. Nobody starts out with MySQL and masters the software in a week.

The top 20 online coding tools – Pair programming, social coding, collaborative development. Whatever you want to call it, there’s been an explosion of tools for sharing, developing and debugging code in the browser.

Weekly Fresh Resources for Designers and Developers [October 22th,2012] – Most of the tools,plugins,freebies etc. are mostly latest releases or the ones you might not have seen yet.

Common Webfont Mistakes and how to avoid them – With so many choices, it’s not surprising some people get carried away and pick not only questionable combinations, but also fonts which are not always ideal for reading.

What Is Information Architecture (IA) And How Can It Increase Sales? – A well organized information architecture results in reduced bounce rates and increased time on site. More importantly, a well organized IA leads to increased sales.  Your users can’t purchase what they can’t find.

The Recently Released Webdev Resources You Would Need – there are various resources to choose from which cover various issues that a web designer/web developer might encounter.

The designer’s guide to image compression – Don’t know your JPEGs from your PNGs? Our guide to image compression explains the fundamental concepts and terminology you need to know.

Choosing the Right Typography for Your Website – Choosing typography for your website is almost as essential as the design itself. It not only helps your visitor have a clear understanding of your websites content the type also sets a mood for your website.

Looking Beyond Common Media Query Breakpoints – We’re finally thinking in terms of fluid layouts and expandable, interactive content. But when you get down to it, we’re still thinking of the fluidity in terms of desktop, tablet and mobile sizes.

Slit Slider Revised – Slit Slider is a slideshow with a twist: when navigating the slides, the current one will be “cut open” into two slices and moved away, revealing the next or previous slide. The slider can be used in a responsive context and it has been updated and improved.

Feeling Comfortable with Wireframing – In this article we will talk about how intermediate wireframing can help you shape a good beta and planned version of your product without sacrificing time and user experience.

This is a world where Less is More! Minimalism in Web Design – As you may know minimalism is used in web design to reduce all unnecessary elements for achieving clean and super-efficient layout.

Making the right typographic choices – The internet, after you get past all the coding, is littered with different approaches to typography. There are a plethora of typefaces scattered all over the internet and searching for the right font can leave your head buzzing with all the options to choose from.

Website Mockup And Prototype Design With Adobe Illustrator – In this tutorial you will learn how to create a website mockup using Adobe Illustrator. Some techniques used in this prototype design tutorial are aligning ..

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

25 Adobe Photoshop Photo Effects Tutorials – We hope these tutorials will help you to learn,how to apply the special and interesting effects on your photos in adobe photoshop?

Informative Print Design Tutorials – In this post, I’ve gathered up some informative print design tutorials that cover everything from how to print a brochure to how to print a business card.

3 Types Of Rhythm You Can Create Visually-  Pattern is essential to rhythm. So is repetition. In design we alternate the positive element with negative space to create patterns, which we then repeat and vary to create rhythm.

Best Practices for Icon Design –  Icons can also create a terrible mess if they’re done wrong. They have a unique, focused function within a design plan. Yet, all too often I observe poorly-planned icon design that either confuses, distracts, or just plain doesn’t make sense.

Six Reasons Why Simplicity is The Best in Logo Design – A simple logo must be in the same time a quality project, it must be effective and perfectly represent the owner behind it.

Business cards: How to Choose a Material – Those who select this traditional material however, might be unaware quality varies depending on the type of pulp used, and each kind will have a different impact on those who handle them.

Blogging, Social Media, Writing, Content Strategy, etc.

Search Engine Optimisation For Blogs- Blogging is a popular pursuit because it is a well known fact that blog posts naturally attract search engine traffic. Some tips on how to further optimise your blog and get the traffic your efforts deserve.

Moving from WordPress to Perch – In the Perch Blog App download zip you get a folder of example pages that can be used to create your blog pages, and in fact I used these, just removing the Perch default mark-up around the area where I wanted my listing and posts to display and adding my own.

20 tips for great email newsletter design- Most mailouts get instantly deleted. Sarah Morris explains how to get your newsletter design right so people will actually want to read it.

Do You Make These Small Business Blog Mistakes? – Avoid these common mistakes below and be the content marketing superhero that gets your small business blog on the best track to success ASAP!


Creating Nifty Petitions Inside Your Posts – In this tutorial, we’re going to show how to create a simple petition script to demonstrate how an organization can benefit from WordPress.

16 of the Most Common WordPress Mistakes – I’ve outlined 16 of the most common mistakes that WordPress users and developers make. Brush up on what other people are doing wrong so you can prevent these same blunders on your own site.

Pros and Cons of Using the Facebook Commenting System for WordPress- But before deciding upon actually implementing this commenting system on your blog, I would like you to have proper insights into its pros and cons.

How To & Why Create A WordPress Child Theme – Creating a WordPress child theme is the smartest way to extend and modify your current parent WordPress theme and not loose your changes when a theme update becomes available.

A Guide to WordPress Custom Post Types: Creation, Display and Meta Boxes –  In this tutorial we will be exploring one of the most powerful features of WordPress known asCustom Post Types and how WordPress reached a new height with the advent of this wonderful feature.

What To Do When You Are Locked Out of WordPress Admin- There are few reasons why you could be locked out of WordPress admin, so let’s take a look at each of them one by one. Hopefully through this process of elimination, ..

Demystifying WordPress: The Concept of Tags- In this article, we shall take a detailed look at tags. We will learn what exactly tags and their benefits are, what their role is and how we can utilize them to the fullest.

How to Add Custom Meta Boxes in WordPress Posts and Post Types – In this article, we will show you how to add custom meta boxes in WordPress posts and custom post types.

WordPress Plugin: Simple Feed Stats – Simple Feed Stats is a free WordPress plugin that makes it easy to track your feeds, add custom content, and display your feed statistics on your site. Track your feeds automatically, and provides a wealth of tools and options for further configuration and management.

Customizing WordPress Feeds – As awesome as the default feeds may be, they are also readily customizable using a variety of methods. In addition to WP‘s built-in ways of configuring your feeds, you can go even further with custom templates, functions, and plugins.

The Ten Commandments of WordPress Development – Do you incorporate best practices into your development process? Here are ten commandments that can help you to get better.

Utilizing User Roles In WordPress – In this article, you’ll learn everything you need to utilize user roles in WordPress and make the most of this incredible built-in functionality.

How to Add Rich Contact Information in WordPress – In this article, we will show you how to easily add rich contact information in your WordPress site, so they can be displayed as rich snippets in the search results.

Search Engine Optimalization, Conversions, Analytics, etc.

The Best SEO Advice I’ve Seen in a Long Time: Relevance is the new PR- Sometimes, and I mean sometimes, there can be nuggets or threads of truth that can help you get a leg up on two targets  that are constantly moving in the digital space.  The customer and Google search.

Unnatural Links Penalties in Full Force – What to do if you are Affected- As you may already know, early this year Google had a mandate to reach out to the sites that might have had a poor link scheme and asked politely that site owners make corrections if they wanted their rankings back.

What Freelancers Need to Know About Google Analytics- It isn’t the most user-friendly piece of software, though. It’s easy enough to get some basic figures, but for anything more, you have to learn how to use Google Analytics effectively.

Site speed: case studies, tips and tools for improving your conversion rate – There are numerous studies that highlight how important site speed is for the user experience, but in truth it’s something that should be obvious to everyone.

Dos and Don’ts of Using Google’s Disavow Links Tool – While this sounds like a miracle tool, Google has warned webmasters not to go crazy disavowing links left, right and center as this could work against you.

How social signals influence SEO: five things you need to know – The water’s still a bit murky when it comes to how important social signals are and will be in the landscape of SEO, but here are a few FAQs that you’ll no doubt be very interested in hearing the answers to…

Page Optimization tips to speed up your site – Optimizing a web page can be quite time consuming, depending on the extent that you want to optimize, but it is well worth doing. This article provides you with the essentials to quickly optimize your page.


Responsive Pricing Tables Using :target for Small Screens- We’re going to make a fluid pricing table, then alter the way it’s displayed at different viewport sizes using media queries

How to Create a Basic jQuery Tool Tip Plugin- jQuery should definitely be on your list of things to learn and master. With this in mind, in this tutorial, we will teach you how to create a basic jQuery Tool Tip Plugin.

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template – In this tutorial I want to go over the process of building a very basic HTML newsletter. I’ll explain some key steps along the way and you can grab a copy of my source ..

Build a Facebook Open Graph app- In this tutorial we will create a simple Open Graph application using the Facebook JavaScript SDK and a single HTML page. The application will make use of the new Open Graph APIs, allowing users to publish to the ticker, timeline and newsfeed.

Colorful CSS3 Animated Navigation Men – In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters.

Star Wars 3D Scrolling Text in CSS3 – How cool is that? No JavaScript, no graphics — just pure HTML5 text and CSS3. It works in Chrome, Safari and Firefox. Opera won’t show the 3D transform in the current release, but it’ll work.

Freelance, Business and Workflow Related Stuff

14 Ways to jumpstart your freelance business before the sun goes down today –  Many of these suggestions link to other content here at GDB and around the web. Be sure to click through and learn more on each subject.

Four freelance lessons learned the hard way – In the interest of paying it forward, and perhaps helping others learn these lessons from our freelance trials and tribulations without having to suffer through them on their own

You need these must-have clauses in your freelance contracts – I strongly recommend once you get your contract together, look for a lawyer who can go over it with you to make sure it will hold should a problem arise.

Freelance Web Designers: How to Deal with Difficult Clients?- Keeping your clients happy and satisfied is an important integral part of the freelance web designer’s job. Here’s how to effectively deal with your client’s crazy demands

5 Awesome Portfolio Tips to Maximize Sales for Freelancers – One of the most powerful tools you have at your disposal to maximize sales as a freelancer is your own personal career portfolio for your freelance business.

The biggest misconceptions about freelancing –  For those of you just starting out or those about to make the jump into self-employment, here are a few myths you might need to dispel, followed by some useful tips.

F*cking Brilliant, a great Read or just magnificent Tips!

Did we lose track of the big picture? – It seems to me that we are slowly switching from publishing content for the Web, to making content accessible to Screen-Readers (SR) – from targeting users, to focusing on devices and modern browsers.

Baseline Grids on the Web – Some of my problems with baseline grids on the web are merely personal annoyances, others are technical issues. However, I am very much in support of them in print design

Why tech-based small businesses and startups should make design a priority – When design is made a priority, your customers see it and they react because you have gained their attention and maintained it long enough for them to start talking about it with friends and family and sharing it with people they know.

Breaking Design Principles on Purpose – Rules. They keep our designs clean, consistent, aligned, and focused. The core principles upon which good design is built are absolutely essential to the education of any designer.

10 Essential Tips for Every Designer – Designers need to master a wide variety of skills and possess a large quantity of knowledge to excel in any industry. Here are 10 tips that I’ve found invaluable.

Goal-oriented design – A large number of products would benefit from the simplest of thought experiments: ask yourself what the goals of the product really are.

Why Coding Style Matters – Coding style guides are an important part of writing code as a professional. Whether you’re writing JavaScript or CSS or any other language, deciding how your code should look is an important part of overall code quality.

 – § -

I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the proper section. Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign


Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

Sorry, comments for this entry are closed at this time.