.. Your Daily Design Dosis

Tweet Parade (no.02 Jan 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.

Tweet Parade 02

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Top 10 Mistakes Node.js Developers Make – In this article we will talk about the most common mistakes Node developers make and how to avoid them. You can find the source code for the examples on github.

How to use an HTML boilerplate – An HTML boilerplate is a set of files that you can download, which provide a foundation for any website you care to create. Typically, they have been built by industry professionals but freely released to the community, so you can use them as the basis for your own projects.

PHP Tips, Resources and Best Practices for 2015 – This post will list important resources you should have in your brain/toolbelt before building anything with PHP in 2015. We looked at some important links and resources for starting off your 2015 PHP projects properly, with performance and safety in mind.

CSS you can get excited about in 2015 – In this article I’ll take a look at some newer modules and individual CSS features that are gaining browser support. Not all of these are features you’ll be able to use in production immediately, and some are only available behind experimental flags.

Introduction to CSS Colors – We’ll cover all the available methods for specifying colors with CSS in this guide. There are six ways to declare CSS colors: Hexadecimal notation, RGB, RGBA, HSL, HSLA and Color keywords.

Ajaxing for your SVG Sprite – An alternative approach is just to ajax for the sprite (all the time) and inject it onto the page. That means you can browser cache that SVG, and it works everywhere that inline SVG works.

How to Scale SVG – An epic guide to scaling SVG, covering all the ways you might want to do that. It’s not nearly as straightforward as scaling raster graphics, but that can be good, because it opens up interesting possibilities.

How To Get Started With CSS Flexbox – The advantage you get by using the flexbox model is that it can provide you with a much greater efficient way of displaying your layouts, alignments or space between the different containers inside the flexbox.

A Simple And Easy Guide To Understand Sass – In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code.

Smoothing Responsive Designs with +spread – A small Sass mixin that takes min/max values for a property and generates media queries that evenly spread the values across your screen dimensions. It’s surprisingly easy to use, and surprisingly powerful.

The Order Property: Flexbox Carousels – The verdict’s still out on whether flexbox will be the silver bullet for CSS layouts we’ve been pining for, but the specification offers a number of unique solutions to old problems.

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

Approaches to Media Queries in Sass – I spent a few months experimenting with a dozen different approaches to media queries in Sass and actually used a few in production. So I took what I liked about each of them and created a solution that covered all scenarios I came across.

The State of Responsive Web Design – We’re going to revisit what we know about RWD, what’s been left by the wayside in recent times, the new tricks we can incorporate into our game today, and what’s coming up on the horizon.

Making and Breaking UX Best Practices – With so many best practices available to UX designers, why isn’t every design a slam dunk? This week, author Brendon Cornwell explains the nuances of following best practices – including knowing when not to follow them.

How to Create a Responsive Email Template – While the support for HTML5 and CSS3 is limited on email design, the best way to create a responsive email template is by taking the old way of creating layouts — using tables, internal CSS, inline CSS and media queries.

Basic requirements for accessible email campaigns – If not planned and built thoughtfully, people who rely on keyboard-only access might not receive the content in the order intended. Screen readers, for example, read aloud tabular content from left-to-right and from top-to-bottom.

Should designers animate? – Rather than consider animation something separate in the design process, the way things move is another facet in our designs that works and communicates alongside everything else.

14 Tools For Minifying Javascript – In this article we’ll take a look at how Javascript minification works, how we can build it into our workflow and what the pros and cons of minifying are.

Web Typography: A Brief History – For the first twenty years, the web had gone through many changes such as adopting web standards, using CSS for layouts instead of tables, and focusing on content strategy and user-centered design.

Designing For Print With CSS – In this article, we’ll take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. I’ll explain how the selectors, properties and values that they introduce work.

What’s new for designers: The best of 2014 – Now that 2014 is coming to a close, we’ve compiled a roundup of the best of what we’ve featured this year, a total of 70 resources, carefully curated to make sure it’s the best of the best!

The 2014 CSS Report – This survey aggregated some data about how CSS is being used and written. I think this can be useful to drive conversations forward about how to organize, think about, and manage larger CSS projects, as well as to look at how the web is evolving.

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

The A to Z of Typography – Tips for achieving the effects described are tailored especially for users of Adobe InDesign, which is the software program best optimised for handling typography.

Pixel Perfect Shapes in Photoshop – I’m currently using Illustrator to do all my icons and then pasting them into Photoshop for all rendering purposes. In doing so, some icons weren’t getting accurately pasted into Photoshop to where I wanted them.

180 Best Photoshop Tutorials of Year 2014 – Today, we thought of coming up with best Photoshop tutorials of the year 2014. You read it right. How about sneaking the peek at the compilation of the best Photoshop tutorials 2014?

Building Your Personal Brand as a Graphic Designer – In 2015, it is imperative that creative professionals begin to think of themselves as media companies. While the term “personal brand” as become something of a cliché, that doesn’t diminish its importance or the truth behind it.

WordPress

Is Jetpack Misleading Users to Promote WordPress.com? – Considering Jetpack is auto-installed and auto-activated on several major WordPress hosting providers by default, this should be corrected to decrease the confusion between WordPress.com vs self-hosted WordPress.org.

Easiest Way to Translate a WordPress Theme in 2015 – WordPress 4.1 has been released at the end of 2014, and a very useful feature was also introduced. It’s the Site Language option that allows you to change the language of your WordPress site directly from the General Settings page.

WordPress Landing Page Theme Design Trends – Even landing pages focused on a free product can still have poor conversion rates if the design isn’t relatable. I’d like to take a look at some of the popular design trends found in landing page themes for WordPress.

WooCommerce TwentyFifteen Compatibility – WordPress 4+ provides a new default theme called 2015. To make WooCommerce fully compatible with this new theme, you can add the following snippet to the functions.php file within 2015 theme folder.

10 WordPress Snippets For Theme Customizations – In this post, we’re looking at WordPress functions that can be handy for your theme. You just have to put these functions in the functions.php file of your theme for the effect to take place.

Options for 301 Redirects in WordPress – Redirects are primarily a way of automatically mapping old or broken URL’s to new ones and are also a signal to search engines that your content has moved.

A Quick (and in-Depth) Guide to WordPress Hooks – In this post, I’m going to show you how you can do it pretty easily with two types of hooks: actions and filters. You’ll need a basic understanding of HTML and PHP for this one, but not too much.

How to Back Up Your WordPress Database – WordPress database backups can be taken numerous ways, ranging from “highly-technical” to “supremely easy”. How you take backups will vary depending on the importance of the site you’re working on.

Build faster WordPress sites with lazy loading – Lazy loading – only loading embedded assets such as high-resolution graphics and video when absolutely necessary – is one of the most straightforward solutions available to tackle this issue.

How To Customize Media Upload Directory In WordPress – If you would like to customize the path structure of where these files are stored, e.g. storing it in a folder with a name that matches the post permalink, or changing the “uploads” name to something else, this is the quicktip to follow.

The State of SEO in 2015 – To keep you up to date we like to compile all the important changes of the previous year into one solid article. This way you can stay abreast of the latest techniques to help your website conquer search results.

Tutorials

11 Creative SVG Animation Tutorials – SVG is not only a tool for the creation of static graphics, but also a handy tool for animation. In this post, ten tutorials are collected that will surely help you learn how a SVG animation can be best for you website

3D Curtain Template in CSS and jQuery – The 2-blocks design approach is quite common nowadays. With this nugget we tried to “spice-up” the transition between the sections by simulating a movement along the z-axis while the user is scrolling (or using the 2 navigation buttons).

Inspiration for Text Input Effects – Today we want to share some experimental styles and effects for text inputs with you. Most of the effects use CSS transitions together with pseudo-elements.

Freelance, Business and Workflow Related Stuff

Designing With Your Clients – It is not unusual for web designers to lose money on a project as a result of the client endlessly iterating on the design. After a few bad experiences, we start to exclude the client from the process.

What Does It Cost to Be a Freelancer? – Costs associated with freelancing that impact almost every worker include equipment and tools, taxes and insurance, marketing and promotion, legal and accounting, training and development and a few additional hidden costs.

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

The Rapidly Disappearing Business of Design – Large firms like Frog continue to dedicate significant efforts to this sort of work, but it will get harder for other firms to follow their lead if the pool of big clients in financial services and enterprise IT continues to shrink.

Filthy – Here’s something you probably don’t like to think about: your home is filthy. Now I’m not talking about your actual home, although for all I know it might very well fit that description, too. No, I’m talking about your digital home.

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.