.. Your Daily Design Dosis

Tweet Parade (no.02 Jan 2015)

| Comments Off on 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.

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.

SVG Basics—How to Work with Scalable Vector Graphics – I’ve stumbled through a post or two about SVG, but that’s about as far as my practical knowledge extends. I thought it time to change that. I’d like to begin a series on SVG today.

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.

CSS Transitions, Transforms & Animations – Perspective – In this tutorial, we’re going to take an in-depth look into CSS3 perspective, and some use-cases where it can give users more natural and cool experiences.

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.

Normalizing Cross-browser Flexbox Bugs – Before flexbox, it was impossible to build a sticky footer layout with just CSS unless you knew the exact dimensions of both the header and footer.

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.

Quick tip: conditional form fields with CSS – I had the issue that one form field was dependent on another and I didn’t want to go the full way and create the field on demand with JavaScript but keep it to CSS.

How we use web fonts responsibly, or, avoiding a @font-face-palm – However, when you use custom fonts on the web using standard techniques, they can slow down page load speed and hamper performance—both real and perceived.

Abusing CSS3’s nth-child selector to invent new ones – What I had in mind was a Javascript-free, automatically-sizing image gallery that I could toss in the stylesheet for my site and have it “just work” regardless of the number of images I threw at it.

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.

Write Simple, Elegant and Maintainable Media Queries with Sass – Each solution had something that I really liked, but I couldn’t find one that covered everything I needed to do, so I ventured into creating my own: meet import-media.

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.

Community Project: Responsible Redesign for the New Year – The beginning of 2015 is the perfect time to get responsible, so let’s do so as a community! We’re asking you to improve your websites and share the results.

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.

15 Stats To Convince Your Boss To Invest In Mobile In 2015 – Is your company still not thinking mobile first? Here are 15 stats to convince your executive team that the time for mobile is now

Webdesign in Common, Web Typography, Tools, etc.

Ten Things I Learned Researching Ten of the World’s Fastest Growing Startups – Based on our research we were able to piece together what made these companies so successful—and in the process reverse engineer their growth engine.

Your ultimate guide to Minimum Viable Product (+great examples) – This Minimum Viable Product guide will be useful if you want to build a web product your early adopters will love. In addition to that, it is packed with definitions, strategies and great MVP examples.

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.

Learning to Wireframe: 10 Best Practices – Wireframing is about rapid ideation. Use these 10 best practices to free your wireframes from mediocrity and get on with designing amazing experiences.

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.

Top 3 Things to Check on Your Site to Start 2015 – Boom! Another year is over. What did you do in 2014 to make your Web site more user-friendly? Not enough? Don’t worry! Here are three main tasks to start off with in 2015.

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.

The Chrome CSS Bug That Crashed Our Site – Hmm no JavaScript errors and no server errors. I wondered what it would like in another browser. I opened it up in Firefox and everything worked fine.

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.

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

Creative Ways To Drive More Traffic To Your Website – One area we probably all need to focus on year after year–refining and iterating our strategies along the way–is increasing site traffic.


Best of Best WordPress Tutorials of 2014 on WPBeginner – In 2014, we wrote many useful WordPress tutorials. We thought we should compile a list of our favorite ones. Let’s take a look at the year.

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.

7 Mistakes to Avoid When Promoting Your WordPress Design Business in 2015 – your service has to be great if you want to be successful. However, a great service alone won’t get you anywhere. Without an effective approach of promotion you can’t expect incredible results with your new WordPress design business.

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.

Here’s How to Retrieve Any Post You Want With WP_Query – WP_Query is your friend, it allows you to pull posts from the database according to your criteria. You can retrieve all posts from a single category that contain certain tags as well.

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.

Everything You Need to Know About Modifying WordPress Permalinks – Permalinks are extremely important for ensuring the SEO enhancement of your website since the search engines use these permalinks to index your site’s posts.

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.

The best free WordPress plugins for January 2015 – The new year is a great time to evaluate your life, and your choices. This year, why don’t you ask yourself if you’re using the right plugins for your WordPress sites?

How Custom Fields Can Help Make Updating WordPress Easier for Your Clients – In this article, we’re going to take a look at an example of how custom fields can help make updating a website a much more intuitive process for your clients.

Start the Year off Right with These WordPress Housekeeping Tips – So in today’s post we’re going to focus on good habits to keep when working with WordPress, and great tools you can start using to improve your website in 2015.

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.

Understanding WordPress Hooks: Knowing What to Use Where – One problem with hooks is that it isn’t immediately obvious which hook to use in what situation, and what parameters you have at your disposal.

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.

Search Engine Optimalization, Conversions, Analytics, etc.

What is Negative SEO and how can you protect your website? – The purpose of this post is to tell you exactly what negative SEO actually means, whether you need to worry about it and what you can do to defend yourself from it.

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.

Six Actionable SEO Tips You Can Discover From Every SERP – Using information from the Google SERP, you can discover how your website is succeeding or failing. This is less about securing rank than it is about discovering a new strategy source.


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

CSS Transitions, Transforms & Animations Tutorial – The most common use-case for flipping cards and tiles that I can think of would be including some kind of imagery on the front, and some info on the back.

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.

11 Surefire ways to improve cash flow this year – I immersed myself in money books, business lessons, money courses, abundance principles, affirmations, meditations, visualisations, EFT tapping techniques — you name it — I did it.

How to build a reputation in the design community, and why you should – Do you think the big names of the web industry are the best coders, the best designers? The ones that have built a reputation by speaking at conferences, writing books and through self-promotion.

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.

The Shrinking Market For Freelance Web Design Services – I don’t think it means freelancers will become extinct, but I do think it means we’re going to need to change if we want to attract new business and hold onto existing business.

– § –

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.