.. Your Daily Design Dosis

Tweet Parade (no.49 Dec. 2012)

| 1 Comment

A new Saturday, 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.

REMINDER: You can still tweet & comment to Win 1 of 5 premium multisite SliderShock licenses (by @webdesignshock), participation for this giveaway will close on 19th of December 2012.

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

Using Inline SVGs With HTML5 –  In this tutorial, I will demonstrate how to use inline SVGs, covering a range of techniques and exploring the interaction between web page and graphic.

Fly in Newly Added Content to a Page –  I’d think when you add new content to a page, you want people to see it. Animation might be the ticket.  Let’s write some code to make all new modules added to a page “fly in.”

Here’s a Neat Trick Using the :Focus Pseudo-Class – What I’m doing in the demo is some­thing very sim­ilar to the check­box hack, except instead of using the :checked pseudo-class, I’m using the :focuspseudo-class.

How to use the CSS3 transition property – CSS3′s transition is a great way to add a little animation to sites without the large overhead of a JavaScript library like jQuery.

My 2012 front-end web development workflow – So far 2012 has been a big year for me in progressing my front-end web development skills, tools and process. I’ve also been busy learning new languages and frameworks and getting up to speed on the latest advancements.

HTML 5: Speed Up Your JavaScript-Animations with requestAnimationFrame – With HTML 5 an alternative by the name of requestAnimationFrame was introduced. Its mode of operation is very similar to the before-known functions, with one big exception.

Sprite sheet animation with steps() – If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them. CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps()

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

Create Emails for Any Device: Introducing Responsive Email Templates – With so many readers viewing emails on mobile, we knew there had to be an easier way to ensure campaigns look swank on any device.

6 free mobile device emulators for testing your site – A mobile phone emulator lets you check the responsiveness and functionality of the website across different mobile platforms, such as iPhone, iPad, Android and BlackBerry, without actually having the devices in hand

Stop chasing screen resolutions – Many web designers are racing towards that goal by creating images for each new resolution that comes our way.

Are Baseline Grids Useful In The Flexible Canvas Of The Web? – Do you use baseline grids? A modular scale? Do you do anything to create vertical rhythm in your design? About a year ago I started adding baseline grids to most designs and more recently have looked into modular scales.

A Look at Responsive CSS Frameworks – CSS frameworks have gone responsive, squeezing content into a spectrum of desktop and mobile browsers with varying degrees of success.

Focal Point: Intelligent Cropping of Responsive Images – Focal Point is a GitHub project and CSS framework created by Adam Bradley. Focal Point takes this idea a step further though and not only resizes your images, but crops them as well.

Is It Adaptive or Responsive Web Design? – There seems to be a lot of confusion in the industry among both us web folk and clients about the differences between adaptive and responsive web design. I’ve even seen someone go so far as to say they’re both the same thing. They’re not.

Responsive Responsive Design –  Research around responsive performance, discovered that 86% of the responsive sites he tested were either the same size or larger on the small screen as they were on the desktop.

Design Patterns for Creating Exceptional User Interfaces on the Web – In this article I would like to share some ideas for building captivating user interface on the web. There is no single solution for every web developer to follow.

5 Considerations for an Amazing User Experience – The success of a website is directly proportional to how well you have presented information to the user and whether you have been able to make an impact on the visitor’s psyche.

Design Mistakes We Made in Our iPhone App – We treated the development of our iPhone app like a blank canvas where we could apply some of our team’s most recent design principles. We also wanted to reinforce the lessons we’ve learned during the development our product.

15 Practical Tips How To Use Typography For Emotional Design – Web typography in its classical sense includes good readability, scalability, and acharacter that matches the nature of the website. Lately, typography has taken on a new role in web design.

Stop designing for screen width, design for content – When choosing your breakpoints, you should always be making your decisions based on where the content breaks and not to device screen widths.

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

25 Useful Resources for Creating Tooltips With JavaScript or CSS – Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot.

Websites Design for Mobile Applications: Trends and Examples – In this article, we’ll describe the most common trends in the design of websites for mobile applications. Do not take these recommendations as a basis and don’t use them unthinkingly on all sites.

8 Useful UI Wireframe Tools – This is the super collection of some excellent and outstanding UI wireframe tools that will make your life easier. In this article, we are listing down 8 most useful and amazing tools that will help you.

A Study of Symmetry: When, Where, and Why to Use It – Finding the proper balance in your designs is an essential part of building quality visual communication. When your design is out of balance, your message gets lost in the confusion.

Pros and Cons of Using Grids in Web Design – Designers are increasingly learning that the approach that has traditionally been used in the worlds of graphic design and print publishing can deliver huge benefits when building websites.

Grabbing Attention and Building a Moving Experience with Shape – Some thoughts on how shapes in web design can be used for attention-grabbing purpose and for an interesting or even comforting user experience.

 A Guide To: Better And Sharper UI Icons With Web Fonts – If you are familiar with using bitmap image formats (like PNG and GIF) to display icons on a website, then you would also be familiar with its shortcomings.

Client-Side Templating – Using templates in the browser is becoming more and more widespread. Moving application logic from the server to the client, and the increasing usage of MVC-like patterns inspired templates to embrace the browser.

Parallax Tools and Techniques – Using parallax to give your website some depth and added interest is great, but try to avoid too much of it or you may end up with a site that has too much going on.

50 Performance Tricks to make your HTML5 Applications and Sites faster [VID] – Creating high performance Web applications is crucial for every Web developer, be it a Web site that runs on a standards based Web browser or a Windows Store App

Why Not Having Enough Landing Pages Is A Critical Mistake – If you have a few landing pages, but they aren’t coordinated and they aren’t placed on your website in any particular logical order you need to immediately fix this problem.

7 Tips To Avoid High Bounce Rates On Landing Pages – Below, I provide seven examples of how to tighten that connection. In today’s fickle world, average online experiences just aren’t good enough.

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

3 Tips to Optimize Your Rebranding Strategy to Perfection –  Products have to adapt to a changing market and new demographics. If you have ever seen a commercial from the ’80s vs. the ’90s, then pit them against today, ..

Promoting Yourself Via Print: Ideas, Tips And Examples – In this post, we are showcasing some inspiring ways you can use print products to spread the word about what you do, while “wowing” someone who could use your creative skills somewhere down the line.

Logo design process: how professionals do it – DistinctivenessThat is the single, most important trait of any professional logo. If it  truly stands out from the rest and makes the brand unique and memorable, while respecting some basic design principles, it qualifies as great.

Branding Basics: Six Steps to a Successful Business Image – The point? A good brand will not only help you build business recognition, but it will earn you loyal customers and increase your sales.

Three Principles to Design a Good Logo – I present the principles and at the same time I give you practical recommendations and this is tenfold more useful than other approaches. It will be great to have your feedback

Colour Accessibility – Colour is very relative — not just in the way that it appears differently across different devices due to screen quality and colour management, but it can also be seen differently by different people — something we really need to be more mindful of when designing.

75 Best Illustrator Tutorials From 2012 –  The tutorial round-up features all of the best illustrator tutorials from 2012. The compilation features in depth illustration techniques as well as short but insightful tutorials

10 Tips to Design Memorable Logos – In this article, I will be jotting down all the necessary points to help you with designing a great logo. Apart from enlisting things to do, I would also educate you about the things you should totally avoid doing while logo designing

A Study of Symmetry: When, Where, and Why to Use It – Finding the proper balance in your designs is an essential part of building quality visual communication. When your design is out of balance, your message gets lost in the confusion.

Review of the Best Font Managers for Your Own Usage  – There are a huge number of font management apps, and I’ve tried a lot of them. So, let’s start talking about their pros and cons.

Branding: Where Graphic Design Meets Marketing – Applying design to commercial pursuits — specifically branding — is an excellent place where artistic pursuits and commercial application come together.

6 Essentials of a Kick Ass Logo Design – Today we are going to discuss some absolutely indispensable factors affecting a brand’s logo design.

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

How Small Businesses Can Increase Sales through Social Media – Small businesses and businesses in general, can boost up their sales and increase customer retention and brand loyalty through using vast variety of social networking sites.

5 Insider Tips for a Better Social Media Strategy – Social media analytics can be a boon for businesses that use it wisely. Two founders of social data start-ups explain what they’ve learned so far.

Short Answers to 10 Difficult Blogging Questions – Today I’ll talk about some of the more difficult questions I get.  Hopefully you’ll be able to glean something from my responses.

10 security mistakes that are easy to avoid – No matter how much we try, users overlook some security mistakes that are relatively easy to correct. In this article, I’ll discuss 10 avoidable security mistakes and describe what you can do to correct the oversight.


Customizing the WordPress Menu with Custom Classes – The standard menu in WordPress, while powerful and easy to add onto almost any theme, leaves a bit to be desired when it comes to styling.

Changing Background Color of Specific Page, Post & Category – You can easily change the background color on a specific page, post, category or archive once you find the i.d for that page.

How-To Paginate WordPress Posts and Pages into multiple pages – Splitting the long WordPress posts or pages  is the best way to display your long and different contents on multiple pages without changing the Post or Page’s URL.

Add Custom Post Types to Tags and Categories in WordPress – Out of the box, WordPress does not automatically take your newly created custom post types and add them to the archive pages for existing taxonomies ‘categories’ or ‘tags.’

How to Create a Custom Options Page in WordPress – One thing that seems to define technology is that users like both ease of use and the ability to customize the appearance of everything they use. Custom preferences pages within the WordPress are the best way to combine these interests.

How To Become A Top WordPress Professional – Development isn’t the only way to get ahead in WordPress, because one of the great things about it is that you don’t need to be a developer or an expert.

Custom Database Tables: Creating an API – The API acts a layer between handling data in your plug-in and the actual interaction with the database table – and is primarily intended to ensure such interactions are safe and to provide a ‘human friendly’ wrapper for your table.

Best Practices for Keeping WordPress Clean & Secure –  In this article I would like to share some best practices for installing WordPress and keeping your website safe. Since the project is open source there are very few bugs left unpatched at this point.

How to Effectively Track WordPress Outbound Links Internally – Site owners who use WordPress platform for their sites and blogs may find the need to track outbound linksfor various reasons. If a site owner is enlisted in one or more affiliate programs, tracking these outbound links is important.

Conditional Variables and Database Queries within WordPress – The development team behind the world’s most popular content management solution has included a way to alter templates “on the fly” using database queries and conditional variables.

Search Engine Optimalization, Conversions, Analytics, etc.

Link Building 101 – The Almost Complete Link Guide (Updated for Post-Penguin) – Creating a solid strategy should be the starting point for any link building campaign, not having one in the current climate would be like running into a minefield wearing a blindfold – It limits your success of survival!

Improve Your Website Search Optimization Using Chrome’s SEO Site Tools – First off, if you don’t have Google Chrome installed, you can download it for free. It works on Windows, Mac, and Linux based machines.

Must-Know SEO Strategies for Web Designers – Of course, you want your site to be displayed up front. To optimize your site for the search engines, here are some things you need to do

An Introduction to SEO – Thanks to fierce competition between websites it’s become more important than ever for online success. But what exactly is SEO? Which approaches are recommended and which tactics should be avoided?

Understanding Google’s Author Rank and How to Use it in Your Content Marketing – Allow me to introduce AuthorRank – possibly the biggest change in Google’s algorithm to date. Bigger even than Panda and Penguin!

7 Small Business SEO Tips – Here are seven small business SEO tips to help earn more business through traditional organic search rankings.

The 20 best tools for SEO – SEO tools can help speed up your process and save you time, allowing you to concentrate on the important tasks. But with so many out there promising the earth how can you decide what you need and which tools to choose?


A Visual Database Gallery In Pure CSS – This effect is best suited to a portfolio of two dozen images or less. The goal is to filter the works by type to allow the visitor to view images in different categories, just as a true database would, only visually.

StackSlider: A Fun 3D Image Slider – An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing.

Responsive & Touch-Friendly Audio Player – A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.

Build an image gallery with Knockout – Knockout is a JavaScript implementation of the Model-View-View Model pattern, a way to define data in a model object and then bind DOM elements or templates to that data.

Build an Adaptive CSS Modal Window – This tutorial is yet another fun CSS project that helps you build something that you may have thought was only possible with JavaScript. We’re going to create a modal window that can be shown and hidden with a click that’s powered by a CSS checkbox.

Freelance, Business and Workflow Related Stuff

How to Tell Your Clients Their Mistakes –  If you have informed your client about your concern but your client still wants to stick to their decision, then accept defeat and just follow them.

Designing Contracts for the XXI Century – Before we start modernizing contracts, we first have to understand their purpose, and how and why they got the way they are. It’s a long journey back.

3 Vital Tools for Online Reputation Management – Doing online reputation management can help you create or restore the image that you want for your business. Just make sure you have the right strategies and tools to use for a more accurate and convenient way of getting the results.

The Real Secret to Business Success – Learning is critical. Yet it’s the easy part. Implementing is what brings real success. This this is one of the biggest factors that separates ultra-successful people from the wannabes.

How to encourage business growth – A clear vision and confidence in a business is essential if the operation is to flourish. Business growth also relies upon logical and tightly organized processes in order to save time and money ..

What to Expect When You’re Freelancing – In this post, I’ll list some of less discussed challenges of freelancing so that you’ll know what to expect when you start freelancing.

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

Animation in a Flashless world – CSS3 transitions and animations can do most of the heavy lifting and HTML5 audio can serve up the music and audio clips. You can do a lot without leaning on JavaScript at all, and when you lean on JavaScript, you can do so much more!

Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy – My main issue with these redesigns is that instead of building the site like a physical page, they treat it like a canvas for an app.

Personalise your site for each visitor – Hopefully, this article has helped you to see that personalisation isn’t just another web technology to plug in and forget. For personalisation to be done well, it needs to be driven by an overall understanding of the user.

Think First, Code Later – It can be as simple as being a little more thoughtful before starting on any new piece of functionality. Involve your whole team if possible, or at least those working on what you’re doing.

- § -

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.

1 comment

on this article: “Tweet Parade (no.49 Dec. 2012)”