.. Your Daily Design Dosis

Tweet Parade (no.41-2015)

| Comments Off on Tweet Parade (no.41-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.

Top 3 Animation Features in Chrome Developer Tools – Animation when used right, brings lots of delight and usability to your experiences. Use the Chrome Developer Tools to yourself save time and focus more time on building awesome!

Easy content organisation with HTML5 – When it comes to using HTML5 structural elements to define page regions the semantic magic is done my the browser (mapping the elements to ARIA landmark roles).

How to Make Charts with SVG – To get the most out of SVG we need to take all of that code and place it directly into our markup. That way we can style the graph with CSS, control interactivity with JavaScript, and gain all the accessibility benefits of inline SVG.

PostCSS Quickstart Guide: Grunt Setup – By the end of this tutorial you’ll know how to setup a PostCSS + Grunt project with any selection of plugins you choose. Now you know how to use Gulp to use PostCSS with any plugins you choose.

Lose the jQuery Bloat ­— DOM Manipulation with NodeList.js – In recent years, jQuery has become the de-facto JavaScript library on the web. It irons out many cross-browser inconsistencies and adds a welcome layer of syntactic sugar to client-side scripting.

IndexedDB, WebSQL, LocalStorage – what blocks the DOM? – In my tests, I found that IndexedDB blocked the DOM significantly in Firefox and Chrome, and was slower than both LocalStorage and WebSQL for basic key-value insertions.

SVG and the DOM, or “The Weirdest Bug I’ve Ever Encountered” – Granted, we may not need a moratorium on web features – but we do need this kind of primitives to be fixed. It should be really simple to embed SVG graphics in our websites.

The Pros and Cons of Nesting Your Sass Code – Nesting can be a good way to organize your Sass code. It can also lead to specificity problems if you nest too deeply. I want to show you the good and bad of nesting.

Viewing Localhost Site On A Mobile Device – When you are developing you don’t want to be making changes then uploading to a server so you can view it on a mobile device. In this tutorial we are going to look at how you can view a localhost website on your mobile.

Understanding and Using rem Units in CSS – Today we increase the count by having an in-depth look at rem units, which have excellent browser support and a polyfill if you need support for old IE.

Checklist for your new Open Source JavaScript Project – You can use this checklist to quickly refresh your mind and remember each step that you need to do in order to create your next open source project.

Creating a CSS Sliding Background Effect – This technique takes the background of one element and slides it across the x-axis infinitely in a loop to create the effect of a never-ending and always moving background.

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

Dark Patterns: The Sinister Side of UX – The dark side of user experience isn’t something we like to talk about in the UX community. After all, UX is a force for good, right? Well, as it turns out, just like with superheroes, great power comes with great responsibility.

Getting Started in User Experience – First, I’ll explain what user experience is, then provide some resources for learning about user experience, and finally, share some insights on UX practice.

Best Practices & Examples of Excellent Responsive Design – In this article, we’ll explain best practices for responsive design, then deconstruct 4 outstanding examples.

Why Designers Think Users Are Lazy: 3 Human Behaviors – Device Inertia, momentum behavior, and selective attention are common behaviors that can make users seem slothful. However, interface design, is the true cause for these error-prone user paths.

Responsive Images for Busy People: Srcset & Sizes – We’re going to look at a single real-life example of efficient image scaling using the new srcset and sizes attributes. These should not be used for art direction – for this, you’ll want to use picture and source media.

Using Responsive Images (Now) – Ever since Ethan Marcotte started talking about responsive web design in 2010, developers and designers have been scrambling to find ways to deal with the issue of responsive images.

Why UX is becoming a thing – UX has not come into any final stage. Nor will it ever. It is a craft that will keep evolving. And this is pretty damn awesome. If you build it they will come. With great User Experience they will stay.

How to customize UX for mobileWith so many device types and sizes and so many different ways to design websites for those devices, the user experience a designer creates is what determines overall success of the site and whether a user will return.

Takeaways From Mobile Web Behavior – By looking at the ways in which users interact with websites on mobile, we will have a basis for learning that becomes mutually beneficial.

Bringing Relevant Content into your Design – It is a common practice to represent data and content as “Lorem ipsum,” repeating data, or simply using “best case scenario” data. In reality, this isn’t what will be experienced in the final product.

How to survive high-definition Web design – But while your users simply have to go out and buy an HD device to appreciate it, the designers have to put in a lot more work on their end. In this article, we’ll explain a few quick techniques to adapt your design process for a future in HD.

Responsive design mistakes—and how to fix them – Now, we usually wouldn’t recommend overthinking anything. But with design work, a meticulous thought process leads to great responsive designs.

Responsive Typography: A Quick Tutorial – Typography is not one-size-fits all, yet that’s often how we approach it on the web. We understand the value of responsive design but seldom do we design responsive typography.

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

Psychology Of Color To Improve Site Conversion – Color has the power to improve conversions by grabbing customers’ attention and triggering the right emotions for sales. Colors often define the public’s perception about your brand and what you stand for.

50 Free Resources for Web Designers from September 2015 – The sharing is what makes our community truly great! Here are this months 50 best free resources for web designers from September 2015.

Coding your Emails – So how hard can it be to build an HTML email? Well, with all the web browsers out there today, it’s harder than you may think. So there’s a challenge for web designers.

Color vs. Contrast — Which makes you click? – Do you know what rules our perception? It is contrast. I will not tell you “use colors in your designs,” but will show you why you should use contrasts in your designs to make people do what you need.

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

Branding Lessons from the Modern Marketing Era – These are just a few of the design lessons from the modern marketing era. If you’re a graphic designer, keep these tips in mind should you have to work on a rebranding project soon, as the advice could come in handy.

How to Design With Handwritten Typefaces: 8 Tips – This style can be tricky to use, though, and is not a fit-all solution. Today, we’ll look at eight ways to make the most of the handwritten typeface trend in your design projects.

Layers vs. Artboards: Comparing the Methods for Exporting Icon Packs – We are going to compare two essential Illustrator tools, the Layers panel and the Artboards one, and talk about the advantages of one over the other when dealing with the export process of an icon pack.

Why Handlettering is Not Type – Sure, type—even much digital type—begins life as letters created manually, by someone doodling, sketching, drawing or writing with a pencil, pen or brush on paper. But at that point there is no type.

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

6 Tips to Clean Up Your Twitter Account – A well-managed Twitter account improves your branding and helps you engage with your audience. In this article you’ll find six tips to clean up and revitalize your Twitter account.


How to Create a Network of WordPress Multisite Networks – Multisite is great and all, but if you really want to take WordPress to a whole ‘nother level installing a Multi-Network – or a network of networks – is what you want to do.

WordPress Security Checklist – Most of the time a website running WordPress is hacked the culprit is not WordPress, but of any silly misconfiguration that could be avoided during its development.

Common WordPress Theme Issues (And How To Fix Them) – Occasionally plugins and themes don’t get on or something needs a little tweak to get it working properly. These are the most common WordPress theme issues – and how to fix them.

4 Quick Ways to Lower Your WordPress Site’s Bounce Rate – It doesn’t matter how much traffic you attract, if your site isn’t optimized for usability it’ll count for next to nothing. Getting people to your site is only half of the challenge – getting them to engage is what truly matters.

Definitive Guide to Integrate MailChimp and WordPress – MailChimp is an email marketing and newsletter service functioning well. It helps the users to collect email addresses, store the email addresses and carry out an email marketing campaign.

A Guide To Using Icon Fonts In WordPress – Icons are vectors so you can scale them infinitely and a lot of icons can fit inside a tidy little package which consists of a single file, bringing down your request count considerably.

All You Need to Know About the New WordPress Site Icon API – This article will delve into Site Icons, beginning by defining what they are. Then, we will play with this brand new API, which is essentially composed of four functions and two filters.

How to Use WordPress Action Hooks in Theme Customization – We are allowed to include custom hooks in our themes and plugins to help other developers to easily adjust our code to their needs.

How & Where Should You Sell Your WordPress Themes? – The question is, how do you go about selling your WordPress themes? Should you go solo, start your own theme shop or club, or should you rely on marketplaces such as ThemeForest?

Brute Force Amplification Attacks Against WordPress XMLRPC – One of the hidden features of XML-RPC is that you can use the system.multicall method to execute multiple methods inside a single request.

Search Engine Optimalization, Conversions, Analytics, etc.

7 Low-Hanging Fruits that any SEO can Fix – The low-hanging fruits of SEO are easy to spot, easy to fix, and can make an instant impact on a website. Regardless of skills and regardless of experience, there are things you can do.


Best and useful jquery parallax scrolling tutorials 2015 – JQuery parallax scrolling websites are being popular day by day in the world of web design. These jquery tutorials are very well explained so that it can be easily understood by the users.

CSS Multi-Level Accordion Menu – Today’s resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements.

Freelance, Business and Workflow Related Stuff

Working on the Web Without the Frustrating Distractions – I have some tips that might guide those who have ventured into the land of endless online distractions. It’s a hard habit to break, but it can be done.

3 Client-getting principles that will never change – Here are 3 human-nature-based, client-getting principles you have to master to grow any business. And they’re worth mastering, because you’ll never not use them.

How to Create Predictable Revenue in Web Design – When you start to add value to your client’s business, that value will be reciprocated back to you. So when you help your client get predictable revenue, the same thing will be given to you.

Style Guide Driven Development: A How To Guide To Improve your Development Workflow – What’s interesting about SGDD is that it both provides a playground and a framework for development, isolated from the application’s implementation.

Providing Unique Value To Your Design Clients – This same kind of attitude – that the value you get from something is the most important thing, regardless of cost – is what we as designers want from our clients.

Designing at 1x – I began to explore solutions to work as effectively and quickly as possible after being fed up with bloated PSD files with more layer comps than I could count.

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

Your UI isn’t a Disney Movie – I have a problem with animation that serves only to get in the way of the end user. One of the clearest signs of a competent UI designer is restraint. It’s about knowing the capabilities of your chosen platform and then not using them.

Why Your Links Need a Hover Effect – Links contain text, but they should never look like text. When users read a web page, they need to be able to distinguish what’s clickable. If your links don’t have enough contrast, users could miss them.

Is a Designer a Storyteller? – Last year renowned Austrian graphic designer, Stefan Sagmeister, made a splash when he criticized what he saw as a growing trend towards creative people referring to themselves as ‘storytellers’. And pulled no punches.

– § –

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.