.. Your Daily Design Dosis

Tweet Parade (no.06 Feb 2013)


.. yep, .. it’s time again 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.

Designers Will Code – Should designers code? It’s an important conversation for our field, but the reality is that most designers can’t and don’t code as part of their regular process.

CSS Background shorthand coming to mobile WebKit browsers – WebKit updated the behavior of the CSS background shorthand property. With this change, the background shorthand property will reset the background-size to its default value of auto auto.

7 HTML5 predictions For 2013 – In December 2012, The World Wide Web Consortium announced specifications for HTML5 and Canvas 2D regarding them as “feature complete”. This means that HTML5 now offers a stable environment for developers.

Common JavaScript “Gotchas” – I want to share some of the things that I struggled when I started working with JavaScript. I am going to cover the global namespace, this, knowing the difference between asynchronous operations, prototypes, and simple JavaScript inheritance.

In Defense Of Rem Units – “Rem” stands for “root em”. Similar to em units, they calculate size based on an ancestor element’s font-size, except rem units always calculate against the html/root element’s base size.

Dig deep into CSS gradients – The idea that you can obtain many shapes using just gradients was a starting point for many CSS experiments I would later do.

Is using @import in CSS really such a performance roadblock? – Using @import is such a taboo that to use it in a production site is almost the equivalent of putting an “I’m an idiot coder” banner on the home page. But why is it so wrong and do these arguments stand up to scrutiny?

Getting started with Object-Orientated CSS (OOCSS), creating a button kit – Object-Orientated CSS, or OOCSS, is a method of structuring your CSS and HTML classes in a specific way. The purpose of OOCSS is to make code more easily usable, and more importantly – reusable.

Thoughts On Modular Design: Click Events And Depth Of Applicability – Overall it doesn’t strike me that the css click method is going to be less maintainable than the Javascript method. There are some pros and cons to each and neither truly outshines the other. We’re not talking huge differences.

Flexbox: CSS Flexible Box Layout – But the chances are good that Flexbox is the next big thing. The latest versions of Chrome and Opera have already jumped on the bandwagon, Firefox will follow in version 20.

Modern CSS3 techniques to embellish your website – The CSS3 specification allows front-end developers to create sophisticated visual effects. I have compiled over 10 new CSS3 techniques to embellish your website and give it a more professional look and feel.

Balancing Text for better readability – I propose we use a text rendering algorithm that would be applied by browser when asked by the designer to do so to automatically balance text across multiple lines.

CSS background-position and percent – I managed to figure out how to calculate background-position in a way that lets you use % to correctly position an image where the column widths do not have the same proportions as the columns in the box.

Five things you can do to make HTML5 perform better – These old ways of working are needed to support legacy browsers and in a lot of cases are not needed as these legacy browsers will never see the apps in the first place.

Tips for using SVGs in web projects – When trying to utilise them in large web projects there are a few pitfalls I’ve come across that I haven’t found to be documented. This post therefore serves as a few pointers if you are looking to employ them in a web project.

Git Tips From the Pros – We’ll take a look at some of the advanced features and workflows that you might not already be familiar with. Hopefully, you’ll walk away with your mouth agape at the sheer possibilities that git provides!

Introducing the New HTML5 <main> Elementmain marks the meaty content within your page, i.e. the target of a “skip to” link. You’ll probably use main where you had a content wrapper before; it will replace tags such as <div id="main">, <div id="page"> or <div id="wrapper">.

Using Web Debugging Proxies – In many cases, we work locally and forget that page size, latency, and script loading and blocking can greatly affect the way a user experiences your site. So having a good set of tools to inspect network traffic is vital to rounding out your debugging toolset.

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

A Definitive Guide To The Android Carousel Design Pattern – One of the best patterns for browsing a small collection of featured products is the carousel. Unfortunately, many mobile app implementations do not offer an engaging or satisfying carousel experience and are not effective at driving conversions.

Ditching responsive design – We’ve just redesigned our home pages, and moved from a responsive design to an unresponsive one. Given the trend towards a responsive web, we thought we’d share why.

5 Reasons Why Responsive Design is Wrong for Your Business – Responsive web design is the darling of the web design industry…but is it right for your next project? If your website isn’t optimized for mobile, most of these visitors will bounce from your website like a quarter on a military cot.

Lessons We Learned from Our Biggest UX and Design Mistakes – Making mistakes is unavoidable and that if we choose to learn from them, they’ll be helpful in giving us good guidance on how to move forward more effectively.

Getting Started with Responsive Typography – In some instances, the change is simple, link a change in point size or leading (line spacing). Other times the change is more distinct, such as the substitution of a typeface to account for smaller screens.

An Expert Roundtable Discussion on Responsive Grids – But responsive design needs to do more than create columns and rows. When a medium changes, what happens to its tools? We talked to three experts about the issues and challenges facing grids for web design.

Does Mobile Web Performance Optimization Still Matter? – The most important thing to understand is that for web performance, once sufficient bandwidth is available (about 5 Mbps is the inflection point) latency becomes far more important than bandwidth.

Design fundamentals: constraints – Constraints limit the actions that can be performed by the user, thus increasing the usability of the design and reducing the likelihood of operator error. There are two models of constraint: physical and psychological.

Faster Websites: Crash Course on Web Performance – Delivering a fast and optimized user experience in the browser requires careful thinking across many layers of the stack – TCP and up.

6 User Experience Statistics You Should Pay Attention To – The difficulty lies not only in the ability to cull the important statistics from the more superfluous ones but also on deciding how much is necessary.

How to Make Your Existing Website Mobile and Tablet Friendly – Here are some tips to turn any website into a completely responsive design so that it’s ready for the mobile devices and tablets

How to Optimize Your Site for Retina Display – designers and developers are urged to optimize their websites and make them Retina compatible so that there design and appearance are as impressive as possible on the improved display

Make your sites load faster – Speed should be important to every website. It’s a well-known fact that Google uses site speed as a ranking metric for search results. This tells us that visitors prefer fast websites – no surprise there!

3 Quick Steps to Get Your Site Retina Ready – In this article, we’ll examine some of the tools you can use to prepare your websites for the high resolution future. The future will be in high resolution.

Where to Start – When making the transition to building responsive websites, the hardest part can be getting started. It can seem daunting, so I thought I’d attempt to sum up a few of my own current thoughts on the matter.

There Is No Breakpoint – The past two years have been encouraging as our industry has taken steps — some large, some small — toward embracing the web’s fluidity more fully.

Designing with Motion – Animations in a website or app should be subtle, complex, and natural. The right combination of these can make a UI feel responsive and alive. This achievement comes from a culmination of things, but life in software comes almost entirely from motion and animation.

On Responsive Navigation and Rendering – I’m experimenting with an intermediate state that essentially mimics the app screen we know and love. It utilises the available space for big touch-friendly buttons.

Master mobile navigation – There’s a host of interesting navigation options available to you when you are looking to adapt your designs to smaller screens. Each strategy has its own set of pros and cons, as well as dependencies in the form of source order, markup, CSS, and/or JavaScript support.

Responsive Web Design for The Enterprise – For the enterprise, Responsive Web Design will not be an instant, easy peasy, “now-our-website-works-on-the-6,500-(and-counting)-different-types-of-mobile-devices” kind of ordeal. Why is that?

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

The Secret of One Page Appeal – Did you ever ask yourself a question why one page designs are so popular among famous world brands, like Nike and Volkswagen, for instance? We will try to make out the secret of one pagers’ irresistible appeal.

Fresh Resources for Designers and Developers – February 2013 – In this round, we will feature a few useful resources for Mobile development, such as a plugin to group items in folder, an image gallery plugin for Mobile.

40+ Useful HTML5 Tutorials And Techniques – For the web designers and web developers, this collection will be a treat for them because in this collection, we are showcasing 45 useful and amazing HTML5 tutorials and techniques that would astonish them.

Chrome Dev Tools: JavaScript and Performance – The Sources Panel is the go-to place for JavaScript debugging. It’s a point-and-click interface that lets you pause JavaScript execution and inspect all the variables and objects in the current scope.

Using the Cloud in Web Design – This technology has made collaboration easier than ever, with the ability to quickly share and discuss ideas, mockups and finalized designs quickly and easily with very little time spent arranging the logistics.

Flat Design and Accessibility – In this article, we will be taking a look at some of the recent accessibility improvements that Flat Design has brought and helping make the internet that little bit more open and accessible to everyone.

Speeding Up Page Load Times – In this blog post you are going to learn about a number of techniques that you can use to help reduce the size of your web pages and speed up your page load times.

What you Should Know about Web Typography that Will Make You a Better Designer – No matter how many bells and whistles you’ve built into a website, it is the text that users rely on to accomplish whatever they’re visiting the site to do.

Does The Web Design Industry Have A Conceptual Core? – Maybe it’s not for us to define and whatever lies at our core as an industry is something that only future generations can see. Do you feel the same? Is there a concept that defines your work?

Tools and Tips on how to Optimize Images for the Web – The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. Since images can be pretty heavy, this is certainly an issue to keep an eye on.

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

A Quick Guide to Serif Fonts – Even if you’re an experienced designer, it’s never a bad time to refresh your memory a little with the structure of serif typefaces, a few recommendations and a little history.

Why Branding is The Only Key Of Success? – Branding is an essential part of the way you communicate who you are and how you differentiate yourself from your competitors. According to the latest analysis, it has been seen that strong brand marketing can give a steady growth in your sales.

Illustrator tutorials: 80 amazing ideas to try today! – Here, we round-up some of the best Adobe Illustrator tutorials, covering everything from retro graphics to logo design, adding depth to your typography and much more.

Branding for New Businesses: the Basics Behind Logo Design – Yet without a proper logo to catch the attention of potential clients, you run the risk of continuing to be invisible on the international market.

Alignment and Combining Objects in Adobe Illustrator – Today we will be talking about objects alignment using the Align panel and combining them with the help of the Pathfinder panel and Shape Builder Tool.

9 Questions to Ask Your Client Before Start Creating a Logo – Any experienced logo designer is aware about the importance of communication and the design community created various strategies to overcome the inherent issues with the clients.

If You Love Your Brand, Set It Free – The ideal balance, however, stems from the ability to be flexible while keeping intact the core principles and attributes that formed the brand in the first place. Without such grounding, a brand becomes a changeling — morphing its shape to any external whim and impulse.

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

Make your company blog work harder – Running a company blog is never easy especially when you are unsure of whether it is making a difference. In this post we look at how to ensure your company blogging has the maximum impact.

Beginner Steps to Effective Business Networking – Still, one of the hardest things that I ever had to teach myself was networking. Below are four beginner steps for networking.

Things to do After Publishing Blog Post – So does this mean that one need to write quality content only to make one’s blog standout in the blogosphere? Well, there are many things that should be done after writing and publishing blog post.


Understanding and Using Widgets in WordPress – In this article we are going to see how the admin can drag drop the widgets and how can we develop a WordPress widget with options, defined to customize the behavior of the widget.

Mastering WordPress Configuration – wp-config.php – In this article, we shall be discussing the wp-config.php file as well as taking a look at certain tweaks that we can apply to it in order to get the most out of its possibilities.

15+ of the Most Common WordPress Mistakes – This article discusses in brief several common mistakes WordPress users and developers usually make. It is very astonishing how many WordPress users today are making the same mistakes, usually costly ones, repeatedly.

Using jQuery Masonry for Pinterest-Like Posting – With the inclusion of jQuery Masonry in the WordPress 3.5 core library, it’s never been easier to change up a template’s layout for recent posting. This tutorial is going to explore the idea behind using the newly included jQuery Masonry library with WordPres 3.5.

10 Great WordPress Plugins for Making Development Easier – Even if you know how to develop some functionality from scratch – like shortcodes, for example – it can often be easier to use a helpful plugin to get the job done faster, and in a more organized way.

How To Get The Most Out Of A Premium WordPress Theme – This post aims to take the pain out of using a premium WordPress theme by sharing some tips I’ve learned. We’re going to explore the steps you need to follow in order to get the most out of your premium WordPress theme.

Search Engine Optimalization, Conversions, Analytics, etc.

How to Get Google to Index Your New Website & Blog Quickly – Here are the basics of how website content is crawled and indexed, plus some great ways to get the Googlebot to your website or blog to index your content sooner rather than later.

Robots.txt – A Comprehensive Guide – Robot.txt protocol is also known as The Robot Exclusion Standard, which is a pattern to prevent the admittance of web robots and web crawlers to all other websites that are viewed by public.

9 SEO Quirks You Should Be Aware Of – They say the devil is in the details. When it comes to search engine optimization, those details include some important quirks you need to know about.

How to Unlock Your ‘Not Provided’ Keywords in Google Analytics – An increasing number of results in this part of Analytics are listed as ‘not provided’ – not much use when you’re trying to find out what people are searching for.

10 SEO Tips That Web Designers Should Remember – In order to make your website more search engine friendly there are a few tricks you need to remember when designing your content.


Creating Nestable Dynamic Grids – Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports.

How To Create a Simple Collapsing Header Effect – Making use of a simple collapsing header effect, where the page header or banner would gradually shorten and disappear upon page scroll. Let’s take a look at recreating this cool effect for use in your own website designs.

Create a 3D Book Animation with CSS – With the introduction of transforms in CSS, we can now replicate 3D objects. The 3D book I’ve created consists of two elements, the spine and the cover.

CSS3 And HTML5 Snippets You Should Be Aware Of – CSS3 and HTML5 are starting to become the things that everyone is trying to learn and what better way to learn how to do a certain snippet than to see it and its code in action.

20+ New CSS Tutorials – The freshest and very useful tutorials that we have collected here in order to save your precious time and make your workflow more fun and easy!

Interactive Infographic with SVG and CSS Animations – With the right techniques and modern browser support, developers can now produce some pretty impressive animations, effects and interactions using SVG. Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.

Freelance, Business and Workflow Related Stuff

Tips in Writing a Killer Quotation for Freelance Projects – Before we go into how you will write a quotation, let us first take a look at some important tips you need to know on how you can quote for freelance projects.

5 valuable tips for good project management – There’s been quite a bit of conversation over the value of project managers. Not necessarily good project managers; just project managers in general.

5 Elements of a Persuasive Web Design Estimate – You know you do quality work and your pricing is more than fair (maybe even lower than it should be). So if it’s not pricing, then what’s the problem with your estimates?

Building Something That Your Users Will Actually Want To Buy – It’s one thing to spend a few weeks coding your next big idea. But are you sure that you have an audience of customers that want what you’ve built?

How Much Time Should I Devote to Freelancing? – I know freelancers who spend far more time on their freelancing business than any employer would ask of an employee. I also know freelancers who earn a good living working part-time hours.

7+ Classic Secrets to Persuasive Freelancing – Fortunately, there are some time-honored principles that you can use to become a more persuasive freelancer. In this post, I’ll share over seven “secrets” to help you persuade others.

How to fire a client – Firing a client might sound like committing professional suicide, and in harsh economic times, walking away from paid work might seem naive, but it can actually be a liberating experience, and allow you to move forward stronger than before.

How to create the perfect design process – Streamline the design process to save wasted time and project reverse. We explain the basics of how to get ideas from conception to completion. We’ll take you through four distinct stages of a project, which form the bedrock of any design process…

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

The Rise of the Unbrand – Of course, a brand is more than a logo. All too often, something that does not have a logo is often misperceived as lacking brand. Any Marketing 101 course will tell you that a logo is but one important component of what makes a brand.

Avoiding the Uncanny Valley of Interface Design – Users don’t come to the site or open the application to stare at a UI. They come with needs to find certain content or to complete a task. They have other things they’d rather be doing like walking their dog.

No, I’m not going to download your bullshit app – Do I buy a separate radio to listen to different stations? No. The functionality is the same, the only thing that differs is the content. Apps ought to provide some actual functionality, not just blobs of content wrapped up in binary files.

Why should designers learn how to code? – Some people say that we should keep the boundaries of the traditional divide between developers who create the code and the designers that design the experience.

- § -

I hope you have enjoyed these hand-picked great articles? 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.


on this article: “Tweet Parade (no.06 Feb 2013)”
  1. Among all the tips, I like the part “Webdesign Coding” most. It seems to be great and really helpful! Thanks.

    • Hi Tareq,

      glad you liked it, and don’t forget .. every Saturday, there’s a new roundup here on the gonzoblog.nl

      Enjoy your weekend, cheers & ciao