.. Your Daily Design Dosis

Tweet Parade (no.14-2015)


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

Faster Font Loading with Font Events – I’ve experienced FOIT on my website, particular on mobile connections, but with the help of some homework and fantastic resources, plus some JavaScript and CSS, I managed to fix it.

Using @font-face – The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

A Primer To Background Positioning In CSS – Applying background images to elements is probably one of the most used features in CSS, and many background properties exist that allow us to control different aspects of an element’s background.

Loading CSS without blocking render – This article demonstrates a technique to get content in front of visitors as quickly as possible by asynchronously downloading stylesheets to prevent them from blocking page render.

The SVG Canvas, Coordinate System, And Viewport – When you see SVG images on the screen you’re viewing only part of the canvas on which they’re drawn and you view the canvas through the SVG viewport.

Mind The Gap: Six Causes of Unwanted Spaces In Page Layouts – There are few problems more exasperating in front-end design than dealing with unexpected gaps in web page elements. To help, here’s a short list of the six most common causes for gaps, and their solutions

Switching from Grunt to Gulp – This article will not attempt to crown one king, or queen, over the other. Instead, we’ll explore a sample project started with Grunt since it is the most popular, and try to do the same thing in Gulp.

The Command Line for Web Design: Scaffolding New Projects – Use command line to get your projects off to a running start by scaffolding out new projects that have all the third party code they require, as well as Grunt or Gulp task management already setup, in just a matter moments.

R.I.P. REM, Viva CSS Reference Pixel! – If you are still using “rem” or “em” for accessibility purpose, stop using them immediately! They are completely counter intuitive and just introduce another level of abstraction that is no longer needed.

BEM 101 – Another smart part of BEM is that everything is a class and nothing is nested. That makes CSS specificity very flat and low, which is a good idea. It means you won’t end up fighting with yourself over specificity.

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

Don’t forget the low hanging fruit when onboarding users – You can go back to tweaking button colors, or you can try something new: help your customers be successful. Do that and you’ll find there’s low hanging fruit, and lots of it.

A Modern Approach to Improving Website Speed – If you haven’t done the things discussed in this guide, you will get guaranteed website speed improvements after performing the steps that I will be discussing.

User experience design is not what you think – User experience design is not the same thing as user interface design. The experience of users happens beyond the screen and in the gaps.

Merging Responsive Web Design Ideas for Desktop & Mobile – The merger of design trends for desktop and mobile screens has been underway for years, but only recently have designers had the tools necessary to create a seamless connection.

Responsive Design with Viewport Control – When it comes to implementing responsive design, css media queries seem to get all the attention. Although admittedly all the leg work is done with media queries, a site is not responsive without viewport control.

Playing With Flexbox and Quantity Queries – In about 80 lines of very generously spaced and commented CSS, we’ve got a flexible grid-based Flexbox layout with visual enhancements injected via quantity queries.

U.S. Smartphone Use in 2015 – The traditional notion of “going online” often evokes images of a desktop or laptop computer with a full complement of features, such as a large screen, mouse, keyboard, wires, and a dedicated high-speed connection.

Browser representatives on CSS performance – I hate that there are no simple, cast-iron rules in relation to CSS performance that can be banked upon in every situation. I’d genuinely love to write those rules out here in a nice little paragraph and believe they would be universally true.

10 ‘Tried And Tested’ Practices For Smooth Navigation On Mobile Websites – The touch system of smartphones needs friendly website navigation for better browsing. A single wrong touch can annoy the user and hence leads to website switching. Do you want that?

Webdesign in Common, Web Typography, Tools, etc.

A Lean Design Agency’s Tool Set – Together, these tools help us maintain our lean work flow and allow us to deliver quality work to growing startups, established companies, and everything in between.

What I’ve Learned at CSSConfAU 2015 – Each talk would deserve a blog post on its own, I just had to quickly write all this Sass stuff down before I forget it. I know it will be useful on my next few project(s).

Top 5 Principles for an improved Checkout Design – While a lot of the big websites provide impressive features like geo-targeting and validation of address, they don’t sort out the basic usability principles right, and they suffer greatly as a result.

Tips & Resources for Enhanced Checkout Forms – I’ve put together a few guidelines and free resources for enhanced checkout forms. These should prove useful on any website including responsive layouts. Checkout forms work – enhanced checkout forms work even better.

Boost Your Ecommerce SEO With a Few WordPress Tweaks – Everyone tries to optimize their sites, but it seems to be the simple things that help you improve overall and get over those one or two search engine spot hurdles you are yearning for.

10 Graphic & Web Design Tools That Will Explode in 2015 – Some of these tools are popular ones that you will likely find in every designer’s toolbox, while others are not so well known. In this article, we will take a look at 9 graphic and web design tools that are set to explode in 2015.

Mobile Ecommerce: Website Design & Planning – There are several basic principles that must be taken in consideration when designing for mobile, and in this article we will discuss and go through them.

Lost in Transition? Understanding some Basic Concepts of Animation – Several stunning examples of what’s possible in today’s dynamic web. The options for animations are truly astounding, and you’ll learn how to apply all of your favorite effects as well.

Living Style Guide Tools In-depth Overview – Living Style Guides are here to help us transform our Front-end codebase into well-described pattern libraries with minimal efforts. But to make them really efficient, we need to choose the proper tools, so let’s have a closer look on what community has prepared for us.

A Simple Guide To Start A/B Testing On Your Website – With some help from web tools and a little advice, you can quickly learn what changes to make and how to test them on your own website.

Creating a Killer Home Page That Reduces Bounce Rate – You can’t do business online just appealing to the people who are personally invested in you. Instead, you have to appeal to a broader audience, one that is interested in the subject matter of your site.

‘gonzolicious’ is a personal Tumblr blog Theme with a responsive layout and tons of powerful features, it’s a great premium theme for all kinds of blogs.

Get it here!

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

How to Create a Flat Grayscale Cityscape in Adobe Illustrator – Learn how to make trendy flat style houses with basic shapes, Pathfinder operations and the Shape Builder Tool, change color saturation and brightness in a few clicks with the Recolor Artwork function.

How to create an icon collection – I’m sharing with you our work process: researching, drafting, refining, optimizing… You will learn how to design an icon collection on a large scale. We’ve already created 800 icons, and we plan for at least 1500 icons.

Adobe Illustrator’s SVG Interactivity Panel Explained – We’re going to take a look at a tool in Adobe Illustrator which helps authoring of SVG interactivity with JavaScript. It’s called–wait for it–The SVG Interactivity Panel.

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

13 Types of Blog Headlines That Will Get You More TrafficOn average, only 20% of those who read your headline will click through to read your article. That means good headlines lose 80% of your audience. Great headlines, though, can make a dramatic impact in the opposite direction.

8 Super-Simple Tools You Can Use to Create Better Content – To help you thrive in this era of smart content, we share information about seven useful tools that can help you create more effective content and cut down on the time it takes to create it.


Change Your WordPress Database Name in 3 Simple Steps – Your WordPress database holds all of your site’s important information, so keeping it safe and organized isn’t something that should be neglected.

12 Not-So-Obvious WordPress Tweaks to Improve Posts and Pages – The list of what you can do to enhance your pages is truly endless because your imagination and coding prowess is the limit. You can accomplish a lot with built-in settings and plugins and if you want complete control.

Five Ways to Secure Your WordPress Plugins – Writing plugins for WordPress gives us so much freedom and flexibility on the platform and with this ability comes a responsibility to the community; a responsibility to develop secure plugins that the community can trust and use on their websites.

Introducing Cache Buddy: a companion for your WordPress page caching solution – But the existing page caching solutions all share the same downside: they can’t cache pages for logged-in WordPress users or users with WordPress comment cookies. Why not?

A Guide to Overriding Parent Theme Functions in Your Child Theme – You might think that functions would work in the same way: create a new function in your child theme’s functions.php file with the same name as one in the parent theme, and it’ll take precedence. Unfortunately it isn’t as simple as this.

Comprehensive Guide to Improving WordPress Speed – Speed optimization is a complicated topic, and an ongoing process. The six tips today are easy to implement, and can knock significant chunks of time off an unoptimized website.

How to Optimize Your WordPress Robots.txt for SEO – In this article, we will show you how to optimize your WordPress robots.txt for SEO and help you understand the importance of robots.txt file.

Managing Access to Plugins (So Clients Don’t Break Their Site!) – When building WordPress sites for clients we often rely on plugins to provide the core functionality of our product. If a client inadvertently deactivates a plugin, it could break the site, or at the very least severely impair its functionality.

WordPress Functionality Plugins – In the past couple of years there’s has been a movement of taking the functionality you’d normally put in the `functions.php` file moving it out into a “functionality plugin”.

Using CDNs, Compression, and Minification to Speed Up WordPress – In this second part of the series, we went through compression and minification of assets, and using a CDN in WordPress. In the next (and last) article, we’ll see the importance of image optimization.

WordPress Needs to Enforce Better Plugins – and Here’s How to Do It – Over the past couple of years I’ve defended WordPress heavily against criticism that it’s slow, unreliable, unsafe and contains sub-par code.

Multilingual WordPress Multisite Network – Multilingual Press lets you create relationships between sites in your Multisite network, set a main language for each site, and start writing. The content will then be updated in the appropriate language site in the network.

How to enable instant search in WordPress – Instant Search & Suggest is a plugin that speeds up the search process by calling up information from posts, pages, taxonomies, and custom post types on the fly.

Search Engine Optimalization, Conversions, Analytics, etc.

SEO 101: Getting Started in Local SEO (From Scratch) – Whether you’re a dentist, restaurant, or yoga studio, the only customers that matter for your business are people searching within your city, and because of that, you need to focus your SEO locally where it matters.

5 Tips to Write SEO Friendly Content that Ranks Well In Search Engines – Who else wants to rank well in search engines to increase their organic traffic? The most powerful way to increase your traffic is this: write SEO friendly content.

10 Practical Tips For Using Geo-Location To Reach Your Target Audience – Geotargeting is the practice of delivering content to a consumer — via mobile or web — using geographic location information about that individual.

21 SEO Techniques You Can Use Today to Get More Search Engine Traffic – “How do I find SEO strategies that actually work?” All you need to do is carve out a few minutes of your day and tackle one of the 21 white hat SEO techniques below.


Adding Appeal to Your Animations on the Web – Through the use of multiple animations, and particularly the animation-delay property, we’ve taken what could have been a very simple widget and made it more appealing.

Prism Effect Slider with Canvas – Today we’d like to show you how to build a simple slider with an interesting “prism” effect. The idea is to place a shape in front of the slider and “reflect” the images of each slide, in order to create the illusion of a prism.

15 Tutorials of CSS3 Hover Effects Free Download – The Hover effect adds flow to the site and enhances client encounter immediately. We trust you’ll discover our crisp and helpful CSS3 hover effects tutorials gathering valuable.

Yes, You Can Actually Make These Text Effects In CSS – We’ve put together a list of effects that are visually stunning and beautiful, all of which are made possible through CSS, and some of them with a little bit of Javascript as well.

Make a Mobile App with ReactJS in 30 Minutes – Reapp was recently released on React. It’s a mobile app platform designed for performance and productivity. Think of it as a well-optimized UI kit, along with a build system and a bunch of helpers that let you build apps easily.

Animating CSS-Only Hamburger Menu Icons – In the demos, we’ll create some neat animations for our icons, indicating that they are “active”, or that perhaps a menu is open. I’ll use a teeny little bit of JavaScript to make that happen.

Freelance, Business and Workflow Related Stuff

My secret to making steady money as a freelance designer – It’s really easy to fall into the same old routine as a freelance designer. You find a client. You work on a project. You get paid. And then you start all over again.

Starting a WordPress Web Design Business – Here 7 Things You Must Do – Aside from a lot of hard work, patience and dedication which are all needed for starting your WordPress web design business, here are the top 7 things you must do.

A (Proven) Freelancer’s Guide to Growing Your Business – The key to winning pitches and making potential clients want to work with you is showing them that you care about their specific business and have ideas for making it better.

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

Let Links Be Links – Developing an application for the web, therefore, is not as simple as developing for a native platform. Making sure it works the way we want it to in the five major browsers and pushing it out isn’t good enough for the web.

Are you a good designer? – They iterate, then iterate again. A good designer displays great passion for improving the user experience, and strives to optimise and find new ways of working. A good designer doesn’t just make things look pretty, they also make it work well!

Cynicism and Experience – One output of experience is an ever-increasing list of things that caused you pain in the past. Because you are not a monster, you want to save other people pain. When you see them doing things that caused you pain, you warn them.

The best interface is no interface: why we don’t always need An App for That – We moved way past “mundane” social issues and collectively propelled the technology field — where disruption and innovation have a proven track record of changing everyday lives — to giving the world what it really needs: more mobile apps.

– § –

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.14-2015)”
  1. Dank je wel voor je tips en inspirerende woorden over het Haagsche, Jan!
    Spreek je snel! Nogmaals, dank je wel! Groet, Fred