.. Your Daily Design Dosis

Tweet Parade (no.16-2015)

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

Thinking Outside the DOM: Concepts and Setup – In this first installment, I’ll introduce you to the problems of having a tightly coupled code and we’ll also walk through a real-world situation where we can apply the concepts discussed: the validation of a form.

Do you really understand CSS linear-gradients? – The function accepts an optional first argument which determines the angle of the gradient, which can be expressed either as an angle with a unit (deg, rad, grad, turn) or as a side-or-corner keyword.

You should understand CSS units – If this stuff is unknown to you, I recommend you start understanding CSS units. There are use cases for pixels, ems and rems and you should know them.

mix-blend-mode – The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.

Creating Color Schemes with LESS Color Functions – LESS provides a handful of functions which make defining and manipulating colors super easy. In this tutorial we are going to walk through a number of them, helping you control colors, produce better color pairings and keep them organized.

How To Prevent Your SVG Graphics From Deforming – The preserveAspectRatio attribute tells the browser how to display the canvas when the aspect ratio of the viewBox and viewport are different. If no viewBox has been created then there can’t be an aspect ratio conflict.

A Visual Guide to CSS3 Flexbox Properties – Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.

CSS Filters are awesome! – CSS Filters introduce a few useful effects and some image adjusting functions, namely blur, drop-shadow, contrast, brightness, and a few others which can be really useful if used properly.

Animating CSS Gradients, using only CSS – Now, there are plenty of workarounds out there, but usually they employ either SVG or JavaScript to go that extra 5 yards which CSS on it’s own falls short of.

More Control over Text Decoration – Most default browser styles include underlined links by way of text-decoration: underline; But you may not be aware that there is more you can do with this property, as well as various sub-properties offering more fine-grained control.

How to choose between rem and em – But how do you choose between rem or em? Time to go in depth on what these units do. First I’ll explain how each unit works and what they do. Based on that I’ll explain how you can make the decision for a sizing unit.

MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes – One possibility that combines these CSS properties is overlaying images, for before-and-after comparisons or to achieve other visual effects.

Link Types for Hyperlinks – In this guide, we’ll only cover the link types for hyperlinks. There are 12 link types that can be set on hyperlinks. What follows is a table of possible link types, and what each link type should point to.

Know your cascading stylesheets OR how should we organize CSS? – Try out different methods until you and your team members are satisfied. There are many ways to organize stylesheets, but none of them are going to solve all of our problems.

An inline-block intervention – What inline-block does is provide inline positioning of an element, much like a span, em, strong or a element, but also allows widths and dimensions to be applied to it. Great for transforming <a> elements into buttons (hmm?)

HTML vs Body in CSS – Hopefully this sheds some light on the key differences between the use of <html> and <body> in CSS. We could certainly draw more technical distinctions between the two, but the point here is to level-up our understanding to make better decisions when writing CSS.

Responsive Data Tables: A Comprehensive List of Solutions – In this article, I’ll go over and analyze many of these approaches. Keep in mind that I’ll be focused mostly on the JavaScript-based ones.

Cut and Copy Commands – Any text selected in the browser when one of these commands is executed will be cut or copied to the user’s clipboard. This lets you offer the user a simple way to select a portion of text and copy it to the clipboard.

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

Hamburger Menu: Handy Tool or Useless Icon? – The hamburger menu has been at the center of countless passionate debates. Do users even know what it means? And if they do recognize it, do they actually use it?

Measuring Performance – There are great paid products on the market that can keep track of a website’s performance, but there are plenty of websites and JavaScript APIs that can help you measure these metrics free of charge.

How To Sell Responsive Web Design To Your Clients – Responsive web design is not the wave of the future – it is a best practice today. If a site is not multi-device friendly, it is behind the times and in serious need of a redesign.

One-for-all Image Optimisation Theory – One of the challenges that often arises with speeding up load times is reducing image sizes without compramising quality. The conundrum of image size vs quality has been bothering me particularly since retina display arrived.

What is UX Design? – The role of the UX designer becomes crucial to the success of any design project. Now, what makes a good UX designer and what is UX design? In this post, I will attempt to answer these question.

Responsive Logos, Part 2: Making Logos Truly Responsive with Inline SVG – How logos can be adapted to better fit small screen constraints. This post shows how to efficiently implement responsive logos on the front-end, using the examples from part 1.

7 Mistakes That You Should Avoid In Mobile Friendly Web Design – The design of the mobile website is very important for the success, but the developers make a lot of common web design mistakes that can be avoided in order to make it successful among the users.

Progressive enhancement with handlers and enhancers – Recently I adopted a different way to manage bits of JavaScript in websites I was building. It exercises progressive enhancement (PE) by declaring handler and enhancer functions on HTML elements.

In UX, Less Isn’t Always More – There are no hard and fast rules in user experience design, so it’s important to keep an open mind. Frequently less is more and simpler is better, but in this case adding unnecessary steps actually improved the experience for our users.

How to write better tasks to improve your usability testing – Usability testing is easy and you’ll get valuable insights even if you’re doing it for the first time. You can do almost anything wrong – as long as you get your tasks right, your usability testing will always work.

More Weight Doesn’t Mean More Wait – At the root of this distinction is a performance metric that the web community has only recently begun to discuss and prioritize, known as perceived performance.

Webdesign in Common, Web Typography, Tools, etc.

How to Captivate Your Audiences with Motion – Motion communicates across disciplines. If we look at motion in neuroscience, dance and design, it’s just information displayed on different canvases: the brain, the stage or the screen, respectively.

How To Design Websites That Mirror How Our Eyes Work – The F-pattern is the go-to layout for text-heavy websites like news sites, blogs, or in-depth landing pages. Once we explain how and why it works, you’ll start to notice its use on popular sites all over the web.

Resist the Redesign – Isolated design decisions create a fragmented experience for the customer. Trying something new may be a fun experiment for the designer. But, little by little, these small inconsistencies chip away at the customers’ experience with your product or brand.

Design advice for developers – It can certainly be helpful to have some level of competency in both areas, but very rare is the person who has achieved a mastery of both development and design (i.e. could make a career out of either discipline).

How to correctly use punctuation – Anyone practicing an occupation for which written communication plays a recurring role should try to find the energy to hone their writing ability. In writing, punctuation exists for a reason.

11 Things You Might Not Know About jQuery – jQuery was released 9 years ago. Since then, the open source project has made an immeasurable impact in the world of web development. It’s fascinating to look into the origins of an open source project as big as jQuery.

Overview of SVG Animation in Web Design – The following article covers a large swath of SVG animation tips and resources for web designers. You’ll learn how SVG images are created and why they’re great for websites.

5 Helpful Screenshot Tools Every Developer Should Know – 5 awesome screenshot tools which will make your web projects more efficient and fun for everyone involved. With these tools annotations and browser shots are created directly on the web page.

10 of the Best HTML5 Tools Developers to Boost their Workflow – The best aspect about HTML5 tools is that they not only help developers in enhancing a website but also helps improve its usability, and most importantly, the accessibility.

An Introduction to Animation in Web Design – With most users on high-speed connections and the ease of creating anything from simple movements or a silly gif to several minutes of action, animations have become practical and useful web design tools.

Sass color basics: hue, saturation, lightness – While this article doesn’t contain any Sass code at all, its information is essential to effectively working with Sass’ color functions. Let’s talk about the RGB color model and the HSL “color cylinder”.

5 Reasons Why BPG Will Eventually Replace JPEG – There’s a new player in the image compression scene: BPG (Better Portable Graphics), a format based on a single video frame of the new HEVC video codec.

Five Typography Tips to Elevate Your Design – While inventive layouts and eye-popping visuals are the most common ways to make our hard work stand out, typography remains an often overlooked avenue to elevate our designs.

15 jQuery Plugins To Make Smart Sticky Elements – It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the sidebar.

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

The hidden glyphs in your fonts – Your favourite fonts might have glyphs that you don’t know are there, because your character viewer might simply not show them to you. This articles explains why that happens and what you can do about it.

Understanding Adobe Illustrator’s Grid System – Some functions and settings are usually overlooked by those who are just starting to grasp it, which is why I’m going to share with you something that I wish somebody had showed me when I first started out using it.

The Importance of Online Branding – What most people imagine as the outward face of branding is the attempt to remove the disconnection between a person or company’s brand and identity. Why is it important?

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

Don’t Make These Mistakes On Your Corporate Blog – You know you have to setup a blog for your business, but you don’t want to waste time and money by managing it the wrong way. A bad corporate blog is worse than not having one at all. Avoid these common mistakes on your corporate blog.

9 Social Media Rules You Should Break – That’s exactly what social media is – human engagement. So, just to give you some confidence and to hopefully expand your social influence, here are a few social media rules you just might want to break.


How to Hide Specific Pages in the WordPress Admin – If you’ve built a custom website using WordPress, perhaps you’ve created some pages like “Login” and so on. While this gives you the power to use WordPress template files, it also makes your system somewhat user-prone.

How much does a WordPress site really cost?You can download it for free, so WordPress sites should be really cheap, right? It should just take a couple of hours to build a website! Sounds familiar?

What to Expect in WordPress 4.2: Theme Switching and Emoji Everywhere – With the dust only now just starting to settle on that release, the core team is preparing to release WordPress 4.2. Let’s take a look at some of the progress that has been made since then and what we can expect from the final 4.2 release.!

Top WordPress design tips to make your site stand out – While the multitude of options is certainly a good thing, many designers are losing sight of the basics and are missing out on visitors because of design elements that are overly complex and unnecessary.

Building A Custom Archive Page For WordPress – Let’s build an archive page for WordPress that’s actually useful. The best part is that you will be able to use it with any modern WordPress theme installed on your website at the moment.

WordPress Security: Tried and True Tips to Secure WordPress – According to Forbes, about 30,000 sites across the web are hacked everyday. Not all of them are WordPress sites, mind you, but it does pose a huge problem.

WordPress Hooks, Actions, and Filters: What They Do and How They Work – Understanding hooks isn’t all that easy, partly because the terms themselves are rather tricky to visualize and distinguish from one another.

A beginner’s guide to the WordPress loop – In addition to being performed on most pages you see it offers tons of flexibility by allowing itself to be modified, and that quite extensively, if needed.

What is a WordPress Developer? – I’m trying to clarify what a developer actually is, the realities that go into building something custom for someone, and what to expect when you get into that field.

Search Engine Optimalization, Conversions, Analytics, etc.

Will Your Website Survive the Google Mobile Penalty? – You look at the calendar. It is April 21, 2015. You scratch your head and wonder if tomorrow is going to be same. Website and small business owners wake up one day to find the landscape drastically changed.

SEO 101: Using Google Analytics to Analyze Organic Traffic – In this post for beginners, Igoing to show you some ways to analyze organic search traffic using Google Analytics segments, dashboards, and reports.


CSS trick to reproduce glimpse on native scroll – One of the way I used recently to encourage users to scroll divs on horizontal scroller on mobile is to show an incomplete view of what is after, that is what in general is called “glimpse”.

Grid Item Animation Layout – Today we’d like to share a simple animated grid layout with you. The responsive layout has a sidebar and grid items that animate to a larger content area when clicked.

ScrollMagic Tutorial – Fullscreen Slideshow – In this ScrollMagic tutorial we’ll build a simple scrolling slideshow with a fullscreen sections. You’ll learn how to lock elements when they reach a certain point and get familiar with some terms.

Circular Fly-Out Navigation Menu – Circular menus break the generic UI pattern of horizontal navigations. I’ve built a circular fly-out menu component that nests neatly in a corner of the screen initially, and flies out along a quarter-circle spread-radius when activated.

How to Make Responsive, Scrollable Panels with Flexbox – These steps should be enough to get you started using this technique throughout your websites. Now that I know how to do it, I’m finding all kinds of places to put these scrollable panels.

Freelance, Business and Workflow Related Stuff

Finding and Using Your Own Design Voice – Your design voice – or design style, if you will – is how you choose to relay information to your audience. That sounds simple, but for the uninitiated, it can be incredibly confusing.

12 Tips on Pricing your Freelance Work – I have come up with some elements to consider when trying to decide what to charge for a website; so you, as the web developer, can be confident when you name your price, and the client can be sure about what they are getting for the price.

Thoughts About Choosing And Working on Priorities – You have to treat the things you say are priorities as the priority when you’re making decisions. If you always choose something else than what truly was the priority to you?

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

The billionaire’s typewriter – “I see Medium as the equiv­a­lent of a frozen pizza: not as whole­some as a meal you could make your­self, but for those with­out the time or mo­ti­va­tion to cook, a po­ten­tially bet­ter op­tion than just eat­ing peanut but­ter straight from the jar”.

Accessibility is not what you think – Accessibility is not just about meeting the needs of the disabled or catering for edge cases. Accessibility impacts everybody. I dislike the term accessibility. It is an accurate enough term. It just conjures up the wrong preconceptions.

The Golden Ratio: Design’s Biggest Myth – The golden ratio’s aesthetic bona fides are an urban legend, a myth, a design unicorn. Many designers don’t use it, and if they do, they vastly discount its importance. There’s also no science to really back it up.

The Next Big Thing In Design? Less Choice – And even more importantly, people can suffer real consequences from the well-documented phenomenon of decision fatigue: the more things we decide over the course of a day, the lesser ability we have to make effective decisions.

Fall of the Designer Part I: Fashionable Nonsense – I’m starting a new multi-part series: “Fall of the Designer.” This series will engage with the threats that face design practitioners and the industry at large, whether self-imposed or external.

Fall of the Designer Part II: Pixel Pushers – The most interesting phenomenon emerging from recent trends is not the silence of developers in the face of conflicting interests with operating system makers.

– § –

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.