.. Your Daily Design Dosis

Tweet Parade (no.13 Mar 2014)

| Comments Off on Tweet Parade (no.13 Mar 2014)

.. stay up to date! Time for a new roundup with last week’s best tutorials and design articles! It’s all about HTML, CSS, PHP, responsive web design, branding, 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.

Next-gen CSS: How to use CSS filters, CSS shaders and CSS text effects pt1 – There are three main areas to watch with CSS; 3D effects and image filtering, text effects, and layout. 3D has already made an appearance with CSS3 3D transitions.

Creating CSS Animations Using Move.js – Move.js is a simple JavaScript library that creates CSS3 animations using simple functions. This tutorial explores the basics of Move.js, and provides a live demo of Move in action.

WTF, HTML and CSS? – Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.

An Introduction to HTML Imports – In this blog post, you’re going to learn how to use HTML imports in your projects. You’ll also learn how to combine HTML imports with the power of the <template> element to create dynamic web pages.

All you need to know about CSS Transitions – In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions.

How to get started with SVG – If you want to start using SVG, this article is for you. I’ll guide you through getting your SVG from Illustrator into HTML and then teach you to modify that image using CSS.

A Bit About SVG – SVGs are Scaleable Vector Graphics. Cool, but what does that mean? Well, to get back to Graphic Design Tools 201, there are raster graphics, and there are vector graphics.

PHP – Best Practises – There are a number of good practises that you should follow when developing web applications in PHP. Most of these are extremely easy to pick up and some of them will even apply to web application development in general.

CSS performance test: Flexbox v CSS Table – Fight! – I was always interested to know how the new Flexbox implementation compared (performance wise), given the same task, as a more established layout method such as display: table.

Responsive typography with Modular Scale – With the techniques of scalable type under our belt, we’re going to take a look at an open source sass design tool that takes the guesswork out of setting beautiful sizes for your design elements

Building HTML5 Context Menus – A lesser known feature of the HTML5 specification is context menus. In this blog post, you’re going to learn how to create your own context menus using the <menu> and <menuitem> elements.

Lazy Load Resources Based on Element Presence – Fans of AMD JavaScript will probably tell you that they love loading only what they need, when they need them. The following is an example of how I occasionally load resources based on DOM contents.

Review: WebCode – A Better Way to Make SVGs? – In traditional vector editing apps, it’s very hard to keep control of what is happening with your code ‘behind the wizard’s curtain’. Often what SHOULD be a simple SVG rectangle somehow gets converted to a more complicated PATH shape.

Using Data URIs to Speed Up Your Website – A data URI is a base64 encoded string that represents a file. Getting the contents of a file as a string means that you can directly embed the data within your HTML or CSS code.

Usability, UX, Responsive Web Design, Mobile, Performance, etc.

Gestural Control: The Good, the Bad, and the Ugly – Gestural control of our consumer electronics is now commonplace. We use gestures on phones and tablets, screens and laptops, games and special environments.

“Visual Inventory” – Of course, getting valuable—and, more importantly, actionable output from this kind of process is dependent upon both parties trusting each other enough to have honest communication.

Why don’t designers take Android seriously? – Right now, Android looks to me like the best vehicle for doing that at the largest scale, and I think designers are mistaken if they disregard its potential.

A Quick Introduction to Agile UX Design – Agile UX embraces the key principles of Agile software development, reframed in the context of design activities. Designers work in continuous collaboration with team members, integrating customer feedback and change with each iteration on the project.

Content-out Layout – We can move towards more sophisticated layouts tailored to the needs of our content, patterned with unique character, and perfectly suited to the nature of our ever-changing web.

Essential design tips for the mobile web – The ‘smartphone revolution’ is most definitely upon us and as such, mobile web design has exploded in recent years. I’ve come up with some top tips in order to give developers a starting point, with some things to be kept in mind before proceeding.

What Testing Won’t Tell You – As our research suggests, long—term usability testing can help us determine better ways to serve our users when they’re arguably at their most vulnerable: making the leap from novice to expert.

Responsive, Flexible-Height Sticky Footers in CSS – Of course, you could write JavaScript that detects the footer height and adjusts the CSS accordingly, but that’s neither clean nor performant. A CSS-only solution would be better.

Naming UI components in OOCSS – One of the biggest—if not the most common—complaints about OOCSS is its use of ‘insemantic classes’. Unfortunately, the idea that classes are semantic (in the HTML sense of the term) is something of a fallacy.

What is WAI-ARIA, what does it do for me, and what not? – So: Make WAI-ARIA one of your tools in your arsenal of tools for web development, but take its first rule to heart: Don’t use it unless you absolutely have to.

Srcset and sizes – Media-query-based responsive image source-picking is terrible because while most responsive designers have settled on varying a page’s layout based on one variable (viewport width), when dealing with responsive images, we’re really concerned with three variables

Mobile-first responsive design – We’ve been working on redesigning the GoSquared Blog for months, and we didn’t want to launch the new design without a thorough review of the processes we went through.

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

The Effect of Typography on User Experience & Conversions – “Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. It can do a lot of things.”

Designing for Changing Technology: Font Icons vs SVG – There are a few types of vector images that can help future-proof your site while catering to early adopters of new screen technologies.

25 Design and Development Tools, Analytics Solutions and More – I’ve listed the tools we used in the hope of saving you time and effort early on in your product development process.

How To Design A Great Search Box – With the search facility you are allowing the user to be independent of your website and this builds the trust factor, which is one of the most important functions of your site.

How to create a web design style guide – Style guides can increase understanding, encourage co-operation and boost maintainability. Strangely enough, style guides are anything but new, and we’re certainly not the first to use them.

Why You Must Learn To Optimize a Minimalist Landing Page – But how much is too much for today’s landing page? Let’s take a look at how businesses can marry clean and simple design with an effective landing page that still delivers.

Designing for Your Objectives – Whenever I’m working with a new client, the first question I ask them is what they want their website to do for them. Knowing what we need a website to achieve right from the start is crucially important to the entire project.

How To Crack The Code To An Intuitive Welcome Page – The Welcome Page can make or break your website – it is the first thing your visitors engage with whenever they visit your website, and it can determine if they stay and read more or close the window- without ever looking back.

Scrolling Animations: Examples, Tutorials and jQuery Plugins – Today we are bringing you a selection of examples of websites featuring scrolling animations, some tutorials and a list of jQuery plugins to help you achieve these effects.

50 essential freebies for web designers, April 2014 – This month’s huge new list of diverse elements for designers and developers includes some fantastic freebies for mobile, web and print work; it includes cool scripts, awesome fonts, great ideas, and must-see experiments.

HOW TO: set up a Shopify store to sell digital goods – Shopify is an all-in-one digital eCommerce solution for both web professionals, and creative people alike. If you think you’ve got something that the world needs to see, chances are you won’t need to signup for any other service, other than Shopify.

Flexible Grid Tools for Responsive Websites – Responsive website layouts are more reviving and refreshing and they also give life to your website design. Here is the complete collection for you of some flexible grid tools to help you.

20 Useful HTML5 Animation Tools – Recently, tons of Html5 animation tools were released, which allows you to design and create stunning animations that work particularly well with websites.

A Look Into: Internet Explorer 11 DevTools – But starting with Internet Explorer 11, the IE DevTools has finally got a facelift in its existing features as well as a few new functionalities. Let’s take a look at what it now has to offer.

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

5 Useful Photoshop Tips That Will Improve Your Workflow – Lately I’ve been thinking a lot about how to work smoother in Photoshop. In that thought process, I have come up with five things that really helped me over time to work faster and more efficient.

How to Find or Create Your Brand Personality – Once you determine your personality, it’s time to start designing around it. Create a set of visuals that show off that personality and style. The key visual elements are color, typography and imagery.

How to Make Your Business Stand Out from the Pack – Keep in mind that even though the Internet offers multiple avenues for marketing, digital marketing should not make up your entire marketing plan. Some tried and true offline methods still prove valuable.

Design Principles: Visual Perception And The Principles Of Gestalt – This is the start of a series of posts about design principles. It begins with these principles of gestalt, because many of the design principles we follow arise out of gestalt theory.

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

7 Essential LinkedIn Marketing Stats: When to Post, What to Post and How to Improve – Though the network isn’t analyzed in quite the same detail as Facebook and Twitter, there still exist several stats and tidbits that can help you improve your LinkedIn marketing and engage with your followers.

Why We’re Removing Comments on Copyblogger – Blog comments are an amazing resource for any blog when it’s getting started. It’s a super convenient way to take the pulse of your audience. It’s a quick metric for getting a sense of how strongly the audience responds to a particular post.

Best Tools to Measure and Track Your Influence – Tracking your influence on the Internet is a tricky business, but the fact that social media is so popular is actually a big help. Each item on the list does something slightly different, which is why the list is in no particular order.


SVG & WordPress Custom Fields – While tinkering around in the backend I discovered that you can add WordPress custom fields to SVG text elements that allow you to control text-based content from within your WordPress CMS

Installing WordPress Through Command Line – Another way to install WordPress is by using WP-CL. WP-CLI is a set of command lines for operating WordPress stuff. This includes install and update WordPress Core, as well as install and update plugins.

Unmasking “Free” Premium WordPress Plugin – Premium plugins may be really great and well worth their price, but not many webmasters are ready to pay for plugins, especially when they can find “free” or “nulled” versions of the same plugins on the Internet.

WordPress speed – How to reduce your load time to under 1 second – In this post, I’ll run through some very specific actions you can take to speed up your website. We’ll use our site as the benchmark and demonstrate how we reduced our page load time to under 1 second.

Search Engine Optimalization, Conversions, Analytics, etc.

5 SEO Tips for Small Businesses – The world of SEO is so large that, for small business owners, it can be really confusing when deciding where you should invest your time. Here are five SEO tips to help you start promoting your business.

5 SEO Techniques You Should Stop Using Immediately – Now and then, we need to be reminded what works and what doesn’t. As it stands today, there are five SEO techniques that I need to warn you about. These techniques could be hurting your site.


How To Code an HTML5/CSS3 Shopping Cart Webpage Layout – For this tutorial I put together a small agile eCommerce checkout page. The structure itself is centered and running a fixed width to ensure an even layout regardless of the web browser.

Build a responsive Javascript nav menu – As the industry explores RWD’s patterns and challenges, we need to examine how we write the JavaScript behind them.

3D Grid Effect – The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation.

Playing with CSS3 Animations – The topic we’re going to address is animating several HTML elements simultaneously and taking advantage of keyframe flexibility.

Creating off screen menus that transition into view using CSS3 – In this tutorial, we’re going to create some slide and push menus using CSS3 transitions. The menus will be hidden off screen at first, and will transition into view when the “toggle menu” button is pressed.

Freelance, Business and Workflow Related Stuff

The ultimate guide to freelancing – Regardless of the reasons, there are a lot of details that go into setting up a successful freelance business. And this guide will aim ot cover all of them.

Exciting Design Specialties to Broaden Your Skill Set – But what exactly should you focus your attention on when it comes to learning new skills? You probably want to pick skills to learn that have universal appeal and can be applied to many different types of client projects.

Marketing for Freelancers: 3 Tips to Find Clients for Web Design – So the market is strong, and the opportunity is great. Clearly, you have a market here. All that’s left is to connect with your potential clients and make an offer they can’t refuse.

44 Point Checklist to Use Before Quitting Your Day Job to Become a Freelance Web Designer – In this post I share a checklist of 44 questions to ask yourself before you decide to quit your day job.

The Secret Process of Writing Magnetic Design Briefs -Writing magnetic and effective design briefs is the difference between a successful project and one that stays in the construction phase way past schedule.

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

Beware of Feature Overload: A Case Study – The more choices we have, the less happy we are with the choices that we make. If we were to apply this concept to an application user experience, it just might be that the more options a product offers, the less satisfied users will be.

Why creative thinking is like leaving the Matrix – Back to Gonzo Design, and what it does. A form of method acting for designers, it asks you to throw yourself into the world you are designing, removing any sense of objectivity and creating around you, from the inside out.

A Modern Designer’s Canvas – I was going to talk about the tools and processes that I use when I’m designing. But being a good designer or developer is about so much more than knowing how to use tools. It’s also about the way we approach what we do and our attitude towards it.

– § –

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.