.. Your Daily Design Dosis

Tweet Parade (no.35 Aug 2013)

| Comments Off

.. it’s Weekend again, time for a new roundup with last week’s best tutorials and design articles! It’s all about HTML, CSS, PHP, responsive web design, branding, 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.

The last couple of months it was almost impossible for me to post new (main) articles here, due to the fact I’m swamped with loads of client work and some personal projects too. This year it looks like my agenda is fully filled already, so next months I won’t be publishing every week :(

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

Detecting Critical Above-the-fold CSS – One of the criteria it suggested “Reduce render blocking scripts in ‘Above the Fold’ content”, specifically fixing the blocking CSS. The theory behind this is that the reader should get the first screens worth of content to the user in the first few TCP packets of response.

Links are not buttons. Neither are DIVs and SPANs – Unfortunately we’ve been seeing a lot of instances in our testing where an image or CSS styling is used to trigger an action of some kind.

Detect Browser CSS Support With @supports Rule – There is a new rule being formulated in W3C Draft, called @supports. In this post, we will walk you through on how this rule works to let you detect browser features via CSS.

CSS3 Navigation Menu Tutorial with Notification Badges – In this tutorial I will be showing how to make minimal CSS3 navigation menu that can be customized to fit your projects requirements and looks.

Introducing CSS3 Multiple Backgrounds – In this tutorial we’ll be creating an animated header using layered background images. We’re going to then apply an animation to position everything and add some interactive elements to finish it off.

CSS transition from/to auto values – None of the browsers handle CSS transition from/to auto values correctly. I hope one day transitions to/from auto values will work out of the box in all major browsers.

Outline of a Grid System in Responsive Web Design – A major tenet of Responsive Web Design (RWD) is proportion and fluidity. For designers, oftentimes, it’s a very frustrating to choose responsive grid system to use in their RWD project.

CSS-only: Load images on demand – You most likely heard about loading images on demand – which is not only a common sense, but also a good way to speedup initial page load.  Usually it is implemented via JavaScript, but today I’ll share with you how you can achieve the same effect by using pure CSS.

Force Margin/Space Between List and Floated Image – If you’re displaying floated images in your posts, you may notice that margins of lists and other block-level elements seem to “collapse”, this trick also works on other block-level elements, such as <div>s

Combining CSS Shapes with CSS Regions – With CSS Regions, you can flow content into multiple styled containers, which gives you enormous creative power to make magazine style layouts. The second ingredient is CSS Shapes, which gives you the ability to wrap content inside or outside any shape.

Javascript / BEST PRACTICES PART 1 – Though JavaScript has a few notoriously tricky features, it’s more important than ever in software development. This list of best practices uses code samples and side-by-side examples to help you write more readable, efficient code.

The HTML5 progress Element – the progress element represents the completion progress of a task. A progress element must have both a start tag (i.e. <progress>) and an end tag (i.e. </progress>), even though it looks like a replaced element (like an input).

Remove Whitespace Between Inline-Block Elements – One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.  Gross.  There are a few ways to remove that space;

Use CSS transitions for link effects – CSS3 offers a variety of properties to transition. By applying these transitions to links, and changing the link properties on hover, we enhance the way users interact with designs.

Create slick HTML5 animations – I would like to take you on a guided tour of the four animation technologies the modern web has to offer to help you decide which one is right for your project.

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

On Web Responsibility And User Experience Design – Lets just think twice before skipping over responsibility and Progressive Enhancement in relation to UX/Human Centered Design.

Compression techniques – At Google, we are constantly looking at ways to make web pages load faster. One way to do this is by making web images smaller. Images comprise up to 60%-65% of bytes on most web pages and page size is a major factor in total rendering time.

Responsive Images with Apropos – We took a look around at existing solutions for serving responsive images, but none of them quite met our criteria. Using Javascript meant extra downloads of unused images. Using cookies meant losing cacheability and made load time worse ..

Great Responsive Web Design is a Matter of Process – A successful web design is one that comes from a carefully planned approach. But when it comes to creating a great RWD, the tried and true process of web design that has worked for many designers in the past is no longer necessarily the best approach.

User-centred design research for international users – When trying to appeal to an international audience, it is especially important to perform robust user research and apply the results to the experience you are creating.

Creating the future of mobile responsive web design – The key is to understand your business and your brand. Also, learn what you can about RWD and its benefits, as well as its downside. When then is the best time for you to consider RWD?

Website Navigation: 4 Tips for Maximum Usability – This article will discuss the four primary pathways by which users get places on your site… and tell you how to optimize these pathways for maximum impact.

Responsive images: a look at Foundation’s interchange – I have decided to take some time today to show you one of the responsive solutions available out there, with a closer look at Zurb Foundation’s interchange.

Connected UX – Now we need connections—a way to pull together disparate data points, qualitative and quantitative data, and long histories of research into a central clearinghouse that can be shared, searched, and maintained by different teams.

The Danger of Assuming Context in Responsive Web Design – Mobile-first responsive web design means much more than just considering layouts, imagery, and media queries. In reality, mobile-first design is all about content.

User Experience or Speed? – Eliminating UX activities may not result in a higher overall speed and can easily lead to unfortunate results. In the following article I’ll try to provide a path that walks the fine line between UX and speed.

New Responsive HTML Newsletter Email Templates – This e-mail template comes fully equipped with a wide selection of module and template alterations available. Indeed, there are over 400 module files and 98 readymade templates.

How to speed up responsive websites – While at the moment there are performance issues, these can be overcome to some extent with some small adjustments, compression and image resizing.  However, the trade-off for this is in performance due to larger file sizes.

Beyond responsive design: discover ‘Context First’ – ‘Context first’ or ‘context-driven design’ means letting the content and experience be dictated based on the user. Things that should inspire the context include the following…

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

Choosing a Grid System – Today, I’m going to explain about choosing a grid system – from creating your own, to working with pre-made CSS frameworks. By the end of this article, you’ll have a good idea of the way you might like to walk your path with grid systems.

CSS Optimization Tools – Here I’ve compiled free online CSS optimization Tools which can clean, minify, optimize and re-format your stylesheets, check them out and select the one which fits your needs.

Hollow icons? A hollow argument – The story was about “why the practice of creating or using hollow/thin line icons in a user interface is, generally, not a great idea”, specifically the impending change of iconography with iOS7.

Must Have CSS Tools for Designers – In this article I have amassed a list of css tools , following css tools would help designers to create css menus, animations, 3d shapes, layers, responsive pages, buttons and many more.

500+ Free Tools for Web Designers, Web Developers and SEO Professionals – We have compiled a comprehensive list of the best completely free tools for the web industry. We have categorised these free tools into their primary role web design, web development, mobile and SEO.

Font Replacement Methods: Techniques for Web Fonts – Currently there are a few cross-platform compatible fonts that designers can use with the certainty that users have them installed on their system.

10 Must Have Responsive Web Design Tools For Designers – This checklist of must-have responsive web design tools is sure to give you the trigger you want to generate a fluid, responsive design that accommodates approximately every mobile.

5 Commandments for Designing Sign-Up Forms that Convert Like Crazy – In this article we will focus only on form design. The key to a high-converting sign up form design is to find out ways that make your forms a breeze to fill in, rather than a cumbersome task.

Speed Awareness Month – Make the Web a Faster Place -Industry experts are providing you the best tips and tools to speed up your website.

4 Warning Signs That You Need a Site Redesign – If you are worried that it may be time to put a new spark into your website design, then these are some warning signs you should be looking out for.

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

50 High-Quality Adobe InDesign Tutorials – I want to share 50 powerful InDesign tutorials which offer a whole lot more complicated solutions. The best part is that you don’t need to be an expert with InDesign to understand it all!

12 Business Card Design Bloopers to Avoid – A little reminder won’t do any harm. So, we will shot you some design mistakes to avoid in creating business cards in this post.

Extracting colours with alpha – Sampling a non-opaque colour that’s been flattened onto a background is harder, but not impossible. Many designers will be familiar with the Eyedropper tool in Photoshop, but may not be familiar with the Color Sampler tool.

The best free graphic design software – There is such a thing as something for nothing! We’ve rounded up a selection of the best free graphic design software around. Not everyone has the spare cash to spend kitting themselves out.

Typical Oversights When Designing for Print – The best way to avoid potential printing errors is to work with a printer that cares. I’ve also outlined some tips for making your design print-ready. It will provide you with some great information on different printing techniques.

A Guide to Approve and Reject Logo Design – Often, businesspersons are impressed with the style, color and graphics provided on the logo. However, there are few important aspects that need to be checked before approving the badge.

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

5 Common Mistakes to Avoid on Google+ – In fact it is now the second largest social media network behind Facebook after only launching just over two years ago. So why are so many Google+ users confused about how to use it?


The ultimate guide to update a wordPress theme: precautions & things You Must Do  – Fortunately, there are a number of ways to upgrade a WordPress theme depending on a particular situation. This post will describe how you can upgrade your WordPress theme even after it has been customized.

Recipe For a Successful WordPress Startup Business – When it comes to your WordPress startup business, the “what” is tightly connected to the whys. What WordPress idea would bring that sustainability to your startup.

Beginning With WordPress: Editing the Look of Your Site With CSS – So, now that we have a child theme set up we’re ready to get make some changes to the look and feel of our site.

How to Integrate WordPress Minify to JavaScript & CSS For Better Load Time – Minification is the process of removing all unnecessary characters or code from the source code without changing its functionality.

A Look at the WordPress HTTP API: A Review – Case in point: Throughout the last series, we’ve been taking a look at the WordPress HTTP API. Specifically, we’ve covered wp_remote_get and wp_remote_post, and we’ve done some relatively extensive work with both functions including building example projects.

Understanding the WordPress Template Hierarchy – One of the simpler and more powerful concepts that runs underneath WordPress themes is that of the template hierarchy. It’s super powerful and can make your life much easier as you build out a theme for your site.

How To (Efficiently) Load Social Sharing Buttons with WordPress – Nowadays, if you want to have a simple “Like” button on your site for a popular social network, they’ll probably require you to load their JavaScript from their server to handle it.

How to Install and Setup WP Super Cache for Beginners – Many of our readers asked us about how to install and setup WP Super Cache. Therefore in this guide, we will show you how to install and properly setup WP Super Cache.

Anatomy of a Perfect Sidebar – The Nuances of a Good Design – In this second part, we’re going to see how to design a sidebar and order the elements – specifically, the widgets – inside of it. One of the main reasons visitors don’t pay attention to the sidebars amounts to poor design choices.

Search Engine Optimalization, Conversions, Analytics, etc.

Ten Tips to the Top of Google – With Google’s more recent quest for quality, authenticity, authority, and usability, however, many of of the tips that could help get your site to the top of Google 10 years ago might not produce the same results today.

58 Resources to Help You Learn and Master SEO – In this post, I’ll give you resources you can use to learn about SEO and stay on top of SEO, including some free tools that’ll be useful for fixing any issues.


Pure CSS Slide Up and Slide Down – One effect that is difficult to nail down with pure CSS is sliding up and down, where the content is hidden when “up” and slides in when “down”.  The reason it’s difficult is because you may not know the content height.

3D Shading with Box-Shadows – In this article, I’ll show you a solution that can be applied to objects that only have a few faces. Our example will be a 3D movie gallery with glossy posters and, when the posters are rotated, the sides will contain matte information cards with meta data about the film.

Transitions for Off-Canvas Navigations – Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu.

CSS Flip Book jQuery Plugin – Today I want to share with you this jQuery flip book plugin that I’ve put together. Using 3D transforms and just a little jQuery you can use it too. Below I’ll outline exactly how it works.

How to Build a Dynamic Imgur Upload App Using jQuery & PHP – Many new online web services are providing backend APIs for developers. These allow anyone to connect into a web app and pull out specific information (or push or change bits of data). Today we’re specifically looking at the API for Imgur.

Building an Interactive Navigation Bar with HTML/CSS – By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.

Freelance, Business and Workflow Related Stuff

How to launch a startup company: 8 must-read tips – Here, eight prominent entrepreneurs offer their advice on how to create a startup company and make the move that can change your life and potentially make your fortune.

6 Not-So-Obvious Mistakes Freelance Web Designers Make – The following mistakes are therefore not that obvious, but they still have a significant impact on your design business. And I’m speaking from experience unfortunately.

Time Management is a Myth, Work Effectively Instead – We’ve all looked at our to-do lists and sighed in despair at how many items were still waiting for us to finish. In this article, we’re going to go over a few essential tips you can use right away to work effectively.

Good Designers, Good Clients – Client work shouldn’t be difficult, but it does require a lot of effort. That effort should pay off. When I invest time in communicating with my clients, our working relationships strengthen and the work we create together is better as a result.

Not Too Hard, Not Too Easy: Finding Flow In Your Work – Elevating your awareness of the skill/challenge ratio of your daily responsibilities allows you to begin taking control over how much flow you experience on a daily basis.

How Value-Based Pricing Will Make Clients Beg You to Work for Them – Although We’ve been taught as freelancers to think that the way to price ourselves is per hour or per project, we should be thinking of value-based pricing instead.

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

Is There a Perfect Solution to a Design Problem? – As a designer, it’s very important to separate what we think is the perfect solution to a design problem, and what the best solution is for our clients and their customers. It’s not always the same.

- § -

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.

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