.. Your Daily Design Dosis

Tweet Parade (no.24 Jun 2014)

| Comments Off on Tweet Parade (no.24 Jun 2014)

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

A Beginner’s Introduction to CSS Animation – In this tutorial I am going to introduce you to CSS animations; a highly performant way of doing things which is becoming more and more popular as browser support improves.

Everything You Need to Know About the CSS will-change Property – The will-change property allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element, so that it can set up the appropriate optimizations before they’re needed, ..

Creating Scrolling Parallax Effects with CSS – In short: parallax done with JavaScript can decrease the scrolling performance of a website quite quickly. I personally prefer CSS solutions to JavaScript solutions and this is a perfect example for my preference.

Sharing Data Between Sass and JavaScript with JSON – Traditionally stylesheets describe the majority of the presentation layer for a website. However as JavaScript becomes necessary to present information in a stylistically consistent way, it becomes troublesome to keep these mediums in sync.

For designers, version control is a big problem — but GitHub is close to solving it – But today, a small update from GitHub adds a twist to the story: The firm now supports PSD viewing and diffing, enabling designers to see when PSDs have changed and view who changed what.

How To Use HTML5 Offline Storage In Your Website – Apart from new elements in HTML5, this new web technology offers us Offline Storage. There are a number types of offline storage, and in this article we will specifically discuss sessionStorage and localStorage.

Cascading SVG Fill Color – One time someone told me their biggest problem with SVG icons is that they didn’t match the color of text they were by. The idea is to use the currentColor value in CSS to pass that text color through to the SVG shapes.

Building With Gulp – Gulp is a build system that can improve how you develop websites by automating common tasks, such as compiling preprocessed CSS, minifying JavaScript and reloading the browser.

How to get started with Git – One of the biggest advantages of using Git, is that it is a distributed system. Through this tutorial, I’ll guide you through how to install and setup Git and the basic commands to get you started using Git quickly.

Sassy Z-Index Management For Complex Layouts – The infamous 99999 was born of frustration. It’s an easy way to get an element just to be on top of everything else. But it’s not entirely scalable: What if you need to add something on top of that?

Thinking About Strings, Quotes, Tokens, And Tildes In Less CSS – In Less CSS, you have to think in terms of “tokens” and “inputs;” and, using quotes as a means to group tokens that may or may not be wrapped in quotes.

The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS – Use the “invisible gradient” technique to make your websites more friendly to high-density devices without breaking the experience for those with older browsers.

Improving Viewport Unit Support in WebKit – The most obvious fix is that resizing now works. If you size an object with viewport units and then the user resizes the browser window, the object will resize as the window resizes. Prior to this patch, you would need to reload to get the resize to happen.

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

Responsive Images: Finally The Picture Element Arrives! – The picture element as propagated by the W3C has finally arrived. If you are into the matter, you might know that the WhatWG had tried to standardize an additional attribute to the image element, named srcset as opposed to picture

UX and UI Trends for Mobile Solutions – These three trends are going to make mobile design easier. Designers working on mobile sites and mobile apps will do well in 2014 and beyond to look for tools that fit these trends

Mobile Trends – What You Should (and Shouldn’t) Focus On -Everyone is talking mobile: app development, SMS, QR codes, and so forth. The question is, what should you focus on first? Is everything mobile important for your business?

5 Ways to Enhance Your Website Login Process – Here we’ll discuss five things you can do to improve the experience of the process, starting with the two types of logging in and ending with the importance of labels and scalability.

Maintaining Momentum Through Efficient Mobile Design – As designers, we must understand the role of momentum in effective user interface design and create experiences that keep our users moving forward.

Carousels are a taboo design element. Why is that? – I hope you get the point though – there is nothing wrong with carousels. In fact, they can be a great design asset. As long as the mystery is taken out of the displayed content, you’re off to a good start.

15 Responsive Web Design Issues You Don’t Want to Deal With – Responsive web design is not only about pretty layouts and fashionable templates. Your utmost goal is to provide users with a uniform user experience across all devices.

Designing for Mobile Part 3: Visual design – Now we’ll conclude the 3-part study of designing for mobile by exploring visual design solutions and the associated best practices necessary to produce beautiful, usable applications.

13 Reasons Why You Should Pay Attention to Mobile Web Performance – If you’re not already thinking mobile first, you should at least consider it. Let’s go over compelling data that demonstrate the importance of focusing on performance for mobile devices.

Essential UX Tips for Your Website – For this article, let’s will try to transform that understanding into tangible and perceivable changes in your websites. We amassed a few essential UX tips for your website!

Is your Responsive Design Mobile Website Delivering Acceptable Load Times? – Out of the 155 responsively designed websites that the company surveyed, 69% of the sites took an unacceptably long time to load, and just 21 % took less than 4 seconds to load, which is deemed acceptable.

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

Grid systems: Discover the perfect building blocks for your website design – In this article I’d like to take a look at the second option: new and lesser-known grid systems, so let’s look at some basic grid frameworks.

Building Localization-Ready Websites: Tips and Things to Consider – Language localization is the process of adapting a product for other countries and regions. The biggest benefit of localization is the ability to reach a bigger global audience.

Exploring Current Web Design Trends – So, in an attempt to lead this year’s web design trends into beautiful harmony with important principles such as usability and readability, let’s take a look at some of the most popular trends of this year.

Rapid Prototyping for Web Design: Basic Tips and Resources – I’ll be focusing specifically on website design, but keep in mind that you can rapidly prototype any interface including mobile apps or GUIs for software. I’ve also included some related posts and popular tools for prototyping.

7 new js tools for web designers – Now if you are a programmer and you are browsing at the internet, you can find a lot of highly useful js tools for web designers that help you to give great function and features.

10 Mistakes You’re Probably Making As A Web Designer – As web designers, we strive for perfection in our day to day processes. Although we are human, many of our daily tasks are to handle designing and developing projects down to the nearest pixel.

What’s new for designers, June 2014 – What’s new for web designers and developers includes new web apps, frameworks, grid systems, game platforms, inspirational resources, Photoshop plugins, text editors, and some really great new fonts.

8 Design Trends for 2014 – Some trends have been gaining popularity for several years, while others are more recent. If you’re a professional designer or online marketer, keeping up with web design trends can help your site or your marketing efforts.

Tips for Creating a Great Personal Online Portfolio – Before jumping in Photoshop and pumping out cool ideas, start with the core of your “business.” You are the client. Just as any other project you need to set goals first.

Some design principles never change – In this post I want to share a few of the web design principles that have stood the test of time. Principles that are the bedrock of all good sites.

5 Mistakes in Design Process While Building Large Scale Products – If you’re not already living by these simple design practices, then I hope you leave this page feeling inspired to try them. In time you may discover your own hacks and clever ways to improve the way you work in and out of a team environment

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

50 Photoshop tutorials for creating amazing icons – This tutorial is a great showcase of some of the very best tutorials for teaching you how you can use Photoshop for creating icons.

How to Use Cool Color in Design Projects – Today, we will look at using cool color in design projects and create a few color palettes with cool hues.

Going Global: The Last Decade in Multi-Script Type Design
The world may be turning upside down in other areas, but typographically it is entering a period of global growth, maturity, and cultural sensitivity.

A Brief Summary on Font Licensing: Some Do’s and Dont’s – For the most part, the main gist of font licensing pretty straightforward, but I think a number of people assume that font licensing is somewhat of a minefield. I’ll start with a summarised conclusion first, which ought to set you the right course.

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

The Anatomy of a Perfect Blog Post: The Data on Headlines, Length, Images and More – I can often get wrapped up in making sure that every little detail of a blog post is perfect. No doubt I could list way more than seven elements from perfect blog posts, but these seven seem to cover all the most important bases.

10 Sexy Ways to Integrate Social Media With Your E-Commerce Website – In this article we’ll look at 10 different ways that e-commerce sites can integrate with social media. Since we often recommend Shopify as an excellent e-commerce platform, this article will reference many Shopify apps.

Better Emails – Best Practices to Increase Email Efficiency – Email is effectively a form of communication. In order to get better at writing emails, you have to first go to the root and learn how to communicate more efficiently.

HTML Emails: Planning and Organization – Every email requires copywriting, design, and implementation. Implementation could be as simple as writing HTML/CSS and sending via MailChimp.

WordPress

6 Simple Plugins That Solve Common WordPress Problems – Today, I’d like to celebrate some plugins that truly do a great job at fixing the most common WordPress problems with a simple and easy to use solution.

Things You Must Remember When Changing WordPress Themes – When changing the theme of your WordPress blog, one important thing you need to keep in mind is the functionality of the site. This post briefly outlines several things which must be done before changing WordPress themes.

How to Install WordPress Locally for PC/Windows with XAMPP – Having a localhost environment has dramatically improved my workflow and is even an important part of my WordPress working life. It’s such a waste of money using an online WordPress installation with a web host as a test environment!

The Best Tools for A/B Split Testing in WordPress – But how is it possible to do away with the guess work and know for a fact what your visitors respond to? How do you go from conjecture to informed decision? This is what A/B testing is for.

Using Grunt for WordPress Theme Development and Deployments – With one JavaScript file in the root of my WordPress theme, I can control Compass output paths, JSHint options, UglifyJS concatenation and minification, setup browser live reloading and multiple server deployments,..

Search Engine Optimalization, Conversions, Analytics, etc.

Use data to grow your mailing list – This was a real learning experience and probably the first time I’ve had enough data to influence my decision. I often go with my gut (which I think is still a valid approach) but having had my initial feelings completely undermined by cold hard data.

Tutorials

How to Create a Tiled Background Slideshow – A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.

Minimalist Newsletter Subscription Form – Newsletter subscription form is the detail that can easily get you one step closer to the perfection. But there’s one thing we’ll surely do now: hide the submit button by default and only show it if user enters the correct email address.

Create Fullscreen HTML5 Page Background Video – It is possible to fake the appearance of a background video by forcing it behind other HTML elements. The challenge is to have the video fill the browser window, making it as responsive as

Freelance, Business and Workflow Related Stuff

5 Ways For Small Businesses To Boost Online Presence – Web is a huge place and it can be really overwhelming for a small business. Thus, careful planning and selection is crucial on the road to success. The tools mentioned here are by no means claimed to be the best.

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

Write less, achieve meh? – “Instead of filing bugs there is a pattern of creating yet another solution that fixes all the issues of the original one . People simply should replace the old one with the new one.”

The $5 Logo – There was only one way to find out: pose as a company, and hire one of their designers myself. And best of all, it would only cost me $5. So read on for an epic tale of lies, deception, stolen work, and crappy logos.

– § –

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.