Tweet Heat – The hottest Tweets of the Month [Aug 2012]

Categories Articles, Web Design, Wordpress

This is a guest post by Jan Rajtoral (AKA Gonzo the Great), founder of gonzodesign, a Dutch design studio specialized in graphic and (responsive) web design. He also writes for the, where above anything else, his passion for writing, technology, communication and design drives him to contribute.

– § –

In this article we’re going to take a look what has been published this last month on the Blogosphere. We hand-picked a selection with the best Resources, Tutorials, Scripts/Snippet and WordPress related Articles for you.

All these design-related links have been mentioned on Twitter in the last month, and collected in this single article. So, I hope you’ll enjoy this roundup cause we think that having resources and staying up-to-date is important in your personal growth and development.


HTML, CSS, PhP, Coding & Resources

CSS styleguide

CSS Style Guides – Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure… it all makes up a complete CSS style guide.

Intro to CSS 3D transforms – Tutorial, examples, and discussion all about CSS 3D transforms. By David DeSandro

Handy PHP and MySQL Queries for Developers – Millions of websites and companies like Google, Facebook, Alcatel Lucent and Zappos are relying on MySQL. It runs on almost all major platforms including Mac OS, Windows, Linux and Solaris.

Responsive design and retina images: skating to where the puck will be –  Even if all displays aren’t high resolution in the future, enough of them will be that you won’t be able to ignore it, just as you can no longer ignore mobile design.

Where And How To Set Breakpoints In Media Queries – Flexible layouts work well to a point, but there comes a time when we need a more drastic change than simply allowing design elements to expand and contract. There comes a point where we need the ability to make larger changes in how elements flow within a design.

What’s the difference between adaptive and responsive web design? – In the world of web design, the only thing harder than keeping up with the ever-evolving standards in HTML, CSS, and other technologies, is keeping up with the vocabulary. Among the latest hot new terms in web design:Responsive Design and Adaptive Design.

Towards A Retina Web – With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards.

The Difference Between Information Architecture and UX Design – Even with regards to its definition, User Experience takes Information Architecture as its foundation and brings it to the next level.

10 Most Important Guidelines for Mobile Web Development –  All you need to have is a whole new perspective regarding designing of the mobile website. Today, in this article I am aiming to sum up the most important guidelines for mobile web development in a simpler way.

Separate Mobile Website Vs. Responsive Website -The two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Mitt Romney’s dedicated mobile website, and in the blue corner is incumbent Barack Obama’s responsive website.

High DPI Images for Variable Pixel Densities – One of the features of today’s complex device landscape is that there’s a very wide range of screen pixel densities available. Some devices feature very high resolution displays, while others straggle behind.

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.

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 ..

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.

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.

CSS Sprite Sheets: Best Practices, Tools and Helpful Applications – Using CSS sprites will improve your web pages’ performance and keep things more organized. Let’s take a look at some best practices and some helpful tools for your sprite-making workflow.

An Easy Guide To HSL Color In CSS3 – The CSS3 HSL color method is well-supported in modern browsers but somewhat neglected by coders, partly due to the fact that HSL is quite different from alternative CSS color models

HTML5 autofocus Attribute – HTML5 threw a whole bunch of awesomeness at us. Another simple functionality HTML now allows us is auto-focusing on elements upon page load; this is accomplished using the autofocus attribute.

Responsive HTML5 video – There are a couple of ways of approaching this, although none of them are perfect. The great debate about adaptive images continues, and is also appropriate here, as having something similar for both video and audio files would be ideal.

Master CSS pixels forRetina displays – Resolutions are increasing as screen sizes, in many places, shrink. Ultra-high pixel density displays, smartphones and tablets provide a new environment in which to foster fresh techniques.

Complex navigation patterns for responsive design –  I urge you: use mobile as an excuse to revisit your navigation. Look at your analytics. What are your experience’s key sections? Where are people spending most of their time?

Responsive Design case study – This post aims to outline the entire project processes and act as an informal case-study for the construction of a large-scale responsive website. The South Tees site contains over 1,000 pages and while Responsive Design is not a new technique, documented examples of client sites on this scale are few and far between.

10 Responsive Navigation Solutions and Tutorials – As responsive design rapidly increases in popularity, we felt we would take a look at some of the varied solutions and techniques that are being adopted for managing the navigation/menu on smaller screened devices.

The Ten Commandments of a Great Mobile User Experience – In order for us to design for mobile we need to understand the new fundamentals and principles of mobile design and have a strong contextual foundation before laying down the first pixel.

How To Write Code Comments Well – Code organization is a huge thing, especially for developers (because they deal with code), and often times it’s a philosophical debate as to how code should be documented, if spaces should be used instead of tabs, what kind ..



Flyout Image Slider

Flyout Image Slider Using jQuery & CSS3 – In this post I’m going to share about how to create an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack.

Creating and Using a Custom Icon Font –  They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can ..

Create a stunning menu in CSS3  – The navigation of a website is one of the most fundamental aspects to make or break a user’s experience. Instead of loading your menu down with individual images or sprites, why not do the entire thing in CSS3?

CSS Pie Timer – Even if there are several awesome tools outthere to manage pie charts (mostly with JavaScript), we could probably easily figure out how to do pie charts with CSS only, and even animate those with such a trick.

Create a Sliding Navigation Menu with jQuery – Having a sliding navigation menu helps users to find the important pages of your website in a cool way. It is important to keep your navigation menu simple and user-friendly while keeping it attractive.

Triple Panel Image Slider – In this tutorial we will create a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, we will slide in the respective next image in each panel.

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.

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.

Code an Awesome Hire Me Card With Your Gravatar – Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. A bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.

How to Build a CSS3 Sliding Menu – In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect.

Unfolding 3D Thumbnails Concept – A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.

How to Create an Interactive Graph using CSS3 & jQuery – In this tutorial we will code an Interactive Graph using jQuery (plotting plugin “Flot”) and CSS3. Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

Creating a CSS3 Responsive Menu – This tutorial aims to provide step by step instructions to enable you to create a responsive navigation menu that adapts to varying screen sizes, with the help of CSS media queries.

Multiple Area Charts with D3.js – In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.

Creating Slopy Elements with CSS3 – Web development guru Manoela Ilic shares a cool CSS3 tutorial on creating slopy, skewed elements for your design. It’s inspired by different designs that use angled shapes, diagonal lines and other non-straight elements.


Tools (web applications, bookmarklets, frameworks etc.)


FFFFALLBACK – Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

CSS with vertical rhythm – This tool will help you compute CSS that has a consistent vertical rhythm. – Baseline grids are super helpful for web designers, allowing us to maintain vertical rhythm on our designs. But short of a few Javascript bookmarklets, there isn’t really a simple way to get a baseline grid overlay on our designs.

Singularity – A grid system for Sass and Compass. The idea behind Singularity is to create a grid system that will work not only with uniform grids, but also grids built on modular scales.

normalize.css – Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

Tor – Tor is free software and an open network that helps you defend against a form of network surveillance that threatens personal freedom and privacy, confidential business activities and relationships, and state security known as traffic analysis

Golden Ratio Typography Calculator – Discover the perfect typography for your website by entering your current font size and content width, optimize your typography based on font size, line-height, width, and characters per line (CPL), ..

Plunk – An easy way to test clicks on a mobile phone. Wanna find out where your mobile users’ fingers land on your content? Or are they even plunking down on the right spot? Sometimes users feel like they’re bobbing for apples trying to click through a mobile site.

FitWeird – FitWeird helps you add breakpoints when things get weird. It’s about as dumb as it gets. Resize your window, it tells you dimensions in PX and EM. No on-screen rulers, no typing a URL.

Compare Ninja ~ Allows you to simply create beautiful HTML & CSS comparison tables on-the-fly without any prior knowledge. It uses intuitive and innovative user interfaces such as Drag & Drop, Inline Editing, Image Upload and more

HTML5 Boilerplate v4.0.0 – Helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100’s of developers, all in one little package.

Toast – A CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Easel – An in-browser, high-fidelity web design tool that lets you mockup, share and implement your ideas with ease. Easel was borne out of our frustration with the current state of design tools.

PonyDebugger – A remote debugging toolset for Native iOS Apps  that operates as a client library and gateway server combination using Chrome Developer Tools on a web browser to debug an application’s network traffic and data store.

Parallax Background Builder – Provides you the ability to quickly and easily build an amazing animated background with parallax effect for your site or specific components.


jQuery Plugins, Javascript, etc.

jQuery Zoom

jQuery Zoom – A plugin to enlarge images on mouseover or mousedown. To use zoom with img elements, they will need to be wrapped with another element.

Adaptor – A very cool 3D jQuery content slider, created and maintained by Phil Parsons.

Meny – A three dimensional and space efficient menu concept. CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.

JustGage – A handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independant and self-adjusting.

RoyalSlider – Meet the new version of most popular slider on CodeCanyon. Every slider template is responsive. Take a look at it in your mobile device or try to resize your browser to see the effect.

FormAccordion – A jQuery plugin for easily hiding and revealing related form fields conditionally.

PowerTip – PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips.

Chirp.js – Tweets on your website.

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.

Flex – A fluid asymmetrical animated grid plugin for jQuery.

ie7-js – IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

gridster.js – jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

jQuery Picture – A plugin for the framework, makes that very easy by automating the process. In order to activate it, just call the plugin’s function by targeting the image to be responsified and that’s all.

Handpicked jQuery Plugins Repository – A carefully selected roundup of some of the best jQuery Plugins ever released.  The aim of this repo is quality over quantity.

cdnjs – At CloudFlare, we believe that open source, community-driven projects like CDNJS are the tools upon which the future of the internet will be built. CloudFlare is proud to provide the global CDN infrastructure that will help power that future.

Automatic Conditional Retina Images – One line of JavaScript and a few mod_rewrite rules and we have no fuss Automatic Conditional Retina Images. No DOM crawling. No redundant requests? No problem, they just get the original image.

Zebra_Form –  PHP library that simplifies the process of creating and validating HTML forms. Its object-oriented structure promotes rapid HTML forms development and encourages developers to write clean and easily maintainable code

SVGeezy – A simple JavaScript plugin which detects SVG images on your website, and automatically “looks” for a standard image fallback for those older, less capable browsers. Those browsers need lovin’ too dawg.

oriDomi – JavaScript library for beautifully folding up any HTML element just like a paper. The library doesn’t depend on any JavaScript frameworks (but has optional support for jQuery) and uses CSS 3D transitions for creating the effect.

Prism  – A new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Sequence.js – A jQuery slider plugin with infinite style. Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

Piecon – Pie charts in your favicon! A tiny javascript library for dynamically generating progress pie charts in your favicons.

minwidth.js and relocate.js – One example is to move certain elements into a sidebar on wider windows or move the navigation from the footer into the header. Another example is asynchronously loading some JavaScript files in wide windows.

BigVideo.js – A  jQuery plugin for easily inserting fit-to-fill background videos to websites. It can play a video silently or can be used as a playlist to enable users to choose any item they prefer.

LucidJS – An event emitter library offering several unique features such as set events, emitter piping, DOM node Augmentation, sub events, along with the usual event triggering and binding. LucidJS emitters also feature meta events that allow listening for event binding and event triggering.

simpleWeather – A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

BinaryJS – A lightweight framework that utilizes websockets to send, stream, and pipe binary data bidirectionally between browser javascript and Node.js.

jsPlumb – jsPlumb allows you to connect elements on the screen using SVG, Canvas or VML, depending on the capabilities of the browser. It can be used with jQuery, MooTools or YUI3.

Tooltipster – A lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.


WordPress Related


WP Database Cleaner – WP Database Cleaner is a easy to use WordPress plugin that allow users to cleanup and optimize the WordPress database by removing all spam comments, trash comments, unused tags, post revisions, auto drafts, and much more.

Tips on Using JavaScript in WordPress – The use of JavaScript in WordPress is a bit of a grey area for some. More advanced users of course know that JavaScript can and is normally used in themes, child themes and template files.

Improving the Security of your WordPress Blog – Here’s a list of changes I have done to improve the security of my WordPress blogs though the perpetual worry that such a thing can happen again will remain.

WordPress File Permissions – Have you ever seen file permissions listed as 755 or 644? Do you realize how different and important those numbers are?

6 Questions To Ask Before You Install A WordPress Plugin – But there’s a downside to using WordPress plugins. Relying too much on plugins  can expose your site to an increasingly wide variety of risks. Let’s discuss the problem with plugins and things you should consider before installing one.

The 10 Things You Need to Know to Secure Your WordPress Site – Fortunately, the dev folks here at ManageWP take security very seriously, with everything fromsecure SSL login capability to two step authentication featuring in our our suite of ..

How to Get The Most Out of Your .htaccess File – Whether a beginner or pro, though, knowing what the htaccess file does and can do for you, can enhance a site’s performance, security and more.

WordPress Filesystem API: the right way to operate with local files –  It abstracts file manipulation functionality into a set of commonly requested methods so they can be used securely in different hosting environments.

The Ultimate Guide to WordPress Post Excerpts – In the theme, theme developers have access to the the_excerpt() template tag. If you have filled in the excerpt box, WP displays your custom excerpt (this is the a great way to write up a custom ‘teaser’ for long posts).

Underscores – A Starter Theme for WordPress. A theme meant for hacking so don’t use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That’s what I’m here for.

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.

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?

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.

The WordPress Security Checklist– The WordPress Security Checklist is the digest of our experiences securing our own WordPress sites. The goal of the checklist is to make it easy for you to secure your WordPress site.

Automate WordPress Installation and Development WorkFlow – Do you work on multiple sites at a time? Then no doubt you would love to improve your speed and your overall development workflow.

Fall of man? No! Fall of WordPress hackers? Yes! – WordPress team keeps on fixing security loopholes in the software and enhancing its functionality on the regular basis, and you can update the latest version by using the automatic update feature or ..

How to Include and Require Files and Templates in WordPress – In this article, we’ll survey the four ways that PHP offers to include files, guidelines for when to use each, and we’ll review WordPress’ features for including files.

Top 10 WordPress Security Myths – WordPress Security is about as sexy as cleaning your house. And as a serious blogger, you already know that securing your site properly is not a trivial task.

Automate WordPress Installation and Development WorkFlow – Do you work on multiple sites at a time? Then no doubt you would love to improve your speed and your overall development workflow.


.. and don’t forget these!

Twenty Twelve

Twenty Twelve – Twenty Twelve is an elegant, readable, and fully responsive theme that makes your site content look its best on any device.

10 Photoshop Quick Tips to Improve Your Workflow – we are bringing you 10 quick tips that will hopefully speed up some of those tedious Photoshop tasks. All of these tips are image-related, as working with images is not necessarily the favorite thing for ..

Font-a-bulous! A Beginner’s Guide to Making Your Own Fonts – Don’t worry if you’re not the most technologically-capable person in the world. This step-by-step tutorial will make everything quick, clear, and easy.

6 Tips for Estimating Price Quotes – For first time freelance web designers, nothing is more intimidating then when their first client asks, “Well, what will it cost?” We all imagine the hardest part of getting a gig will be finding the client, the proposal, or the project itself.

The importance of aesthetics in user experience design – The aesthetics problem in design exists not because UX precludes a focus on beauty. The problem is that not all UX people take the long and difficult road to convince clients and stakeholders of the very real business benefits of good aesthetics.

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.

10 Reasons Why Web Projects Fail – Today every project uses some sort of Content Management System framework. Instead of painting a canvas in the old days of HTML, we are building software applications that need to follow more traditional development approaches.

Passive Income Strategies For Web Designers – Finding ways to earn passive income is a growing concern among many freelance designers. I’ve always loved client work, but I have to admit that the pressure of juggling multiple bosses and constant ..

How to Prepare a Business Card for Print in Illustrator – In this article, I am going to walk you through the several steps you can do to prepare a business card for print. Although I focus on a business card here, these same tips can be applied to other printed pieces as well.


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.