.. Your Daily Design Dosis

Tweet-Parade (no.19 May 2012)

| Comments Off

A tweet-Parade is a collection of the best articles and tutorials of last week’s blogosphere, a hand-picked weekly roundup. 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. The different articles and post 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.

CSS layout gets smarter with calc() – The calc() property can be used anywhere there’s a CSS length or number in your stylesheet, so you can use it for positioning things, or in rgb() color values as well. The calc() property has lots of great uses in a style sheet.

JavaScript Style Guides And Beautifiers – Today we’re going to explore JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement.

Useful CSS3 Tutorials and Techniques – In this post we have compiled some useful CSS3 tutorials and techniques. Check out some of these fascinating skills and see if you can replicate the functionality in your own website.

How to Make Smooth Transitions with CSS3 – Once this specification is officially adopted, CSS3 Transitions will become a standard tool in web browsers. Until that time, we had to rely on vendor prefixes for this feature.

Mastering CSS Gradients in Under an Hour – Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?

HTML 5 – make pages more Semantic – As We know HTML5 is the major version of HTML. HTML5 have group of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screen readers to navigate our pages, and improve the web experience for everyone.

Explanation and behaviors of the CSS Box Model – Each HTML element is treated as a box in CSS and the CSS Box Model is the format or structure of that box. The CSS Box Model allows for a very dynamic and easy way to style your HTML Elements.

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

Agile UX vs Lean UX – How they’re different and why it matters for UX designers – I’ve seen a lot of discussion recently on what the difference is between Agile UX and Lean UX. Explaining the relationship and differences between Traditional, Agile, and Lean UX.

7 Basic Best Practices for Buttons – Nothing particularly revolutionary there, right? Ever since the <button>tag arrived in HTML4, buttons haven’t been especially difficult to create. Despite this, it’s rather easy to find buttons that don’t comply with these basic best practices, so [..]

Expressing UX Concepts Visually – It is all too easy to create UX deliverables that are not visually pleasing. But UX expertise encompasses Web design, graphic design, and branding, so why should we be satisfied with mediocre design in our deliverables?

New Design Practices for Touch-free Interactions – Touch interaction has become practically ubiquitous in developed markets, and that has changed users’ expectations and the way UX practitioners think about human–computer interaction (HCI).

Create Stunning Effects With CSS Transition Delays – I’ve covered transitions a million different ways, but there’s one feature that I hardly ever touch: transition delays. It turns out that the effects that you can achieve become much more complex and impressive when [..]

Effective Presentation of a Website’s Navigation – Users obtain information on the web in one of two ways: searching or browsing. Browsing – moving through a multi-faceted content structure – is made easier when information architects present users with an intuitive navigation hierarchy. This article discusses two techniques to that end.

Ultimate Responsive Web Design ToolKit – Because of this constant evolvement, nothing can be considered as a sure shot idea to have a nice, responsive web design.  This article will help designers in building a strong toolkit to make a responsive website.

Responsive Design 101 – It wasn’t too long ago that designers didn’t really need to worry how websites looked on mobile phones and tablets. Phones weren’t yet really practical for web viewing, and before the iPad, tablets were more of a novelty than an essential.

5 Reasons Why Metaphors Can Improve the User Experience – There are many ways to experience the world around us. Especially offline, we can make use of our different senses to collect information, interpret our environment and make judgments.

Which responsive images solution should you use? – There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion. They all do things a bit differently.

Responsive CSS that scales – CSS for a big site is different to CSS for a small, or even medium sized-site. The way CSS was intended, when you create a new piece of functionality for your website you simply write some new CSS to style it – easy.

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

12 Annoying Things About Your Website That Drive People Away – How many times have you visited a website and ended up sorely disappointed? Or worse, annoyed as all get out? For me, the answer is an easy one: a lot!

Web Fonts Vs Commercial Fonts + 150 Great Web Typefaces – Commercial fonts or free fonts?, this is a big dilemma that afflicts many designers as they find difficult to decide between beautiful but expensive fonts such as Helvetica or Futura and free fonts like the ones featured [..]

How to speed up your website – Site speed is one of the most important things about creating web content, and web applications. In fact, it has been noted by various analysts at Google that people don’t often sit through the first 30 seconds of a video, much less the first 15, [..]

Super useful online tools to work with images – Images are indeed a big part of a website, and as a developer or designer you often have to work with them. There’s also a bunch of super useful online tools to store, resize, and modify images online. Here’s a round up of the best tools available.

Help Your Website Sell More: 11 Overlooked Page Elements That Drive Online Sales – In this post we look at eleven often overlooked page elements that can be the secret heroes of your conversion success story. Forget these eleven, and you can forget about a website that really drives revenue.

Fixed Table of Contents Drop-Down Menu (jQuery Plugin) – a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style. I thought it was kinda cool, so I wrote my own script to create this functionality, [..]

Icon Designs In Websites: 12 Tips To Make The Most Of Them – Icons are commonly used these days in web. These play a good role in different websites by being a part of its design. Icon design is critical since it conveys some ..

CSS/HTML Tools and Resources Worth Checking Out – As always, my collection of recently discovered links, tools, resources and libraries keeps growing. To archive these for my own purposes, and to share them in bulk, here is a list of CSS, HTML, and related tools

15 Apps to Help You Compress Images Without Losing Quality – It’s a known fact that search engines place great importance on how fast is your website. That’s why webmasters work hard on optimizing the process of reducing the page size. The process includes multiple factors

Tomorrow’s web typetoday: The fine flourishof the ligature – I’m calling this series of posts ‘tomorrow’s web type today’ and I’m using each post’s heading to demonstrate a particular technique. First up, I want to talk about ligatures.

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

Know A.B.C of Photoshop – If you want to become a professional in using Photoshop you cannot became within a days you must know about the A.B.C of Photoshop. The basic information and know-how is essential for every profession to become master and [..]

How to choose colours for a branding project – No matter how big or small the brand, choosing the right colour means thinking hard about what a branding project needs to achieve.

The 4 Economic Reasons to Rebrand Your Business – How much can your company benefit from a timely rebranding and revitalization? When considering this question, one must keep in mind that rebranding does not necessarily address the wants and needs of the company [..]

15 Stunning Photoshop Text Effects – Photoshop’s text and layer tools can be used to create some really awesome effects. With Photoshop text effects you can make most designs stand out. In this post you’ll find some awesome photoshop text effect tutorials.

Understanding the Lingo: Typography Glossary – The art of typography is not always the easiest thing to understand. It almost has a language of its own. Understanding ascenders, descenders, ligatures, x-heights and stems will help you better make connections ..

25 Nice InDesign Tutorials for Inspiration – It also supports export to SWF and EPUB formats to create digital publications, and content suitable for tablet devices. In this post I will share with you an overview of Adobe InDesign Tutorial that will surely inspire you.

Embracing Negative Space in Your Designs: White Space Tips to Consider and Examples to Admire – Don’t be a pessimist and view your negative space designs as “half-​​empty”; the use of the white space itself can be much more effective than filling it with minutia.

Preparing Your Web Design for Print – When planning a print project you really have to take the medium, format and printing press in mind when putting together a project. It is also important to understand the differences in how color works, font embedding and other just ..

Quick Tip: How to Create Folded Text with Adobe Illustrator – Today we will learn how to create text that is located in different planes. One very interesting trick with the Bounding box will let us do it without using 3D modeling.

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

7 NEW Things to Do After You’ve Written a New Blog Post – I usually dedicate an hour to blog post promotion after each launch. And finally, all this new stuff can be tracked, including Google Currents, which plugs in directly to your existing Google Analytics account.

10 Blogging Tips for 2012 – With the explosion of social media sites and a whole range of blogging and content sharing platforms at your fingertips, you should take another look at your blog. Is it still serving its purpose, reaching your customers and making the most of available resources?

How to Generate Leads from Social Media – In case you hadn’t noticed, social media is big – and getting bigger all the time. What was once the domain of just a small number of people is now everyday currency in and outside of business.

How to Display Social Media Buttons – Effective display of social media buttons on your blog and website becomes more critical every day. This post includes several suggestions for displaying social buttons, as well as screen captures to illustrate various details.

Should Your Sidebar Be On The Left Or Right? – As you are probably aware, the vast majority of blogs place a sidebar on the right hand side of the page. Most forums don’t use a sidebar on thread pages but those who do tend to use a right hand sidebar as well.


How to Create a Drop Down List for Posts on WordPress – The following two options will allow you to create a drop down list for your posts. I went looking for a widget to do this but couldn’t find one. So the solutions below are somewhat manual in nature, but they still work.

What you Really Need to Know About WordPress & SEO – Most of what you read about SEO is overhyped and a complete waste of time. It’s based on people going way over the top, thinking they can follow a magic formula to get into bed with Google and preaching their thoughts [..]

Add Post Type Archive Links to Your Menu – In this tutorial I will show you how to produce a plugin that creates a meta-box on your Appearance -> Menu page which allows you to add post type archive links.

How to Create an Instant Image Gallery Plugin for WordPress – Learn how to create a simple, automatically generated image gallery plugin with thumbnail navigation for WordPress. The end result is a simple, attractive gallery with thumbnail navigation that is created automatically whenever you upload images to a post or page.

Are You Setting Up WordPress For SEO Success? –  I know WordPress can be challenging – but I hope this guide has helped give you a better understanding of its different functions, and how to resolve some common issues on your own.

WordPress Shortcodes: A Complete Guide – WordPress shortcodes were introduced in version 2.5 and since then have proved to be one of the most useful features. The average user acting as editor has the ability to publish dynamic content using macros, without the need for programming skills.

Search Engine Optimalization, Conversions, Analytics, etc.

How Google Creates a New Era for SEO – Google has been making substantial changes to its search engine algorithms. This has led many website owners to reconsider how they implement their SEO campaign.

Reduce your bounce rate – Reducing your website’s bounce rate is a great first step in improving its overall performance and conversion rate. First you need to analyse the bounce rates of the different traffic sources.

The Noob Guide to Link Building – Outlining a six-month link building action plan for your brand or client’s new web property. Even if the website isn’t brand spanking new, that’s fine, what I really mean is that this is the link building plan for the less savvy looking to do dive into off page optimization.

The Ties Between Emotional Design & SEO – Emotional design is an important part of the searcher experience from the very first to query to subsequent queries months later. Search engines do not have emotions…but searchers do.


How to Create Realistic, Vector Bubbles – His Majesty the Bubble! In this tutorial we will learn how to create realistic colorful bubbles. We’ll cover numerous techniques and build this illustrations step by step. Set aside a couple hours for this one!

Experimental Page Layout Inspired by Flipboard – Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive.

30 Very Useful Illustrator CS5 Tutorials – Tutorials can often be your greatest source of inspirationwhen trying to design that project you have been putting off. In this post, I have rounded up an amazing collection of high quality Adobe Illustrator cs5 Tutorials from around the web.

How to Create an Video Player in jQuery, HTML5 & CSS3 – In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality.

How to Use Textures in Your Designs the Right Way – Textures are a wonderful tool to use for all kinds of design. Not only can textures make something look more interesting, they also add a sense of material realism that people can connect to.

How to Create a Fast Hover Slideshow with CSS3 – Today I want to share a little hover slideshow with you. The main idea is to run a super-fast image slideshow on hover and show the current image when mousing out.

How To Build A Real-Time Commenting System – The Web has become increasingly interactive over the years with the next generation of applications driven by the real-time Web. Adding real-time functionality to an application can result in a more interactive and engaging user experience.

Building an E-mail Request Invite Form with jQuery – I hope this tutorial can give you some insight towards coding municipal jQuery functions. The e-mail validation is an important aspect to managing web forms – but with so many startups around invitation systems are hard to come by.

20 Fresh CSS3 Tutorials – In this post today, I would like to share with you some amazing and beautiful CSS3 tutorials for creating various web design elements and interactions.

Freelance, Business and Workflow Related Stuff

What Every Designer Should Know About Copyright – With the advent of the Internet it has become easier than ever to steal, copy, or pirate another’s work. Because of this, it is more important than ever to have increased copyright knowledge and protection. And, since designers work almost solely [..]

Get more clients by improving your “about me” page – I want to address the “about me” page – or “about us,” “bio,” or whatever you call your “about” page – because I’ve seen a lot of portfolios lately that include their about page as an afterthought and I think it’s a HUGE mistake.

The Pros and Cons of Being a Freelance Designer – We’ve all sat there at one point or another and dreamt about storming into the bosses office on a Monday morning and quiting our jobs or what we’d do if we had our own company or worked for ourselves, etc, ..

Posting a price list on your web site: does it work or fail? – When I first saw a web site designer who had posted a laundry list of prices on his site, I gasped in horror. It created some buzz in the design circles in which I traveled. No one agreed with the concept.

Your ‘Bad Client’ Might Be Your Fault: 3 Steps To Happy Clients – In this post I want to share with you some of the things that I do in my freelance business practices that I believe help me to not only steer clear of bad experiences with clients, but even give me ..

12 Great Advice for Aspiring Web Developers – We hope these advice will guide you to reach your dream, very important tips that we found from them is keep practice and have a ‘never give up’ attitude.

10 Commandments for Freelance Web Designers to Live By – If you are a freelance web designer, you know how difficult this lifestyle can be. From scheduling, to dealing with crazy clients, to managing your own work/life balance—there is a lot to juggle!

Taming The Wild Mind – Myths have developed around and researchers have studied how the human brain juggles creativity and organization. Popular theory tells us that the left brain is structured and logical, while the right brain is artistic and imaginative, and ..

7 Practical Ways to Gain Exposure as a Designer – New freelancers and students who are just coming out of school are often faced with the challenge of gaining exposure for their work. The exposure is often needed for securing new client projects, but it can also be needed to ..

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

Content as Conversation – Think of your website or app as replacing not file cabinets but phones. Whether you text or talk on your phone, you’re conversing. You interact with people. You help them achieve what they came for. Websites and apps are our modern equivalent of phones [..]

Principles of User Interface Design – “To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” – Paul Rand

Stop Punishing Customers for Using Your Products – Over the years, we have seen many businesses adopt a per-project or per-user pricing structure, which pushes customers to re-evaluate the value of the products they are using. Not only does this run the risk of losing customers, but it goes as far as punishing them for their loyalty.

In Flux – So, how will the retina change the shape of the web, and do we need to rush to update everything we’ve ever built? Of course not, part of building for the web is accepting that everything is in a constant state of flux—there isn’t enough time and money in the world to “fix” the internet every time a company releases a new technology.

- § -

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.