.. Your Daily Design Dosis

Tweet Parade (no.33 Aug 2012)

| Comments Off

Yay, it’s Saturday .. it’s time for a new roundup with the best design-related articles and tutorials of last week’s blogosphere. It’s all about webdesign, graphic design, SEO, tutorials, social media 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.

Tags in CSS files – I’ve always placed a dollar sign before any section titles in my CSS; this is so that I can find a section quickly (and limit my search scope to sections only) simply by running a find for $[SECTION NAME].

Mastering CSS3 Multiple Backgrounds – Today we will focus on another interesting feature—how to use multiple backgrounds with CSS3. There are many reasons why you may need to create a composition of multiple images to build your background.

The Most Important Parts of HTML5 – Technically, HTML5 is a specification from the World Wide Web Consortium. Many pedants will claim this is the only correct usage. For the rest of us, HTML5 is a useful term to describe the rapid changes that are currently happening to the Web platform.

Q&A: Responsive Sprites And Media Query Efficiency – This is a hot topic lately because of the rise in “retina” displays. But really, this problem has been building up for a while. Us Web designers often work in “pixels”, for instance, setting the width of an image: img { width: 100px; }.

Setting Up Sass on Windows – There’s a ton of information floating around on preprocessors nowadays. Most of that info is geared towards Mac users, so in this post I’m providing a very simple guide to help Windows-based developers get up and running quickly with Sass.

Don’t Overthink It Grids – If a more complex layout presents itself, people often reach for a grid framework. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Here’s how I build grids. It’s not hard or complicated.

Web Icons & the iPad Retina Display- This quick tutorial will cover one approach to creating resolution-independent scalable images that will look great on any screen at any resolution.

Animating Buttons with CSS3 – This is how the button will look in its initial and hover states, with a moment during the transition captured in-between.

Learning to Love the Boring Bits of CSS – The future of CSS gives us much to be excited about: On the one hand, there’s a whole range of new methods that are going to revolutionize the way we lay out pages on the web; on the other, there’s a new set of graphical ..

JavaScript Events And Responding To The User – Today, let’s get back to the basics of events and get you in the mood to start playing with them, beyond applying click handlers to everything or breaking the Web with <a href="javascript:void(0)"> ..

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

Our New Responsive Design Deliverable: The Style Prototype – The goal of a Style Prototype is to allow a client to get a visual summary of a site’s proposed design direction without the time investment of creating multiple pages of Photoshop comps or fully developing HTML pages.

Understanding progressive enhancement techniques in web design – With all the recent attention given to progressive enhancement, you would think it was a new way of thinking, or a new system that just cropped up from the depths of some R&D think tank.

Master Responsive Web Design With Gridset – Let’s face it, responsive design is hard work. Web design was difficult enough when we were only considering desktop platforms, but the challenge of seemingly infinitely varying screen and viewport sizes has really added to the complexity of website layout.

The top responsive web design problems … and how to avoid them! – This article will list the most common problems they reported and offer possible solutions, along with suggestions to consider on your next projects.

Workflows In A Responsive World: From Waterfall To Agile – The new philosophy and approach that comes with responsive design is forcing a change in workflow on us. It doesn’t change everything, but it does lead to several important differences from the way things have been done.

UX Design – Taking Branding To A Whole New Level – “Identicalness”, is the word to describe the current marketplace. Consumers are hardly connected to a particular brand; achieving brand loyalty has become quite challenging these days.

Determining breakpoints for a responsive design – A better approach is to let the content dictate where your breakpoints occur, and how many of them you need. Start resizing your browser window and see where there’s room for improvement.

Journey to The Heart of UX Design: Debunking Myths – User experience design enables us to effect a sense of purpose. It facilitates a conversation between the audience, the designer, and the object being designed. To that end, start by learning what your users really want.

Responsive javascript with minwidth.js and relocate.js- We have been using a mobile-first approach to responsive web design for quite a while now: This means using CSS media queries to create responsive layouts and JavaScript to deal with the more complex matter of responsive images.

Mobile and tablet specific guidelines – Part 1 Why we need them – So, it’s now even more important that businesses know how to make the best use of mobile and tablet devices, and clearly understand their advantages, and limitations, allowing them to effectively engage with their customers.

6 Design Mistakes That Destroy its Usability – Your website may have great content and pleasing design, but if visitors don’t stay very long in your site, there seems to be a problem with it. What can be the problem you ask?

How to Choose a Responsive Images Tool - Unfortunately not only the size of the websites is important, but also the size of the more interactive elements, such as images. Why is image size important?

Responsive Carousel Project: Now Open Source – We’ve found that most third-party carousels available online fall short of these requirements in one way or another, so we built our own, and recently made it public for others to use as well.

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

CAPTCHA: Is it a Panacea For All Spamming Problems? – While using CAPTCHA, I am sure, you must have wondered at some point or another, whether it really does control SPAM?  Taking a closer look at CAPTCHA and its various facets might give us an idea.

Tips to Create a Web Design that Overcomes Browser Compatibility Issues – New browsers keep mushrooming in the market and the major players keep innovating to retain their popularity, making it difficult to design a website that works perfectly on all browsers and ..

9 jQuery Preload Image Plugins – If you want your images will be loaded gratefully on your website, then you will have to have one of these great jQuery Preload Image Plugins that we have collected for today’s post.

Really Neat jQuery Fullscreen Slideshow Plugins To Use For Free – jQuery Slideshow plugins are wanted by almost every web designer because almost all of the clients nowadays want one in their site, to showcase their products, items in their portfolio etc.

Optimizing your website for short attention spans: six tips – Then reality sets in: attention spans are short and as great as your website is on paper, it just doesn’t hold attention long enough to convey all of the important information those customers and potential customers need to make the decisions that will boost your bottom line.

Anatomy of a Successful Landing Page – So many companies spend ridiculous amounts of money driving traffic to their website, but next to zero money is spent on converting that traffic. So get your landing page out there and convert that hard earned traffic into hard earned cash!

Effective design principles for web designers: Contrast – In this post, I’ll review the design principle of contrast, as it relates to web design with a focus on color and how to test for color compliance.

Creative Background Styles and Trends in Web Design – The right background style can really set the tone for your website. We’ll explore some great examples and current trends in website backgrounds that include large images, bright colors and bold patterns.

Beautiful Button Design in Action: Examples & Tips for Creating Effective Buttons – The principles behind great button design, and some practical tips to improve your own website’s buttons, and boost your conversions/click-through rates.

10 Neat Image Optimization Tools You’ll Actually Need – Images are heavily used on websites. Unless you can be absolutely sure that every visitor of your website has a super blazing fast network and the price of bandwidth is not a problem, then image optimization or compression is not an issue.

13 Most Popular jQuery Plugins of July 2012 – Here we are at the end of another month, so it’s time to get an overview of the most popular jQuery plugins from July 2012. No matter what kind of project you are developing, some of these plugins will definitely come in handy.

10 Amazing Useful Tools to Evaluate Your Web Design – These tools would let you analyze and optimize your page’s layout and help you improve it and the overall experience of the visitor.

best articles of last week

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

5 important questions you need to ask your client before designing an effective graphic – Graphic designers have a way with the arts, with images, with colors, with layouts. Whether it’s the perfect poster or the right logo, we can find ways to spin the information we’re given into something that pops, something that sells.

Hidden Features of the Pen Tool- In this episode we will explain a Pen Tool feature that has the potential to completely change the way that you draw with paths in Photoshop

15+ Buzzworthy Techniques to Promote Your Freelance Brand – One of the biggest mistakes you can make as a freelancer is to ignore building and promoting your brand. Starting my freelance business in 2010, I shrugged my shoulders at the thought of branding strategy.

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

10 Little-Known Email Marketing Tips for Bloggers – Taking a closer look, I came up with four underlying reasons why all presents are opened and gathered ten relevant tips to help you improve the email marketing strategy for your blog.


Delete Old Post Revisions and Free Up Space in Your WordPress Database – Saved post revisions can be a lifesaver in WordPress. If something goes wrong and you need to access a previous saved version of your post, it’s right there for you, ..

How to [Actually] Speed Up WordPress Site –  Those optimizations helps speed up wordpress blog from back-end, but the tweaks we are going to do now, are simple ones and are effective at the same time.

Creating Advanced, Contextual Layouts in WordPress with Conditional Custom Fields – This is best done on sites that cover a wide and diverse content genre, like a website about sports, entertainment, or politics. Creating a custom design actually enhances the site’s usability by cluing users in to exactly what type of content they’re reading.

Categories vs Tags – SEO Best Practices for Sorting your Content – What’s the difference between categories and tags? What’s the optimal number of WordPress categories? How many is too many? Is it okay to assign one post in multiple categories?

WordPress SEO or All in One SEO Pack Explained- Most of the blogs on this earth runs on WordPress, which says its mostly Search Engine Optimized. People are in great confusion with the most believed SEO WordPress Plugins, that is Yoast WordPress SEO Plugin and All in One SEO Plugin.

How to Change the Default Text Selection Color in WordPress – You know what makes your website’s design stand out? Attention to details. One of these details is changing your default text selection color rather than being the default blue color.

The WordPress header.php Template File: Do’s and Don’ts of Good Header Design – In WordPress, a great design begins in the software’s header.php template, which is an essential part of any theme’s file structure.

Supercharge WordPress: A Little Known Way to Increase Pageviews & Conversions – Fortunately it’s not something ubiquitous that only those with multi-million dollar budgets can implement, but a tactic that every single person reading this can benefit from: speeding up your website.

Search Engine Optimalization, Conversions, Analytics, etc.

Why So Many Suffered from Google Penguin Update + How to Recover – A big reason why many blogs, businesses and websites have suffered from Google’s Penguin and Panda updates this year is due to inexperienced, Black Hat, or just plain bad SEOs.

25 Ways to Get Penalized in 2012 – While it is possible to repair the damage incurred by these negative effects, it’s ultimately much more effective to take a proactive stance on penalty prevention by avoiding the following known penalty causes.

Google Penguin: what do we have to fear? – The long-awaited Google update (aka Penguin) hit the internet on April 24th and as a result, the web and SEO will never be the same. Google finally devised an intuitive algorithm update that addressed linking profiles for websites.

SEO and Javascript: DO’s and DON’Ts – Here are some DO’s and DON’Ts to ensure that pages that utilize Javascript are still designed with SEO principles in mind.

6 SEO Mistakes That Can Kill Your Website- And while it’s not impossible, it’s very hard to recover quickly from a search engine penalty. Here are 6 SEO mistakes you want to avoid making as you execute your SEO campaign.

How to write a killer Meta Description for your website – Meta Descriptions are the little black 1 or 2 line descriptions you see listed under each different result that you see on the search results pages.


Create a Minimal Coming Soon Page using HTML5 and CSS3 – In this tutorial we are going to create a Coming Soon page using HTML5, CSS3 and jQuery with a minimalist style and light colors.

40 Creative and Versatile Adobe Illustrator Tutorials From 2012 – Tutorials are not going to make you a better or more talented designer, yet the techniques and tricks they cover will come to assist you for a long time.

Pulling Your 5 Most Recent Tweets via Ajax – In this tutorial I’ll be working with exactly this type of open source jQuery plugin called tweet! which can pull recent tweets from any user account.

How To Create a Pure CSS Dropdown Menu – The menu we’ll be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown.

How To Build A Simple Tabbed Menu- In this tutorial you will learn how you can create a simple tabbed menu in CSS. We are going to use the HTML element list to display the menu and the drop down. Each of the top level menus are in their own list items and the drop down menus are lists placed inside the list items.

Create a Stylish Tweet Book with Jquery and CSS – So in this tutorial I am going to create a stylish Tweet book to keep your best friends and view their Tweets. As you complete this tutorial you will gain knowledge in working with jQuery and CSS to create a stylish book design.

New HTML5 Tutorials on Frontend Development Techniques – These tutorials are geared towards intermediate-to-advanced level programmers who are fascinated by HTML5 web development. Try out a few of these posts and see what you can learn!

Freelance, Business and Workflow Related Stuff

You (the Designer) and I (the Client), We Make a Team – It takes more than compelling content and intelligent coding to produce a great website. A successful relationship between a designer and a client is, perhaps, just as imperative.

How To Explain Raster vs. Vector To Your Clients – How many times have you tried to explain to your client why the logo from their website won’t work on their trade show booth? If you’re like me, the answer is about a bazillion.

Important Considerations for Estimating Your Next Website Design Project – It is ABSOLUTELY CRITICAL that you properly estimate your website design jobs. If you don’t, you will be eating costs left and right, which will end up totally destroying your profit margin.

Destined to Fail: How To Spot Terrible Client Business Ideas – If you’ve ever attempted to read up on or start your own business, you’ll likely have come across this encouraging nugget of information – the one that says upwards of 90% of new businesses fail within the first 5 years.

Useful Legal Documents For Designers (PDF/DOC) – Contracts are a source of anxiety and dismay in creative work, but they exist for a good reason. A good contract ensures that you and your client have the same expectations, and protects you in case things go south.

Freelancing 101: Why Clients Undervalue Your Work (And How To Change It)- Do you know why some clients consider you too expensive? Sure, it’s easy to chalk it up to them not having enough money or being too “cheap,” but that’s not what’s happening in many cases.

5 Phobias that are killing your small business (and how to overcome them) – It’s the most common reason many would-be entrepreneurs never venture outside their comfy cubicles. It’s what keeps many small businesses from reaching their potential.

What’s Your USP (Unique Selling Point)? – Nowadays, a USP simply refers to some part of a product or service that makes it unique from other, similar products or services. Designers can harness the power of the USP when marketing themselves.

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

Unsolicited redesigns and design commentary – Software design is always about working within constraints, affordances, and restrictions. Prescribing a design approach that prioritises a visual aesthetic over functionality is the opposite of user experience.

Don’t Be a Pansy: Great Design Is About Making Decisions – Some designers are on the edge of being truly great. They have amazing ideas rolling around in their head and even the ability to execute those ideas, but when that implementation moment comes, something goes wrong. What?

PaperFold-for-iOS – PaperFold is a simple iOS control that allows hiding of views on the left and right side of the screen by dragging the middle view. The left view supports only 1 fold. The right view supports variable number of folds.

- § -

I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-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.