.. Your Daily Design Dosis

Tweet Parade (no.27-2015)

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

SVG Basics: Lines, PolyLines, Caps and Corners – If you’re after a line or an open shape, rather than a closed polygon or circle, SVG has two options for you: lines and polylines. Changes in direction for SVG lines don’t have to be rendered as hard corners.

Cutting-Edge CSS Features You Can Use Today – Today’s native features are becoming closer to tools we’d normally use in our favorite graphics editor. In this article, we’ll cover three cutting-edge features you can add to your CSS toolkit today: blend modes, masks, and clipping paths.

Mathematical Web Typography – Things built on the Web should be fluid and infinitely scalable. Using modular scales in a design compliments that idea and keeps things organized in the face of growing complexity.

Flexbox gotchas for Android 2.1 – 4.3 (stock browser) – While troubleshooting layouts across older Android devices I’ve hit a number of niggles. These aren’t bugs, they are merely limitations of the prior version of the Flexbox specification.

Exporting breakpoints from CSS to JavaScript with include-media – Let’s imagine that we want to make one of those navigation menus that become sticky after scrolling past a certain point on the page. Unfortunately, there’s no reliable way of doing this with only CSS, so we’ll need JavaScript.

Making Sense of Git – A Visual Perspective – Git might not be the most user-friendly program, but it is extremely powerful once you know how to use it. Hopefully, some of these models and visuals will help you either learn Git or get more use out of it.

Creating Realistic Text with CSS – Today I’ll show how to make a realistic text effect with a tilt-shift blur, using CSS and JavaScript. This effect is nice for mockups, demos, and the like.

Fix scrolling performance with CSS will-change property – Let’s start with what we don’t want to change: the design. I don’t want to step on peoples’ toes, and I don’t want to throw great work out just because it doesn’t scroll fast enough for my taste. That’s mean.

Native CSS Scroll Snap Points – Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior. Can you imagine how easy would be creating such effects using CSS only?

Working with Shapes in Web Design – In this post I want to roughly outline some of the most common ways to make circles, triangles, and polygons, as well jot down the advantages and disadvantages for these methods so we can experiment with those that might be a little unfamiliar to us.

Hack Physics and JavaScript (part 1) – I like to call this sort of thing hack physics because we’re taking a very basic understanding of vectors and writing JavaScript that kind of replicates those vectors but in no way represents a real physics environment.

Component Independence – There are a number of reasons why creating independent modules with CSS can be difficult. Some CSS properties are inherited. While this can affect the independence of a module, inheritance usually works in our favour.

Detecting CSS Animation and Transition End with JavaScript – Detecting the end of CSS animation and transition could be useful if you want to back up some of your JavaScript behavior on CSS.

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

WCAG 2.0 — Success Criteria And Techniques – To conform to the WCAG standards, a site must satisfy all of its conformance requirements, which means it must satisfy the success criteria for the different guidelines.

Understanding CSS3 Flexbox for Responsive Design – It’s great for mobile screens and responsive content for dynamic layouts and webapps. This guide will cover the fundamentals of CSS flexbox usage and some helpful resources for digging deeper into the topic.

The DNA of Responsive Web Design – So let’s take a step back and review the basics to get a deeper understanding of how the technology works by deconstructing the basic building blocks.

Container Queries: Once More Unto the Breach – Since a solution can’t allow an element to restyle itself, we can build that constraint into the specification: queries attached to an element can only influence the styling of that element’s child elements.

Designing Data-Driven Interfaces – “Dashboard”, “Big Data”, “Data visualization”, “Analytics” — there’s been an explosion of people and companies looking to do interesting things with their data.

How to transform user experience into UX – There are a wide selection of tactics ranging from usability lab studies to simple email surveys, and they all have their time and place. We went with a remote usability test because it strikes a nice balance between speed, accuracy, and cost.

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

The next design trend is one that eliminates all choices – Up to now, the tendency of designers has been to provide customers with as many options as possible—various colors for vacuum cleaners, feature options for calling plans, and a spectrum of detergents for any kind of stain or proclivity.

The Roots of Minimalism in Web Design – Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks.

Color vs Contrast: Which one brings more conversion? – Do you know what rules our perception? It is contrast. This article will not tell you “use colors in your designs,” but will tell you “use contrasts in your designs,” followed by a proof in a form of a case study.

4 Fundamental Drivers Of Good Web Design – While I cannot give you any answers on engineering or the economy, good web design is definitely rooted in certain fundamental drivers or core motivations that help in convincing and converting users.

404 Not Found & 9 Most Common HTTP Errors Explained – Apart from the 404 error, how many other HTML error pages do you know about? Have you ever thought about what happens in the background when you see any of these HTML error pages on your screen?

Reimagining the Web Design Process – The old design process is getting an overhaul. Agility, collaboration and adaptability are now on the forefront of the design process. The lines between design and development are blurring.

Great Font Combinations You Need to Try – In flat and material design, we use more bare typography on web pages. And we need fonts to look nice in combination with each other.

Think Fast! Using Heuristics To Increase Use Of Your Product – People frequently use heuristics to make decisions. Here, we’ll discuss four common heuristics that researchers have identified, with examples of how to address them in digital design.

Baseline – SVGOMG requires JavaScript for its core functionality. That was a deliberate choice. Jake could’ve made the barrier-to-entry as low as any browser that supports input type="file" but he decided that for this audience it was a safe assumption that JavaScript would be available.

Mood Boards: Why and How To Create Them – Whether you are hoping to sell something, or trying to convince people of an opinion that they previously did not believe in, the way you present your end product would be the deciding factor on whether it represents the project’s mission or not.

How to achieve better results from your website – However for three years in a row, A/B testing has remained the most used method for improving conversion rates. With this in mind, here is a simple way to improve prioritisation of tests to get better results.

9 reasons you should never use a CMS – In an ideal world, the purpose of CMS would be entirely to make it easier for designers, developers, and content managers to design, develop, and manage websites.

How to Perform Your Own Lean Mobile Usability Testing – You can get all of the tremendous benefits of customer feedback by doing your own lean mobile usability testing with 10-15 potential customers per day for about $20. This article will show you how.

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

Create a Retro Star Wars Inspired Text Effect in Adobe Photoshop – In this tutorial I will show you how to use a couple of layer styles, with a nice space texture and a flare brush tip, to create a Star Wars inspired text effect.

Design Principles: Compositional Balance, Symmetry And Asymmetry – Balancing a composition involves arranging both positive elements and negative space in such a way that no one area of the design overpowers other areas.

How to Create a Flat, Minimalist Rock Card Using Adobe Illustrator – Today I’m going to show you how we can create a flat, minimalist rock card using some of Illustrator’s basic tools such as the Ellipse Tool and Rectangle Tool combined with the power of the Pen and Direct Selection Tools.

10 Tips for Perfect Poster Design – Poster can be design vertically or horizontally, but are most commonly designed with vertical orientation. Today we’re taking a look at ten useful tips for improving your next poster design!

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

5 Blog Posts That Attract The Most Comments – So today I wanted to build on that and go over some blog posts that work well for attracting more comments. There are some posts that just work better at getting comments then others.

27 Tricks to Boost Blog Post Conversion Rates – You can make amazing strides in your blog conversion rates with just a few tricks.Any of the following ideas can help you build your email list and increase engagement on your blog.

12 elements of a user-friendly blog page – Writing interesting content is not enough in itself. You might have the best article in the world, but if it isn’t presented in a user-friendly format then nobody is going to read (or share) it.


15 WordPress Plugins to Supercharge Search Function – These 15 plugins will help you make your searches on your site easier and faster to run. Some allow different methods to run searches, helps you track what users are searching for, lets you customize your search results or disable search altogether.

Hacking the WordPress Template Hierarchy – If you’re creating themes to be released to the public, you need to respect the template hierarchy. On the other hand, when you’re working on a theme or child theme for a specific site, these hooks are very useful for handling client requirements.

10 Tips for Improving the Quality of Your WordPress Themes and Plugins – In this post I’ll look at what makes quality code and give my top 10 tips for improving the quality of code in your themes and plugins, whether you’re coding for yourself, clients or for public release.

WordPress Security: Tried and True Tips to Secure WordPress – Securing your WordPress site keeps you, your content and your visitors safe from hackers trying to collect personal information or distribute nasty malware and viruses.

Search Engine Optimalization, Conversions, Analytics, etc.

5 key things to understand about conversion rate optimization – Keeping your eye on your conversion data will enable you to better see what’s going on with your traffic and hold any outsourced marketing agencies to delivering the result they anticipated.


Modern And Useful Form Snippets To Use – The next time that you need to design engaging information or an online form, or create some interesting form code snippets, think about more than just adding some fancy CSS gimmicks.

How to Create an “Anything” Slider With Just CSS – It used to be unthinkable to deploy a slider without JavaScript, but in this short video tutorial you’ll learn how to create an “anything” slider with just CSS, to present any type of content you need.

2 Blocks Template in CSS and jQuery – Today’s nugget is a simple template split in 2 animated blocks of content. On bigger devices, the content is split in two main containers. When the user surfs through the content using the navigation, new content overlaps the old one.

Freelance, Business and Workflow Related Stuff

The Keys to Creating Web Project Cost Estimates – I’m talking about creating cost estimates for your prospective clients. It’s a vitally important task. On one hand, you’ll want to make sure that the estimate will cover everything the client needs.

Build Websites in Collaboration With Clients, Not in Spite of Them – It takes more than compelling content and sharp coding to build a great website. A successful relationship between a designer and a client is, perhaps, just as imperative.

When the Project You’re Working on No Longer Excites You – Clearly not all projects were meant to be. Realising that an idea, or project is material for the design graveyard is for another post. I’m talking about working on things that should and need to be finished.

A Guide to the Front-End Interview Process – So I wanted to share what I have learned from my recent experiences as a candidate and previously as an interviewer. These points should help you focus on some of the key areas that you should prepare for.

How To Avoid Design By Committee – In magical unicorn land, it would be perfect, a must-have item. But here’s the thing about the real world: when you add features, you get mass, and mass equals mess. Let me repeat that: features = mass = mess.

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

Thriving in Unpredictability – It’s about the users. It’s about finding ways to make our content available to them no matter how unpredictable the path that lies between us and them.

Why Web Components will make the web a better place for our users – Imagine teams iterating on shared components, rolling them out to all users at the same time, no matter what frameworks their sites are built with…

Bye, bye Adobe – Since then each new version (CC, CC2014, CC2015) of the programs that I use daily has become slower and clunkier. In particular Illustrator CC2015 compared to CS6, is just a dog.

– § –

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.