.. Your Daily Design Dosis

Tweet Parade (no.10 Mar 2015)

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

Rethinking Your Sass Variables – Using variables in Sass or any other preprocessor makes it easier to populate your stylesheets easily without having to remember the exact hexadecimal code for the Facebook blue 261 times.

Understanding Sass Units – But given how often I notice confusion and misconception about the way units work in our beloved preprocessor, I thought a full length article would not be such a bad idea after all.

HTML5 Structural Elements—Non-Sectioning Elements – Today I want to look at three more new elements, main, header, and footer. All three are non-sectioning elements. When used, they don’t create a new section in the non-supported HTML5 document outline.

Quantity Queries for CSS – This is your guide to creating style breakpoints for quantities of HTML elements, much as you already do with @media queries for viewport dimensions. In this article, I will be outlining a technique to make CSS quantity-aware using specially formed selectors.

Keeping the Front-End Modular with BEM – While the specific syntax may not be for everyone, BEM is undoubtedly an effective way to organize your front-end. Even if you don’t like the syntax, I’d encourage you to try BEM out anyway and tweak it to your liking.

Side Effects in CSS – If you’re trying to assess a new CSS methodology or framework, or you’re wanting to develop your own, I urge you to make code predictability one of, if not the highest priority. So many methodologies try to sell you on niceties and false comforts like minimal markup or readable class naming systems.

I like how percentage background-position works – By default, background-position is 0 0, the top left corner. Now imagine you set it to 50% 0. That background image is now center top. It figures out the size of that image, and positions the center of it at the center of the element.

Media Query Sass Mixin – With modern front-end development it’s very important to create a responsive design for your websites. You can do this using media queries, they allow you to define certain style for a specific screensize or range of screensizes.

Creating responsive, touch-friendly carousels with Flickity – On top of user-unfriendliness, most carousels plugins have plenty of developer-unfriendly pain points. Because they are configured with JavaScript, it’s often difficult to change the configuration for other breakpoints.

Improve Your Website’s Discoverability with Semantic Markup – By building meaning into our singular piece of content with open graph, Twitter cards, and microdata, we have improved the chance that our target audience will discover it and share it.

Caching SVG Sprite in localStorage – About using the locally defined (inlined) SVG graphics. Note that I use <symbol> when defining SVG. This means it is enough to set viewbox once instead of doing this on every SVG insertion.

Sass Basics: Operators – Sass is quite popular and tends to be an essential tool for every front-end developer. In this article, we’ll continue exploring Sass by diving into its operations.

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

Responsive Email Layouts for Gmail App – Email HTML frustrates many web designers and developers because quirks are larger and standards are fewer than standard HTML. The headaches compound when trying to create responsive emails that are not single column and fluid.

How to Design for Web Accessibility Standards – I’ve been doing a lot of research, and I’d like to share what I’ve found with others new to designing for web accessibility standards. Here’s the first thing to keep in mind: Web accessibility isn’t just about designing for the blind or visually impaired.

How to Use the Best UI Design Patterns – For many, UI design patterns can be difficult to implement correctly since the concept is so simple: collections of patterns that are aesthetically pleasing and functional.

The Digital Age of Micro UX Designing – Macro UX is no longer a guarantor of great product design. Working with the traditional approach of analyzing user needs and developing a formal strategy is, in a way, old-fashioned.

HTTP2 for front-end web developers – HTTP2 is almost here, it’s based on SPDY, and it makes everything much more efficient. It also means that all of those HTTP1 performance techniques are harmful. They will make a HTTP2 website slower, not faster – don’t use them

CSS animations performance: the untold story – After recording the video, I did some more tests that showed that one of the biggest contributors to the slowdowns in the pure CSS version was the fact that multiple elements had to be nested in order to accomplish the independent transform component controls

Design Details: Tumblr for iOS – I think Tumblr is one of the coolest apps in the world right now with world-class design and an extremely polished end-product. The Tumblr website is a beautiful thing in and of itself, so be sure to check that out if you’re looking for web design inspiration.

15 Best Practices for Responsible Responsive Web Design – Responsive web design is not just a matter of squeezing and stretching. It’s about delivering one website countless ways depending on the width of the screen. It truly takes an expert to responsively code a website.

Designing Pattern Flexibility – When discussing a pattern-based design workflow, one knee-jerk reaction I hear from visual designers is that a design system will stifle creativity, leaving everything looking homogeneous and bland.

How We Adapted Atomic Design – The reason that I don’t want to get into more details is because my goal here is not to explain to you every detail of what Atomic Design is, but instead to let you know of a time it fell short.

How to Add Keyboard Shortcuts to Your Website – Would you like to add keyboard shortcuts to your own website, for the benefit of your visitors? It would greatly improve your site’s accessibility and navigation.

Webdesign in Common, Web Typography, Tools, etc.

Prototyping Tools – When deciding how to build your next prototype, the vast landscape of modern prototyping tools can be overwhelming. It’s easy to stick with the tools that you know for expedience sake, but a lot of great new tools are available and worth exploring.

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

Harnessing Flexbox For Today’s Web Apps – Some day in the future, I dare to dream that CSS grids and flexbox will be all we use to build intuitive user interfaces. It takes a while to have your “Aha!” moment with flexbox, because it involves unlearning what you already know about CSS layouting.

Information Architecture: What It Is And What An Information Architect Does – To gain a good understanding of IA and how it can be used to help improve the user experience, you need to know exactly what is involved in the work of an information architect.

Generate More Traffic with These Landing Page Tips for Beginners – Your website spans the spectrum of your brand with related products and/or services where visitors are easily distracted and lost in content unrelated to your promotion.

Full-Screen Video Background with HTML5 Video – Today, I’m going to show you how to use native HTML5 video, and implement it in the background of your site. All without using a plugin. We’ll take a look at some of the native video controls too, to make sure that a user’s experience is fully enhanced.

Use Google Analytics to Tweak Your Website Design – When you’re testing design elements, make sure to only change one thing at a time during the experiment. If you change both the font size and the button color, for instance, you won’t know which element actually made the difference for the visitor.

5 rules for choosing the perfect web typeface – Every project has its own requirements, and no single typeface will ever fit every situation. However, in the case of body text for the Web, there are key characteristics that you should be looking for.

Tips for Designing Vertical Website Navigation Menus – I’ve put together a slew of tips and example websites featuring upright vertical navigation menus. Each one should prove to be an inspiration for anyone who’s hoping to design their own vertical menu.

Automating Style Guide-Driven Development – Style guides come in many forms and shapes, but in this article we’ll concentrate on style guides that are generated directly from the style definition sources — i.e. CSS and its modern variants.

‘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 Moto 360 Smart Watch in Adobe Illustrator – With the use of some basic shapes and some tricks here and there I will guide you step by step so that in the end you will have created a stunning moto360 smartch.

10 Reasons Why Your Personal Brand Sucks – And while I may not know exactly what works, since no one does, I do have a pretty good idea of what doesn’t work. Here are 10 reasons why your personal brand might be doing more harm than good and some helpful tips

Transform your illustration into smart SVG – I’ll explain the process of converting a sketch into a smart illustration using a platform called illustrio. Creative people love sketching. Transforming ideas into drawings can take an idea to the next level.

Design Principles: Dominance, Focal Points And Hierarchy – For one element to stand out, another has to serve as the background from which the first is to stand out. Some elements need to dominate others in order for your design to display any sort of visual hierarchy.

Create a Design Moodboard: Communicating Color and Texture in Adobe InDesign – In this tutorial you’ll learn how to put together a grid-based moodboard, and look at how you can combine images, color, textures and typography to give the board a unified, professional look.

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

How to Use Instagram to Expand Business Reach – Sure, Facebook is still the most popular social network. But, let’s face it – fatigue has set in for many businesses. So, why not put the power of Instagram – a mighty visual network – to work for your business?

Your Ultimate Blog Checklist – After dedicating days on end reading the world’s most successful blogs, I created an ‘Ultimate Checklist’. If you use this checklist before launching a blog it will help you optimise your content for readers, search engines and shareability.

All You Need to Know About Email Marketing – As the saying goes, the report of the death of email marketing was an exaggeration – today, it is still one of the most important and most popular communication tools out there.

8 Ways to Improve Social Shares for Your Blog – Do you want more shares for your blog content? Are you looking for tools to optimize blog posts for sharing? In this article I’ll share eight ways to optimize your blog content for sharing and tools to help you.

7 Blogging Nightmares and How to Avoid Them – Blogging only a few years ago wasn’t seen as that important, but today blogging has moved into being the cornerstone for content marketing, search, building trust and driving brand credibility.


Understanding WordPress Themes Files and Where to Find Them – WordPress tutorials are often simple, but start with phrases like “open your theme’s functions.php file,” which can instantly throw a beginner off track.

WordPress Plugins and the Importance of Owning Your Data – One of the most compelling reasons to publish using WordPress rather than a hosted solution (e.g. Squarespace) is the assurance of knowing that you have complete data ownership.

Truly useful WordPress development tools: Sass, local development, and Git – All WordPress developers should start to familiarize themselves with these or similar tools. None is a drop-dead necessity, but all three make life so much better in so many situations that they’re definitely worth learning.

Building Your Own Social Sharing Plugin for WordPress – In this tutorial, I’ll show you how to build your very own social sharing plugin for WordPress from scratch, which can add social sharing buttons below every post.

Give Your Customers Top-Notch Service with Support System – In this article I’ll show you how to install and set up the plugin, but I’ll also show you how to get the most from its more advanced capabilities around ticket administration and management as well as giving you some tips.

A Prayer for the Soul of the WordPress Front-End Editor – This article is a personal statement about what I believe is the most important issue in WordPress right now: the need for a better post editing experience.

How to Easily Create a Multilingual WordPress Site – Do you want to translate your WordPress site in multiple languages? Wondering where to start? In this article, we will show you how to easily create a multilingual WordPress site.

Your WordPress Security is Horrible – Here’s How to Fix It – We could all implement additional measures for securing our WordPress installs. Here are five things you can do today to greatly enhance the security of your WordPress-powered sites.

How to Build an Online Store on WordPress with WooCommerce – This step-by-step tutorial will guide you through how to install WooCommerce, manage WooCommerce settings as well as product setup, with visual screenshots and specific explanations.

How To Install WordPress Locally With Vagrant – In this article I’ll show you why Vagrant is so awesome and how you can get up and running with awesome WordPress testing environments pretty quickly.

Creating Custom Content in WordPress: Custom Post Types – In this post you’ve learned about the three types of custom content, what they are and when to use each of them. You’ve also learned how to create a custom post type and display it on your site.

Creating Custom Content in WordPress: Taxonomies and Fields – In this second part, you’ve learned how to register a custom taxonomy and display its archive pages on your site; and how to create custom fields and display those on your site too.

In the search of perfect WordPress theme: what to look for and what to avoid – Wanting to make good use of money spent on a theme’s purchase is just one thing. There’s more to consider. So let’s see what to take into consideration when choosing the premium theme for your next project.

Moving to HTTPS on WordPress – I just recently took CSS-Tricks “HTTPS everywhere”. That is, every URL on this site enforces the HTTPS (SSL) protocol. Non-secure HTTP requests get redirected to HTTPS. Here’s some notes on that journey.

Search Engine Optimalization, Conversions, Analytics, etc.

15 SEO Best Practices for Structuring URLs – It’s been a long time since we covered one of the most fundamental building blocks of SEO—the structure of domain names and URLs—and I think it’s high time to revisit.


Wired-Style Underline – Basically it looks like the text is underlined with a sky-blue marker. However, when you examine this closely, you’ll notice that its vertical position hasn’t been just randomly placed.

Playful Trampoline Effect – A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tribute to Leonard Nimoy.

Freelance, Business and Workflow Related Stuff

Things to Remember when Starting a Design Business – The cost of self-employment in design is not too prohibitive. Money is, of course, a consideration, but your biggest investment will be the time you spend promoting yourself.

5 Designers’ Secrets To Launching Your Career Right – Freelancing is a journey for each of us and we learn and grow from the mistakes and errors that we make on the job. Learning from our mistakes is a crucial step in the journey to success.

How To Double Your Freelance Design Rates – If you understand the goals and the pains of your clients and you have enough knowledge to address them like no one else, you can charge a lot higher rates for your freelance design work.

10 Tips to Become a Better, More Successful Freelancer – As a freelancer you’re your own boss, and that entails a lot of mundane tasks that require good judgement on how you go about doing things. Some of these tips are going to appear as common sense ..

Why Do Bad Designers Always Seem to Get the Best Jobs? – Today’s economy makes it tough for even the most established freelancers to stay afloat, and if your client base is too small, you could find yourself in real trouble if one of them stops calling.

Ask a Freelancer: Should I Focus on Mid-Level Clients or Gun for High-Paying Ones? – First, your reputation as a talented freelancer is starting to make the rounds; second, there are clients out there who specifically want you for their projects.

The loneliness of the freelance designer – What is certain is that to be a freelancer, you don’t have to work from home, but also that working from home does not condemn you to a life of loneliness and solitude away from other people and the designers community.

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

The Web’s Grain – I won’t ask for peace, quiet, ease, magic or any other token that technology can’t provide—I’ve abandoned those empty promises. My wish is simple: I desire a technology of grace, one that lives well within its role.

How You Can Recognize Good Ideas And Shape Them Into Something More – Creativity is a process. If you struggle to find ideas, make collecting any and all ideas part of your process. You’re giving yourself permission to collect bad ideas so that you aren’t inhibited when a good idea comes to you.

Minimalism in design and code – Minimalism is all about focusing on the function. It is removing everything not necessary to do some specific action. Minimalism, in essence, pushes you to ask what is the reason why a user is visiting this site, use this product, etc.

Stop Being Such a Tight Wad. Invest In a Great Website – Over the years, I have met too many entrepreneurs trying to build their own websites and too many entrepreneurs whining about the price to build a great website. And it bugs me.

Are DIY Website Builders Really Worth It? – There is a reason why Content Management Systems rose in popularity. As such, DIY website builders offer not solutions, but compromises. Rudimentary websites with negligible functionality tend to be the norm in this case.

On Sass and Other CSS Preprocessors – Before you can make preprocessors work for you, you need to be good at plain old CSS. In other words, you need to fully understand the compiled CSS that Sass spits out.

– § –

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.