.. Your Daily Design Dosis

Tweet Parade (no. 52 Dec 2012)

| Comments Off

Last roundup of the year, 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.

This is our last regular post in 2012! I would like to wish you loads of success, passion and health in 2013 and I hope we’ll meet again here on the gonzoblog.nl! Ciao Amigos, .. be good!

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

Dive into Flexbox – Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail.

CSS Masks – How To Use Masking In CSS Now – Today I want to talk about another WebKit-only feature and show you how you might be able to use it across all of the browsers: This is about…

6 Useful HTML5 Tools – The tools mentioned in this article can all be accessed via a desktop browser, and may be used on a desktop browser. Any specific browser version requirments are mentioned within each tool’s description.

Links for Advanced JavaScript Reading – Due to the lower traffic holiday week, and the fact that I’m busy with other stuff, this week’s posts will consist of reading lists and roundups. Today the focus is on some heavier JavaScript stuff.

10 Development Trends and Skills for Developers in 2013 – In order to reach the heights and stay ahead of other software developers, you must be aware and be ready for the skills and trends expected to rule the year 2013.

How To Deal With Vendor Prefixes – If you write CSS you almost surely need to be using vendor prefixes on some parts of the code you write in order to ensure the best browser support. So how do we author CSS so that we always are using the correct prefixes all the time?

Introducing the HTML5 Datalist Element – But what if we want the user to be free to enter what they please whilst at the same being given some suggestions? This is where datalist comes in.

Choose the right PHP framework – Frameworks provide a foundation where developers’ code can be neatly arranged. Documentation, common problems, solutions, tips and advice can be shared online in an open source fashion.

Getting to Know CSS3 Selectors: Other Pseudo-Classes – In this article, I’ll review the remaining pseudo-classes introduced in CSS3: the state-based, target, and negation pseudo-classes.

Creating Semantic 2-Column and 3-Column CSS Layouts – In this tutorial I want to look over a series of different CSS column layouts. We can see how to build websites using floats and direct positioning. There are new standards being written so frequently it can be difficult to gauge the best possible solution.

5 Use Cases for Icon Fonts – Icon fonts are great: You can CSS the crap out of them and they don’t mind, They look good on any display or resolution and There is only one HTTP request for any size set of icons. Let’s look at 5 typical uses cases for icon fonts.

Scrolling Performance – Scrolling doesn’t immediately seem like something you’d think about from a performance perspective. After all, your content is styled and all your assets are loading or loaded, so why all of a sudden might we care about what happens when you scroll?

CSS3 Flexbox enabled in nightlies & ready for testing! – This is the new CSS Flexbox model — using “display: flex”, as opposed to the older “display: -moz-box” model. Also, in the spirit of avoiding vendor prefixes for experimental features, we’ll be shipping this new flexbox implementation without a vendor prefix in development builds

File Upload Support on Mobile – After an hour of Googling we literally gave up and decided to find it out ourselves. The results are shared here to everyone for future reference.

Deploying New Image Formats on the Web – An average page is now over 1200kB in size and 60% of that is in images. With all the focus on performance and speed across the web performance industry, you would think that innovating on better image formats would be a top agenda item.

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

A Responsive Off-Canvas Menu – We need to embrace the viewport and do more than stack content vertically; one very long scroll is no better UX than a zoomed out, fixed-width format.

UX Is Not UI – UX has become a neologism. When something has “good UX” it is an implied meaning of having the core components of UX. That’s the true heart of the battle between UX and those who only want UI – or don’t know the difference.

The Year is 2012 and This is The Year in Responsive Design – Other than being the year of the apocalypse-that-never-happened, 2012 was also a big year for responsive design. Here’s some of the best the year had to offer.

Designing Sequences not Stills – Designing software based on a checklist of screens can blind designers to the overall customer experience. To understand any individual screen, you must understand the chain of events that led to a user going there… and you can map this out.

Choose The Best Responsive Email Layout For Your Message – When thinking about email, these patterns help designers understand the way subscribers are learning to interact and the way brands are working to create sustainable investments in the new approach.

10 Easy Things All Web Developers Should Do For Web Accessibility – If you don’t know anything about ARIA or web accessibility, but you still want to make it possible for all users to use your website?  We’ll explore ten easy things that all web developers should get used to doing.

The Top 5 Website UX Trends of 2012 – User interface techniques continued to evolve in 2012, often blurring the lines between design, usability, and technology in positive ways to create an overall experience that has been both useful and pleasurable.

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

Page Weight Matters – Many of us are fortunate to live in high bandwidth regions, but there are still large portions of the world that do not. By keeping your client side code small and lightweight, you can literally open your product up to new markets.

5 Overdone Design Trends – There are thousands of posts about how to keep content fresh but it is just as important to know what to stay away from to make your clients stand out among the sea of web templates.  Here are the design trends we never want to see again.

Five killer ways to use onboarding –  Building this functionality may be somewhat trivial, but actually getting users to do this without feeling overwhelmed or bailing out is a challenge. One process for achieving this is called Onboarding.

The best web and mobile fonts of 2012 are … – Web and mobile typography continued to boom in 2012, with more and more typefaces making their way directly to the browser. Just don’t use fake bolds and italics and we’ll all be fine.

Tips for a Clean and Minimal Online Store Design – A couple of tips for a clean online store design with some inspirational examples of minimal e-commerce sites. Here, we take a look at the trend, companies that are doing it well and tips for making it work for you.

All You Need to Know About XML Sitemaps – the XML Sitemap. What are the benefits of having one? Are there other types? How is an XML Sitemap created? Read on to find out..

60+ Best CSS3 and jQuery Tutorials for Your Interactive Business Websites – In this article, we’ll take a look at some of the excellent CSS3 and jQuery tutorials to help you create interactive website and enhance your business website.

Simple Tools for Front-End Developers – Continuing with the roundup and reading list theme this week, below is a list of tools that might be of interest to front-end developers.

Four Custom Icon Font Generators Compared – Icon fonts are all the rage right now. They make it so dang easy to embed vector graphics into a page that designers everywhere are turning to them as the primary way to handle icons.

Tips for Front End Unit Testing – This article will point you in the right direction to get started with unit testing JavaScript in the browser, and give you some tips to make sure it goes as smoothly as possible.

10 jQuery Timeline Plugins for Complete Time Control – Want to create your own timeline? Then try the following list of jQuery Timeline Plugins and add interactive timelines to your projects.

Best web design tools you should be using for 2013 – Here are some of the best web development tools introduced in 2012 that you should be using for 2013.

The best of 2012 for designers – We’ve gathered up the best of what was new over the past year in one place! We’re not including everything, but rather have put together a true “best of” compilation, with more than 100 entries!

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

Why Your Business Cards Go Unnoticed – Pull out your business cards and study them while you read through the following list. There’s a good possibility that the reason your business card is not performing well is due to one of the aspects below.

Science! - I tend to distinguish between these two broad objectives as designing for impact on the one hand, and designing for immersion on the other. What defines them is interruption. Impact needs an attention-grabbing interruption.

5 Design Tips Every Developer Should Know – Here are five traditional elements and principles of art and design that will cure the ugly (or at least disguise it).

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

10 Content Marketing Tips You Can Employ Now – Are you looking for content marketing ideas? Need some actionable tips you can put to use today? We asked 10 content marketing experts for their best content marketing tips.

11 Essential Tips to Writing the Ultimate Tutorial – Nothing beats a great tutorial for sharable, bookmarkable content. There’s a difference between just providing information and teaching someone how to put that information to use.

6 Warning Signs That Your Blog Is Deflating – Having analysed all the factors on my blog, I can pinpoint six key warning signs that you’ll need to pay close attention to if you want to spot the downturn early on.

10 Reasons Why Your Blog Sucks – Wondering why your blog’s not getting traffic? Put a poll on it and ask your readers if they think it sucks, and then ask them why. Chances are it will be at least one of the following ten reasons.


How to Add Rotating Testimonials in WordPress –  In this article, we will show you how you can create a rotating testimonials area in WordPress where testimonials fade in and out automatically. You can use this technique for other uses as well such as quotes, etc.

Using WordPress New Theme Customiser – The theme customiser was added in version 3.4 it allows developers to create a page where admin users can edit the style of the theme and see a preview of the changes in real time without changing the live site.

8 Ways to Hack and Improve Your WordPress Toolbar – There are actually a whole bunch of things you can do to improve its functionality, and today, I want to go through my favorites.

Backing Up WordPress? Don’t Make These 9 Mistakes – A good backup plan is your insurance policy on your WordPress site! Here I’ve compiled a list of the most common WordPress backup mistakes, and added a few tips on how to avoid them.

Pros and Cons of using WordPress Template Frameworks – In this article, we are going to understand what does it mean by WordPress template Framework and why did it come into existence. Later we will discuss about the Pros and Cons of WordPress Template Framework.

Setup your own Custom WordPress Theme Post Formats – WordPress users are not often familiar with custom post formats. These are different bits of information you may use to customize the content you publish on a blog.

How To Easily Create a Navigation Button That Doesn’t Link – When creating your navigation bar in the “menus” feature in WordPress, there are times when you don’t want a nav button to link. So how is this easily accomplished?

Backing Up WordPress – An Overview Of Available Options – You need to ensure you are performing a FULL backup before you do upgrades, as well as a database backup at frequent intervals between upgrades.

3 Ways To Style Specific Images in WordPress – Sometimes you don’t need to add any CSS code to your child theme in order to style a specific HTML element like an image in a post. No need to grab the selector or create a custom post or body class.

Search Engine Optimalization, Conversions, Analytics, etc.

The Problem of Duplicate Content and How to Solve it – But what exactly qualifies as duplicate content? Why does having duplicate content lead to problems and how can we avoid them? We’ll cover all that and more within this article.

Essential Tools for SEO – During this session we’ve had some rather technical articles about SEO, so it’s time for a short breather. We’ll do this by taking a look at some of the tools that are useful for search engine optimization.

Understanding How Visitors Flow Through Your Website Is Critical to Achieving Your Website Goals – Your website should be set up in such a way that you get your most important information on the web pages that are frequented the most.


CSS Card Tricks – Know any good card tricks? Hopefully, after today, you will! We’re going to build some simple and attractive playing cards with pure CSS, then we’ll learn how to target and animate each card for some added fun.

Create a Pinterest Feed jQuery Plugin Using AJAX & jQuery Isotope – In this tutorial we are going to create a jQuery plugin to display Pinterest feeds via AJAX from either a username or pinterest board and display them in a masonry style wall using jQuery Isotope.

Create an address book with PHP – How to use PHP and MongoDB to make an address book that’s flexible enough to keep different kinds of contacts in order. MongoDB is a document database designed for performance and scale while remaining easy for developers to use.

18 Effective CSS3 Pressable 3D Buttons To Make Your Website More Interactive – Here we are showcasing 18 truly amazing and excellent pressable 3D buttons with pure CSS3 for you to download for free.

Freelance, Business and Workflow Related Stuff

6 Tips for Dealing with Client Conflict – Handling business disputes is a delicate art. Do it the right way, and you will prove to your client that you’re attentive, dedicated, and capable – all traits he or she should find desirable for a continued relationship.

9 smart ways for designers to save money – Any time you choose an artistic career path, such as web design, you are in for a mix of triumphs and challenges. One of these challenges is bound to be financial

What Does It Take to Become a Freelancer? – If you’re reading this post, you may even be wondering whether freelancing is right for you. But what does it really take to become a freelancer?

5 Tips to Surviving as a Freelancer With Inconsistent Income – Still, with a little planning and organization, you can better your chances of weathering the thin times. Here are some ways to minimize at least this one worry in your life.

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

.. nothing, nada, njente?

- § -

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.