.. Your Daily Design Dosis

Tweet parade (no.08 Feb 2013)


.. Yay, Saturday! Time for a new roundup 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.

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

HTML5 Details Tag – It allows you to add a title and content inside the tag, the content will be hidden until the user clicks on the title which will then display the content. Clicking the title works on a toggle so it will hide the content again. (BTW: not on FF)

Using White Space For Readability In HTML And CSS – How can we use white space in development code to ensure that our files are as readable and maintainable as possible? Well, we could consider a number of options, starting with some basics.

jQuery/HTML5 Input Focus and Cursor Positions – Here are some code snippets and examples of how to use jQuery & HTML5 to set cursor Input Focus and Cursor Positions which are common actions with login forms and such. Comments, improvements and suggestions welcomed.

Tips & Tricks In CSS 3D – Paradoxically, appreciation of the 3D portion of the CSS Transforms spec can also enhance the performance of 2D transitions and animations, as you’ll see in the next article. First, some underappreciated aspects of CSS 3D.

Using Flexbox: Mixing Old and New for the Best Browser Support – Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support.

Improving CSS text decorations – The possibilities to style, decorate and lay out text in HTML are just awesome! CSS has done an incredible job to make this possible. But if you are familiar with SVG you may still miss two very exciting features.

CSS3 Lifelike: A Slightly Different Box Model with {box-sizing:border-box} – Thanks to CSS3, we now have an alternative to consider: {box-sizing:border-box}. This model has lots of advantages, especially when it comes to flexible layouts.

An Introduction to CSS3 calc() Function – In this post, we will see how to utilize calc() in the stylesheet. As mentioned above, we can use calc() to determine lengths like width, height, margin, padding, font-size, etc.

HTML5 Server-Sent-Events: How To React On Server Requests With JavaScript – Now, with the newly introduced server sent event, part of HTML5, we can even react to requests from the server side without the need for a reload. This way we can keep page contents simultaneously updated.

A Primer to Front-end SVG Hacking – Using SVG (Scalable Vector Graphics) on websites is a lot safer than many front-end developers think. The standard is well supported in browsers today and perfect for resolution independence when CSS and icon fonts aren’t suitable.

Do you like, like Frameworks? – It’s no surprise then that despite the number of these easy-to-use tools and, as a result, increase in web designers that there is still only a small percentage of websites created today that are truly something to marvel at, especially when you consider the billions of websites that exist today.

Improve Your Code with Smart JavaScript Techniques and Patterns – In this article we’re going to cover some common, and not so common smart JavaScript techniques and patterns to improve your code in both size and beauty. To follow along with this tutorial it’s important that you have a good understanding of functional programming in JS and regular expressions.

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

Create a Mobile User Experience – Whether you build from scratch or look for some parts to get started, consider mobile as an important part of your overall design scheme. Think about how you want users to interact with your site and what actions they will take.

Mobile app vs mobile website design: Your four options – Do you need an app in the app store? Should that be native or hybrid? What is the difference between a web app and a responsive website? The world of mobile can seem incredibly confusing.

Native Mobile Apps are the New Flash – Today, there are only two pieces of functionality that necessitate a native app: camera access and push notifications. And the web is quickly working on filling both of these gaps. Once people begin realize this, native mobile apps will be the same as Flash. Useful for games, but not much else.

Mobile Considerations in User Experience Design: “Web or Native?” – The purpose of this chapter is to empower you, as a user experience designer, to understand your medium so that you can answer these questions informedly, starting by looking at what exactly we mean by an application being “native.”

What Is User Experience Strategy, Anyway? – While exact definitions are endlessly debatable, in this article I aim to articulate the meaning of user experience (UX) strategy as the design of products and services with a focus on the end user.

Dos and don’ts of cross-platform mobile design – The fundamental differences between the user expectations of today’s most popular mobile platforms, and illustrates how developers can build cross-platform applications without neglecting the user experience

Responsive Design vs. Mobile Sites vs. Native Mobile Apps: Which One’s the Best? – This is why, thinking properly before you choose to build a site for smaller devices, for your company is important. Here you will also have a few different options. These three options are ..

Responsive Web Design: Advantages To Gain And Challenges To Face! – Stats reveal that the mobile-based website hits were 7.12% in August 2011 and the count rose to 11.78% in August 2012. What does it mean? The future would be of Smartphones and most of the internet searches would be made through mobile phones.

How To Sell Your UX Design Solution To Clients – How do you convince clients to trust you with their valuable and much-loved product? In my experience, the best way to sell work to clients is to apply user-centered design not only to the work we produce, but also to the clients who commission that work.

Don’t Design for Mobile – Instead of imagining how to build a separate mobile site, starting thinking about how your full website experience can translate across multiple devices through a responsive website that can adapt and respond to each context.

A new responsive design process – With the rise of responsive design, we are finally embracing our medium as it was meant to be: fluid. Gone are the days of static mock-ups and web designers who don’t understand code. It is time for a responsive process.

CSS frameworks and semantics – It’s our responsibility as web developers to keep standards alive. We shouldn’t let convenience and speed get in the way of well structured, semantic HTML.

RWD: just getting started – We’re only just getting started using this technique, and I see a lot of potential to develop it in future to suit our needs and those of our visitors. But only when we overcome our current reliance on JavaScript can we evolve web standards to build sites that better adapt to users’ needs.

Responsive Web Design: Real User Testing – The aim of this type of testing is to determine whether real users are able to successfully use the product as required. In this case, the product is your website or web application.

Mobile Web Design Tips – With such trend among the users, it is really impossible to ignore mobile web design. Hence to sustain in the business world, you need to accept this trend and device your own mobile web strategies.

How Do Users Really Hold Mobile Devices? – How do people actually carry and hold their mobile devices? These devices are not like computers that sit on people’s tables or desks. Instead, people can use mobile devices when they’re standing, walking, riding a bus, or doing just about anything.

Integrating content marketing strategies and mobile design – The truth is that great content does not have to be sacrificed for mobile design and can even be enhanced by the capabilities of new devices. A properly integrated responsive design and content marketing strategy should produce a phenomenal user experience for visitors to your client’s website.

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

10 Must-Know Tips to Prepare Images for the Web – 10 Must-Know Tips to Prepare Images for the Web | Following our guide to producing print-ready images, here we take a look at preparing imagery in Photoshop for accurate display and presentation on the web.

11 Ways to Make Your Portfolio Friendlier – In this article, I will explain some of the most common frustrations that I have with online portfolios and will give you some tips to help make your portfolio friendlier to people that hire artists.

The Essentials of Web Design That Works – Our sites are created for human interaction. And we human beings — for all our splendiferous variety — share some universal behaviors, no matter where we’re from. Here are a handful of essentials for designing websites that humans want to read …

Designing For The Reading Experience – People visit websites and applications because they primarily seek information. I love typographically creative headlines and decks that grab my attention — but at the same time, we can’t neglect the need for overall balance and legibility in body copy.

Seven dirty secrets of data visualisation – We’ll lead you through some of the dirty secrets of the information visualisation (infovis) profession, offering an inside look at the process of visualisation development, along with practical tools and approaches for dealing with its inevitable challenges and frustrations.

Design Your Website for How People Read – By learning more about how people read and look at websites, designers can make smarter decisions about placement of elements, size, color and overall aesthetic. And it could result in more clicks and interactivity between users and site content.

Magazine design principles applied to web design – A lot of principles of magazine design and layout are easily transferred to the world of web design. Some of these are pretty obvious, while you may have overlooked others.

16 Tips for a Better Website – Many website owners think a better website means a complete overhaul – a brand new website. In some cases that may be true, but in my experience a couple tweaks can make the difference between bland and beautiful.

Maintain Consistency With a Website Style Guide – Creating style guides is fast becoming common practise for web designers, especially when dealing with content heavy sites. With a website style guide, designers are able to set and maintain a look and feel by creating a set of rules which the design follows.

Web Design Wednesday — Navigating the Web with Parallax Scrolling – An interesting innovation that’s being used today by web designers is the Parallax Scrolling. This type of navigation has given rise to different creative websites and shows other innovative ways we can present information on the web.

Are we optimizing our images like cavemen? – Years from now, developers will look back on how we use images today and have a good laugh at our expense. How we handle images now is the equivalent of caveman drilling holes in skulls to release demons.

Essential Online Web Development Tools – Many online web development tools exist and make web development an achievable exercise.This article gives you some of the top web development tools you can use online. These tools are in three sections: misc., CSS, image optimization and JavaScript.

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

How To Create Balance In Design – Graphic design varies significantly in its quality. Some graphic designers are absolutely astounding and can create amazing works, whereas some people involved in design are graphic designers by name alone.

Create a modular grid system in Illustrator – Grids can act as an aid to achieve ordered structure within your design. In this tutorial I’ll talk you through my personal approach to applying a modular grid system within Illustrator, working with simple geometric elements in a poster design.

How to Create a Cool Watch in Illustrator – In this tutorial you will learn how to create a very realistic and detailed watch using simple tools and techniques like the Pathfinder, Blend, Clipping Mask, etc. in Adobe Illustrator.

The biggest mistakes logo designers make – The art of logo design is littered with pitfalls. We reveal the biggest mistakes to avoid, in order to guide your design to logo glory. Here we’ve provided a run-down of the most common 10 to avoid…

5 Keys of Successful Logo Design – Creating a successful logo can influence the overall success of your brand. Whether you are a logo designer yourself or if you are looking to hire a designer to create your logo, it is important to understand the qualities of a great logo.

What Makes a Good Magazine Layout? The Bottom Line – Planning is key, and when it comes to designing a magazine the planning usually involves some kind of grid work. ‘Grids’ being the wireframe of your layout, these help the consistency of your design and general aesthetic.

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

Why No One Cares About Your Blog and What You Can Do About It – The Internet is littered with blogs that no one cares about. Here are five reasons why your blog might not be getting the care and attention you think it deserves.

How Google’s PageRank Algorithm Screwed the Online Writer (and What They Did to Fix It) – Here’s the thing, good content writers got squeezed out during the early days of Google’s PageRank algorithm. The importance was placed on the page, which created a nasty race to the bottom as far as writer’s value was concerned.

Perfect your online content – A robust strategy for managing content is a must for web development projects. Managing content is a problem every web developer faces. In the not-so-distant past, our agency received material from clients in formats ranging from scans of crayon drawings to never-ending Word documents

13 Mistakes to Avoid When Writing for the Web – When writing for the web, there is a considerable amount of thought and structure that will need to go into each of your writing projects. Because of this, sometimes simple key technical and SEO factors of your posts can get overlooked.


How to make jQuery ajax (JSON) requests in WordPress – Making jQuery ajax calls in WordPress to return JSON data to your client-side Javascript is an invaluable application that is only going to become more popular in the next few years.

Performance, Varnish Cache, WordPress – Varnish isn’t plug-and-play. It comes with its own configuration language. This config file tells Varnish how to handle all requests and caching. Basically you want to avoid caching the admin area and requests where a user has comments pending.

WordPress Extensions for Sublime Text 2 – One of the most useful features of Sublime Text 2 is its support for extensions/plugins, that get even more out of the editor. In this short post we have highlighted 10 extensions that will help when developing with everybodies favorite CMS, WordPress.

Useful WordPress Utility Functions – In this article we are going to look at some of the utility functions that you can take advantage of if your website is built using WordPress. If you have a look at some of these functions you will understand how you can use WordPress not just for a simple blog, not just for a CMS but for an application framework.

14 CDN Providers to Make WordPress Blazing Fast – In this article, I shall be taking a look at various CDN options available for WordPress users and making some recommendations at the end. However, before going any further, let us first take a look at the advantages of using a CDN.

How to Create a WordPress Avatar Management Plugin from Scratch: Getting Started – Enhance your WordPress website by letting your users choose between using Gravatar or a self-hosted avatar image right from their profile screen.

Plugins and Websites to Help Backup Your WordPress Website – Backing up your wordpress website everyday is very important, but be safe use both a plugin and also a payed service plugins don’t always do the job right. A list of plugins and websites to help get you started.

Tips and Tricks of WordPress as Business Perspective – Now, you can get stimulations and ideas from these excellent tutorials related to WordPress exclusively made for business prospective and you can show them to others to aid them as well.

WordPress snippets, hacks and tips to enhance your comments section – Comments are a very important aspect of a blog because it is where the readers interact with the blogger. In today’s article, I’m showing you lots of WordPress snippets, hacks and tips to enhance your blog comments section.

Design a Multi-??Page Form in WordPress: Introduction – I will walk you through the process of creating multiple page forms from scratch. Believe it or not, it’s fairly straightforward if you understand some basic PHP and know your HTML form basics.

How To Improve And Refine Your WordPress Theme Development Process – I’ve asked some of the top theme designers and developers to share some tips and techniques to help you improve and refine your theme development and design process.

Search Engine Optimalization, Conversions, Analytics, etc.

Nofollow vs Dofollow: Both Are Good; But Where? – You might have little idea that dofollow are good for gaining an excellent pagerank but never tried to know that what is the difference actually. Here I am going to explain nofollow vs dofollow in detail.

Top 10 SEO Tips to Reach the Top of the Search Engines – Are you looking to reach the top ranks in search engine listings? Follow the tips below and become a major player in the world of SEO.

A Web Designer’s SEO Checklist (Including Portable Formats) – There are many factors which need to be influenced to optimize a website for search engines. After a while you might not see the woods for the trees. To help you bring some order to this chaos, we’ve compiled an SEO checklist.

How to speed up your website load times – This article will teach you how to make your website load faster than you ever thought possible. Google now considers page speed a major consideration for search engine rankings; 75% of internet users agreed that they would not return to a website if it did not load within 4 seconds.

How do mobile and desktop SEO differ, and how can you improve rankings? – But despite the increases in traffic and paid search spend, we’ve seen evidence that show brands aren’t fully aware of how to optimise pages for mobile search. This is the first in a series of posts that will examine the intricacies of mobile search in more depth…


Neat Table of Contents with Jquery and CSS3 – In this article we will create a nice little Table of Contents with bit of jQuery and CSS3. Div element stays fixed on the left or right side of the page for easy navigation of the page, it can be expended and collapsed easily by a reader.

Adding Motion into Web Design with Animate.css – Lots of frontend web developers have been getting interested in dynamic interfaces using motion effects. This is all too common with many advancements within popular JavaScript libraries. But there has also been a lot of interest in CSS3 animated effects.

Create an Absolute Basic Mobile CSS Responsive Navigation Menu – In this tutorial we will go over the process in coding a very basic CSS responsive navigation menu. We will transform a basic non-list style navigation to a drop down menu using media queries in our stylesheet. There’s no need for javascript in this tutorial.

Freelance, Business and Workflow Related Stuff

15 ways to stop deadline stress kicking your ass! – It’s heading towards the end of the day and you’re not even close to finishing that all important project for that all important client. The pressure is on. The clock is ticking. Feel like panicking? Don’t. Simply read these 15 tips …

How to Find Freelance Clients on Twitter – In this article, I show you how to pro-actively use Twitter as a marketing tool, both to search out freelance gigs and to reach out to contacts who could become clients.

Increasing profits in your freelance business – I began by determining which of our projects were unprofitable. Projects for clients who signed long term contracts with us were definitely profitable since they paid a constant rate which covered all expenses for their projects.

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

A question of style – I’m a big fan of design principles for many reasons, not least of which is they way they can help to quickly resolve debates and arguments. They become a kind of higher authority to appeal to, taking opinion and ego out of the equation.

5 Principles of Creativity – The good news is that, while we can’t all be a Picasso or a Mozart, there are some simple principles we can follow that will enhance our ability originate ideas that are truly new and important.

Good work isn’t enough – People who have positive attitudes want to learn. People with great technical skills and lousy attitudes may find themselves combing through LinkedIn before they know it.

A Mild Case Of Borderitis – The website uses boxes and borders to structure content, there are areas of the site where all the boxes and borders converge, forming areas of border overkill. Yes, grouping related items together is good to show hierarchy and relationships, but sometimes you get carried away.

Please stop using Twitter Bootstrap – Twitter Bootstrap is great for developers; all of the pieces are nicely laid out for you, use a consistent design language, and piece together like Lego. No design sense needed and no creativity involved.

- § -

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.


on this article: “Tweet parade (no.08 Feb 2013)”
  1. Oh, what a parade! Thanks for this compilation, Gonzo the Great! Would be great to hear your opinion on a responsive design tool called Froont we are developing! We are launching a private beta to signed up users and you can sign up at http://www.froont.com, or ask me for an invite directly.

    • Hi Anna,

      sorry for my late reply, it’s one big madhouse here right now .. deadlines everywhere! Anyhowz, I just signed up at froont, .. looks quite promissing! Maybe when you guys will be out of Beta, you would like to write a guest post about Froont? It’s just a thought ;-P

      Enjoy your day and thanks for your comment, Cheers & Ciao!