.. Your Daily Design Dosis

Tweet Parade (no.12 Mar 2013)

| Comments Off

.. yay, it’s Saturday! Here’s a new roundup with last week’s best tutorials and articles found on the blogosphere. 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.

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

CSS3 Introduction – New Features, What it Can Do, and Resources – HTML5 and CSS3 are here to stay, and in combination these two tools are very powerful and can create beautiful, high-quality solutions. Therefore you need to learn them and start using them today, otherwise you will fall behind your competitors.

SVGs, Icon Fonts, and Rasters! Oh My! – One of the most hotly argued topics in front-end development today is whether you should use SVGs, Icon Fonts, or varying-resolution Rasterized Images when it comes to resolution-independent interface elements.

iOS 6 switch style checkboxes with pure CSS – Not because I was going to use it (I rarely do), but because I started wondering what would be the best way to replicate this effect in CSS. I set on to create something that adhered to the following rules

A Look Into: HTML5 <article> and <section> Elements – HTML5 comes with a bunch of new elements and more will be recommended in the future. However, there are some elements that might be a little confusing in their implementation, including the following two new elements: <article> and <section>.

A Deep Dive into JavaScript Functions – Typically developers only become aware of the specifics of functions when something they wrote explodes in their face. My goal in this section is to expose the intricacies of JavaScript functions to you, which will hopefully save you from having to pull syntactic shrapnel from your codebase.

Fieldset, legend, border-radius and box-shadow – The fieldset and legend elements are notorious for being tricky to style, especially if you want the same result across browsers. Recently I noticed more fieldset + legend weirdness, this time involving the border-radius and box-shadow CSS properties.

Hidden HTML5 Tags Every Web Developer Should Know – HTML5 brings in completely a novel set of attributes and elements that allow the developers create documents which are easily understandable by other systems especially the search engines.

Can Object Oriented Principles Be Applied To Web Design? – I realize my look here is superficial at best, but I think there’s enough parallel to warrant a further and deeper investigation. Perhaps we can learn how to design websites more efficiently by looking to object oriented programming.

CSS Practices That Shouldn’t Be Overlooked By Beginners – Learning CSS is a must these days and almost all of us were at the point where CSS was a big enigma and we had to learn it bit by bit. The easiest way to learn it is by making a website.

Design in the browser – Channel your workflow into the realm of code and you open up fresh possibilities for dynamic design. HTML5 and CSS3 make it easier to transition more of the design process upstream – away from Photoshop and more towards a living, breathing design.

Comprehending the Clipping and Masking Process with CSS – Masking and clipping are two important features available in CSS that a developer should adhere to while designing. A lot of mistakes are made while carrying out these features in reality.

Working with flexbox: The new specification – Flexible layouts. Equal height columns. Presentation independence from your HTML source order. These things haven’t been so easy to achieve with CSS—until now. The flexible box layout, the new flexbox specification, makes creating any of these layouts easy, and much more.

CSS Architectures: Principles of Code Cleanup – We can all institute several basic, solid CSS writing practices to vastly improve the maintainability of any organization’s stylesheets. Ultimately, however, what we should really shoot for is structuring a given site’s stylesheets to dramatically increase scalability.

Detect Vendor Prefix with JavaScript – The awesome X-Tag project has a clever bit of JavaScript magic that detects those prefixes in the browser environment — let me show you how it works!

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

The Era of Symbol Fonts – Improving performance is a constant process. First we ditched tables and inline markup such as the <font> element in favor of CSS, reducing page sizes, and separating style from layout. Now it’s time we embrace the third epoch in performance optimization: symbol fonts.

Old Dog, New Trick – I’ve spent the majority of those years, as many of our designers have, in Photoshop; Pushing pixels around to try and achieve some level of perfection. Typically, one of two things happened once these flat PSDs got translated into code

Visual Balance and Weight Allocation for Usability – Designing balanced compositions means allocating weight to page elements (based on importance) and creating a successful visual path that in return controls which elements are seen in what order.

The UX-Files: Anatomy of Experience Strategy – As user experience designers, we analyze problems differently than most people, and through methodologies we build in design work we’re regularly able to synthesize data about the problem to make an informed decision on the solution.

Solving The Back Button – I love the iPhone 5. The extra 640×176 pixels for content is very useful. But, I’ve had a lot of trouble accessing the most used button of all: the back button. As a rule in user experience, when a function is this frequently used, it should be made easily accessible.

Responsively Retrofitting An Existing Site With RWD Retrofit – We’ve told our clients about all of the benefits of RWD and about why they shouldn’t build a separate mobile website. But clients who had already spent thousands of dollars on a fixed-width desktop website were less than pleased.

7 Usability Strategies For Your Website – The ease with which users can use your website is one of the most important. Website usability can help boost sales and make your website a success. It helps build a loyal user-base and keeps users coming back to your website.

Common Misconceptions About Touch – But there are still very few designers who seem to know how touchscreens actually work or how people really interact with them. I’ve encountered lots of myths and half-truths about designing for touchscreens.

How to make your contact forms mobile friendly – Many simple HTML and CSS practices will make your contact forms more user-friendly and elegant for visitors on mobile devices.

On Responsive Layout and Grids – Many smart minds have produced very interesting results worth studying. I call it nonsense because overcomplicating the problem will always produce crazy complex solutions. I believe this comes down to a desire to abstract code too far.

Type & Touch – I find it’s better to err on the side of larger type and bigger touch targets on any screen size, but I do think I was over-generalizing. In fact, there are a lot of places on the current Microsoft Homepage where we’re using 14px (0.875em) text.

Browser compatibility — viewports – Here’s the inevitable compatibility table that goes with my viewport research. It treats the viewports themselves as well as some related items.

There Is No Mobile Internet! – If you start thinking about your Web experience from a mobile standpoint, you will be forced to devise and create a sharp, focused communications strategy and UX design that cater to multiple interaction mindsets and user goals.

Visual Hierarchy in the New Era of Responsive Design – The web design community doesn’t have an “official” answer but the huge majority of designers agree with the idea that the principle of visual hierarchy doesn’t suffer any modifications in creating responsive websites.

A Great UI is Invisible – A really well designed user interface is one that goes unnoticed by the user, whereas a poorly designed user interface forces the user to pay attention to it instead of the content. A user interface that is invisible and that provides seamless interaction possibilities.

Responsive Web Design With Physical Units – It’s called the “resolution media query”, and it’s been in the specification for media queries for some time. However, while it has been in the spec, that doesn’t mean anyone has actually implemented it yet.

Designing for a responsive web means starting with type first – Remove the text from almost any popular site and it becomes impossible to use. This means those differences in screen size, device resolution or text rendering don’t matter in and of themselves, but only because they influence how someone will read our content.

5 Things to Know When Designing for iOS – We’ve come up with a list of 5 things we believe designers should keep in mind while conceptualizing interfaces for iOS. While the focus of this article is only on iOS apps, much of the advice here translates directly to other mobile platforms.

Getting The Website Information Architecture Right: How to Structure Your Site for Optimal User Experiences – Information architecture is no joke, yet overwhelming majority of businesses have structured their site using the IMO method – “in my opinion”.

Responsive Design Is Always Appropriate – Whenever I hear someone say that responsive design isn’t always appropriate I wonder if they truly understand the reasons for designing responsively or how to actually go about creating a responsive site.

Go Vertical – When space is available, why not feature the product more prominently? Apple uses vertical media queries to optimize its iPhone hero image for tall viewports but could easily extend that same thinking to small viewports, as well.

There’s more to the CSS rem unit than font sizing – In this post, I’ll describe how to use the CSS rem unit to scale specific page elements while leaving others unaffected. I’ll also discuss how to use it as a replacement for the under-supported vw (viewporth width) unit.

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

E-commerce Website Navigation: 14 Essential Tips – In an e-commerce website where a sale or a bounce is just one click away, navigation turns out to be very important. A clear, prearranged and reliable navigation will assist users to locate products in minimum number of clicks.

The Not-So-Odd Couple: Designers and developers – Let me clarify a little bit. HTML and CSS are markup languages. They are not technically code. Javascript, however, is code. My beef with the afore mentioned comic is that what the text references is purely markup and not code.

10 things web designers need to know about app design – If you’re moving from building sites to apps, here are a few app-specific rules and concepts you need to understand.

Lou Ferrigno Gives His Body 110%, Should You? – Discussing approaches to setting the base font size of our websites. When we use relative measurements like ems, you see, that relative measure has to come from somewhere.

The 20 best tools for data visualization – A picture is worth a thousand words, but creating cool infographics can be time-consuming. It’s often said that data is the new world currency, and the web is the exchange bureau through which it’s traded.

Improving Readability With Proper Typography – From the beginning of typographical design, some rules and principles became the standard in order to achieve readability and typographical beauty, and some of these principles are analyzed below.

A More Flexible Workflow – Over the course of the last two years it’s become clear that our long-used linear design process wasn’t holding up so well. We had some lofty ideas for change, but weren’t sure how to tactfully try and upend a process that had been in place since…well, always.

HTTP Archive: jQuery – Discussing whether there’s a benefit from loading jQuery from Google Hosted Libraries, as opposed to serving it from your local server. Loading jQuery from Google Hosted Libraries is probably NOT a good idea because of the low percentage of sites that use a single version ..

Wireframing your web application – My solution is to get it out of my head and onto paper. I use either blank sheets of standard printer paper. Start with regular paper. I don’t want the wait for the perfect tool to arrive to keep you from getting started today.

The difference between PNG formats – There are 3 formats: PNG 8, 24, and 32. PNG8 refers to a colormapped image. PNG8 means that it can have up to a total of 256 colors. This is similar to a gif file without transparency.

Tricks of Web Design that Would Make You Site Go Viral – Studies were conducted among businesses of the same niche. And it was found out that those that had a better web design enjoyed greater ROI at the end of a financial year.

Speed Up Website Load Time Using Cloud Services – When most us think of cloud computing, data backup and security first come to mind. While the cloud does offer these services, did you know there are also options that can help you speed up website load times, especially those which make heavy use of photos and videos?

Mixing Typefaces: Tips and Techniques – Mixing typefaces can be on of the most rewarding, and trickiest parts of the design process. Creating the perfect pairing of typography can result in a beautiful and perfectly readable outline for almost any project.

How To Design A More Effective Pricing Page – Designing an effective pricing page should be high up on your list of priorities. After spending a lot of time, effort and money on getting potential customers to your pricing page, you need to make sure that you do everything in your power to not fall at the final hurdle.

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

20 Secret Photoshop Tips for Levels and Curves – Improve your image editing workflow instantly with our pick of the top 20 tips for Levels and Curves.

The Age of Branding – A friend of mine is a marketing professor with a specialist in branding. He recently gave a talk about how high-end brands risk diluting their exclusivity by becoming so commonplace that to possess, say, a Louis Vuitton handbag, means you’ve got money but not necessarily taste.

4 essential rules of effective logo design – And while this sounds simple enough, many logos tend to overshoot or fall short. Let’s see if your logo makes the grade and consider four essential rules for successful logo design.

How to use curves in Photoshop – The Curves command remains one of the most potent tools in Photoshop’s arsenal. Versatile, powerful and intuitive, it’s the weapon of choice for most tonal tweaks.

How to Create a Book Cover and Mock Up in Adobe InDesign – In the second part we’re going to design the spine and back of the book cover and finally create a 3D mock-up in Adobe Photoshop. We will use all three design applications for his work flow: InDesign, Illustrator and Photoshop.

How to make a repeatable pattern in illustrator – I had to design a repeatable vector pattern for a client last week for the first time, and I figured I would share the process I took from start to finish.

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

A Deeper Look into Various Content Management Systems – In this article I would like to delve a bit deeper into some popular Content Management Systems. Web projects which gain traction often stick around the longest, and these frameworks can produce loads of new themes and modules.

How to Improve Your Social Media Marketing With Blogging – Blogging can help you improve your social media marketing. In this post, you’ll discover four tips to enhance your social media efforts using your business blog.


How To Build Your Own WordPress Contact Form and Why – There are loads of plugins around for everything you could ever wish for in a WordPress blog, but I feel both rewarded and secure when I build features from scratch.

How To Create Custom Queries In WordPress – There are 3 ways you can query the WordPress database, you can use the pre_get_posts action, query_posts() function or the WP_Query class.

10 Useful WordPress Widget Tutorials – Widgets are widely used on the blogosphere and if you want to add custom built functionality for your own or client’s blog you will be able to do that after completing some of the tutorials listed in this post.

How to Efficiently Clean Hidden Link Injections in Your Hacked WordPress Sites – Recently I had a very sobering experience that demonstrated just how serious the threat of hacked WordPress sites is. I discovered hidden link injections in some posts on a few of my old sites.

Using WP e-Commerce – With an agglomeration of ecommerce plug-ins available for WordPress, WP e-Commerce stands out as a standardised solution – it’s incredibly powerful and expandable, and works with just about every theme you can think of.

Custom Page Template Page Based on URL Rewrite – I wanted to add a rewrite rule on a permalink and wanted to use a custom template for that rewrite rule. However, this is not an exhaustive post about how to do rewrite rules, ..

50 Great WordPress Resources for 2013 – Today I would like to share with you 50 of the best WordPress resources online. These resources will help you get more from the WordPress platform.

Practical Tips From Top WordPress Pros – Some tips from WordPress pros from across the community. Many of the tips cover development, but there’s also advice on business, running your website and, of course, getting involved with the community.

Search Engine Optimalization, Conversions, Analytics, etc.

How to Increase Your Sales with Interesting Web Design – Many people overlook web design when it comes to making a sale, when it is a well-known fact that web design alone can account for 99% of a buying decision.

25 Ways for How to Drive Traffic to Your Blog – Getting enough traffic to your blog is one of the most crucial things you can do to achieve the best results from your online investment. One way of gaining a large base of readers is through actively driving more traffic to your site.

HTTP 503: Handling site maintenance correctly for SEO – Last week I got a few messages from Google Webmaster Tools, saying it couldn’t access the robots.txt file on a site of a client. Turns out the client didn’t handle scheduled downtime correctly, causing problems with Google.

How to use Google+ to improve your search traffic – The problem most small businesses have discovered over the past 18 months has been how to work with this new element in search to increase traffic, and continue delivering quality content.

6 SEO Sins That’ll Put You on Google’s Naughty List – You don’t even know why. It just feels like the biggest, baddest bully on the Internet decided to knock the crap out of you, leaving you whimpering and bleeding, wondering what on earth you did wrong.

A Primer On How To Get The Most Out Of Sitemaps – But, are you aware of the many different types of Sitemaps you can use, what the differences are between them, what each one’s intended role is, and why you are probably still not doing it right?


Css-only Alternative to the Select Element – I will present you my alternative solution to the select form tag. It’s css-only and it looks simple but really nice. We will use a list of radio elements, styled as a drop-down list, that will look and behave similarly to the select element.

Thumbnail Grid with Expanding Preview – Today we want to show you how to create a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

Automatic Table of Contents – Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. It may be smart to build it dynamically on-the-fly with JavaScript.

Simple Steps for Creating a Fixed Navigation Bar – When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process.

Code a Dynamic Featured Image Gallery Layout using jQuery – In this tutorial I want to demonstrate how we can build a small layout wrapped around a full image gallery carousel. I will be using the Pikachoose jQuery plugin for this example.

Freelance, Business and Workflow Related Stuff

How to get good feedback from clients and colleagues – Everything you do is brilliant, right? Any creative who really cares about producing exceptional work knows that it requires analysis and criticism from a wide range of sources: colleagues, end users, customers and clients.

The best tools for invoicing clients – Invoicing clients is hardly the most exciting task on your to-do-list but getting paid is an essential part of the job. So rather than waste your time painfully trawling through the hundreds of invoice tools out there, we’ve compiled a list of five of the best so you don’t have to.

5 Ways to Make Passive Income For Freelance Designers – More and more freelancer designers are looking for a way to earn more money than the usual client work or full-time position they have. In the following article we will discuss a lot of ways how you can earn more from being a freelance designer.

Using Your Own Design Voice – So, what is voice? What is personal style, and how can we creatives develop it? One thing’s for sure – it’s not just something for writers to think about.

The Benefits of Working on Freelance Projects – In this article I want to present a few ideas arguing the benefits of working on freelance projects. Both designers and developers creating websites have the opportunity to earn real livable money without answering to one specific bossman.

38+ Freelancing Success Tips – There are challenges to be met. There are problems to solve. And it’s hard to remember everything. This post can help stay you on track. It works great as a quick reminder for the experienced freelancer or as a checklist for a new freelancer.

How not to bust your design budget: 10 pro tips – We identify 10 common design pitfalls that can bust your budget, and how to avoid them – saving your project and making it a success. Not all projects are smooth sailing.

Get More Clients: How To Harness The Power of Testimonials – Testimonials are one of the most effective ways to legitimize your service claims and convince clients to hire you. Freelancers should know how to use them to their advantage.

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

Breaking free of the print design mentality – In a world where even your watch can access the web, it amazes me how many are still fighting for pixel control over their websites. It’s time to put them straight.

There Are No Best Practices – There are no best practices, only actions that have worked for others in other situations. Yet we feverishly seek them out, apply them out of context, and expect they’ll solve a problem unrelated to their heritage.

Learning to See – Learning to design is learning to see, an adventure that gets more and more captivating the further you go. A love letter to my profession…

- § -

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.