.. Your Daily Design Dosis

Tweet Parade (no.49 Dec 2014)

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

Revisiting Style Resets in Email – If you’ve been involved in email design, you’re likely aware that email clients are riddled with quirks and bugs. Which typically makes coding an email that renders consistently across clients a chore.

Enduring CSS: writing style sheets for rapidly changing, long-lived projects – This post describes what I consider the most advantageous practices and approaches when authoring CSS for a rapidly changing, large scale web project.

Better Buttons With Blend Modes and Filters – Ideally, we would create icons just once, in their final state, and use CSS to present them in an “inactive” state, switching to “active” with a single declaration. With CSS blend modes and filters, you can do just that.

Write CSS3 without Worrying about Prefixes – CSS3 properties are awesome and you do not need to waste time writing prefixes for them. Whether a mixin library or a postprocessing tool fits your workflow better, you can automate this part of your coding and get more done!

Focusing on a Team Workflow With Git – Git is versatile, flexible, and can accommodate a variety of usage patterns. Deciding the workflow “rules of the road” ahead of time will help eliminate friction and confusion, and allow a team to take advantage of what Git does best: boost productivity.

(More Than) Doubling SVG FPS Rates at Khan Academy – This kind of interaction is particularly important on touch devices: to create an engaging mobile experience, we strive to provide interactive content that feels effortless and fun—tightening the feedback loop as much as possible and enforcing the illusion of complete control.

Automating CSS Regression Testing – Regression testing is the hardest. It’s the type where you’re trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs.

Clipping and Masking in CSS – Both of these things are used to hide some parts of elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser support differences.

JavaScript Regex: String Does Not Contain – For some reason I think that regular expressions can solve every problem and for some reason I always find out the regular expression I’m trying to create is too complicated and probably not the best route to getting what I want. Case in point: I needed to create a regular expression which is meant to not match a string.

Use the HTML5 File API to Work with Files Locally in the Browser – The HTML5 File API allows you to create applications that let the user interact with files locally. Basically, you can load files and render them in the browser without actually having to upload the files.

What Is Vagrant and Why Should I Care? – If you run a web server, a database server and your scripting language(s) of choice on your main machine and you have not yet switched to using virtualisation in your workflow then this essay may be of some value to you.

Developing Robust Deployment Procedures – Updating using (S)FTP is a fragile process that leaves you open to problems caused by both connectivity and human error. Is there a better way to do this?

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

Device Detection vs Responsive Web Design – With all the cool kids getting into RWD these days, it’s time to have a look at the Device Detection companies again. Device Detection is the practice of matching a device’s UA string against a table of such strings and looking up certain characteristics of that device and then serving different websites accordingly.

Responsive Images Demo—Srcset, Picture, and Image-Set – I found it easy to work with srcset, sizes, picture, source, and image-set(). It’ll take a little practice to feel comfortable, but it really is easy once you have that practice under you belt.

Responsive Type, part 4: Responsive consistency – Now, for something that really isn’t rocket science, consistency in responsive typography can be quite tedious. However, with the right approach you’ll find it an empowering experience.

CSS Vs JavaScript Myths Fall to Pieces – The above mentioned points clearly highlight the versatility of JavaScript based animations as compared to those which are CSS based. But is that we mean CSS animations are “bad”? No, absolutely not. They are good but only to perform basic animations. For higher flexibility and distinct capabilities, JavaScript should be the priority.

Thoughts About Responsive Navigation On Mobile Devices – We have some good ideas, but the ideas still need refinement. The patterns I like for mobile navigation tend to be off-canvas, navigation at the bottom, triggered by gestures. I suspect we’ll use all three in whatever becomes a common pattern.

The Lazy Person’s Guide to Responsive Typography – Typography is arguably the most important part of any website’s design. A huge header on a blank white page might look like a minimalist’s dream come true, but what happens when we start start shrinking our page for smaller and smaller devices?

Performance Calendar » 2014 – The speed geek’s favorite time of the year

Webdesign in Common, Web Typography, Tools, etc.

What It Takes to Build a Website – It’s 2015 – your job involves people paying you money for building websites. What does it take to build a website and to do it right? What practices should we adopt to make really great, successful and professional web projects in 2015?

50 Free Resources for Designers from November 2014 – The tremendous thing about the design community is that we all love to share. The sharing is what makes our community truly great! Here are this months 50 best free resources for web designers from November 2014

Fresh Resources For Web Developers – December 2014 – To round up a great year, I’ll take a look at some great tools that have proven to come in very handy for my own use. From documentation creation to loader elements, here’s a useful collection of tools for all web developers.

Learn from Great Design: Avis Car Hire – Welcome to the first in a monthly series about great web design, where I dissect the best websites out there, and show you what makes them great. Their website is by far the best I’ve ever used to book a rental car.

12+ Tips for Beginner Web Designers – We’ve gathered a neat collection of tips for beginner web designers which should help every novice understand what are the most important qualities, responsibilities and duties of the successful web designer.

Understanding CSS Stats: How to Make the Most of the Numbers – In case you didn’t notice, the CSS analysis site cssstats.com received an overhaul recently. It’s a beautifully designed tool that gives you a lot of objective insight into your code, but how can you make the best use of CSS statistics?

10 Things to consider before starting your web design project – Remember poor planning will cost you money, time and effort in the long run. Compiled here is a list of ten things you should consider before starting your project.

The 5 Most Common Mistakes in Design – There’s this thing called the “Internet” and this medium called an “article” that lets us point at and talk about these mistakes behind their backs, in the hopes that by bullying them into the spotlight, it’ll be harder for them to slink around, wasting our time and steering us towards no-good solutions.

Fundamentals of Mobile Web Development – At Chrome Dev Summit 2014 there was a whole host of topics and brand spanking new API’s covered. If you are a new Web Developer or even an experienced developer about to embark on exploring new APIs, chances are you’ll follow these three steps: learn, build and iterate.

A brief history of web design for designers – So instead of debating whether designers should learn code or developers should learn design, let’s set some common ground on how design for the web evolved and how we could bridge the gap between code and design.

Don’t Get Lost In Translation: How To Conduct Website Localization – From a commercial point of view, when you decide to create and maintain a multilingual website, you have to consider many more points than just translation. We’ll explore some of the issues to think about when localizing a website.

Getting Started with Sublime Text – Every developer has a lot to gain by using a powerful editor. Auto-complete, fast file switching and the ability to install packages for new technologies are just a few of the perks. In this post, I’ll describe a few easy steps to get you up to speed.

5 Common Website Design Mistakes – Quality design is more than pretty pixels. It’s communication, credibility, and conversion. Good design to a consumer is great insight to how they might expect to be treated. It’s vision into the quality of your products and how easy their experience will be.

3 tips for organizing large-scale web projects – Before everything else, you have to realize that there are two important pieces to organizing your big web development projects: simplicity and semantics. Keeping your work as simple as possible will yield a fluid workflow because your files will be easily found without even having the need to search for them.

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

How to Design a Brand Persona for Your Product – If you could turn your company or brand into a person, who would they be? That’s your persona. The hard part is designing the character in a way that is consistent, yet feels authentic.

Free Fonts For Designers – Only The Best Of The Last Few Months – These fonts can also be used by graphic designers who need new and interesting fonts for their print projects and not only. We can all agree that using the same fonts over and over again is not a good idea.

4 key ways to create visual hierarchy – As a good rule of thumb, is that colours and size manage attention, while spacing helps manage visual relationships. I’ll look at all three of these in this article, but first let’s start with another useful tool, contrast…

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

5 reasons why web developers should blog – If you’re a web developer, you should blog. Here’s 5 good reasons why. As developers we all depend on the solutions and tutorials documented by other coders – here’s a few good reasons you should too…

10 WordPress design tips for bloggers, and how to apply them to your blog – It’s not enough to simply post content and categorize it into a few pages, it needs to have structure, drive, and order. You’ll find hundreds if not thousands of web design tips, practices, and more. Here I’ve given you ten simple ways to design your blog for success.

You’ve Connected on LinkedIn Now What? – How many of us can honestly say that we even know, let alone have a relationship with, any more than a small fraction of our connections on LinkedIn?


How to Create a WordPress Child Theme – The problem is that modifying a theme even slightly prevents you from updating it to a newer version in the future, because if you do try to update, you lose all your changes.

How To Create A Theme Options Page For WordPress – The theme options page that is found under the appearance menu which allows the admin of the WordPress site to change some of the settings on the theme.

Learning PHP for WordPress Development: A Comprehensive Guide – In this article, I’ll give you a brief introduction to the world of WordPress programming. While this post is aimed at beginners, it does presume you’ve tinkered with WordPress before and you know basic HTML.

What’s new and exciting in WordPress 4.1 – The features vary from the introduction of new UI elements, and modes in the dashboard, to the query API and performance enhancements — there’s something for everyone to get excited about.

An Introduction to Programming WordPress Theme Menus – Navigation menus are one of the most obvious features that go into making a site. If you’re building or revising a WordPress theme, you’ll almost certainly have one or more areas where you’ll want users to be able to easily make menus.

The Beginner’s Guide to WordPress Taxonomies: Themes or Plugins? – Whatever the case, we’re doing what we can to make sure that you’re armed with as much information as possible when it comes to incorporating custom taxonomies into your WordPress projects.

What To Consider When Choosing A WordPress Theme – Of course, no theme is perfect. That being said, with the recommendations in this post, you are hopefully now better informed to avoid the really bad themes and to choose one that is fast, well coded and SEO-friendly and that includes all of the features you need.

10 Must-Have Plugins for Every New WordPress Blog – In this post we’ll look at 10 essential free and premium plugins covering 10 different categories, from security and SEO to social media and image optimization.

What’s new for Developers in WP version 4.1 – The upcoming WP version 4.1 however has so many new and exciting stuff for Developers that it makes much more sense to write about them here. Let’s have a look at the goodies WP version 4.1 has for us!

Back to Basics With WordPress CSS: Understanding the Native Classes – In this guide, we’re going to have a quick look at the absolute minimal set of CSS you need to take care of when building a WordPress site.

Improve Your Workflow by Managing WordPress from the Command Line with WP-CLI – I came across the WordPress Command Line (WP-CLI) search and replace command a few months back, but this session opened my eyes to more of its amazing features that many WordPress developers, like myself, have been missing out on.

Search Engine Optimalization, Conversions, Analytics, etc.

SEO 101: The Importance of Adding Structured Snippets – A rich snippet, also known as a structured snippet, is the extra text that can be found underneath search results used to provide additional information to users about a link and the content provided therein.

The Step-by-Step Guide on Improving Your Google Rankings Without Getting Penalized – Everyone wants to achieve better search rankings. That’s because organic search traffic is a proven driver of business growth. The only trouble is, SEO keeps changing, and no-one wants a penalty because of doing the wrong thing.

8 Lessons I’ve Learned About Using Google Analytics at Scale – Like many websites, we use Google Analytics to track data about our visitors and what they do on our sites. However, at our size, we run into a few problems using it. Here’s what I’ve learned about working with Google Analytics at scale.

5 things web designers need to know about SEO in 2015 – In this post I’ve summarized 5 most important things that web designers need to understand about modern SEO. It’ll help them shape their SEO strategies for 2015.

Getting Started with Google Analytics – If you care about the success of your website, you need to keep track of metrics related to your web traffic and audience. After all, how can you cater to the needs and requirements of your audience if you do not fully know about them?

Simple SEO Tips You Wished Someone Had Told You About Years Ago – The magical world of SEO is one that many know about but few fail to understand. Search engine optimization refers to a complex set of rules to make your web pages rank well in search engines.


15 jQuery Dropdown/Select Box Plugins & Tutorials – Today, we have sorted the wheat from the chaff and presenting you 15 useful jQuery select box and dropdown plugins that have the potential to unleash your creativity to whole new levels.

18 Cool Things You Won’t Believe Were Built Using CSS – There are plenty of other things that one can do with CSS as well. With the ability to create animations and interactions, CSS along with HTML and Javascript allow web developers the opportunity to play around and experiment with different methods.

3D Rotating Navigation in CSS and jQuery – A 3D rotating navigation, powered by CSS transformations. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.

Best Tutorials for Learning PHP-Based API Development – One of the tenets of advanced PHP programming is working with 3rd party APIs. This post offers a handful of free tutorials dedicated to PHP API development working with a number of popular website APIs.

Google’s transforming material icons in HTML and CSS – This is the finished clone of the Delightful Details. Note that it isn’t exactly the same but it proves that it can be done in HTML and CSS. You click on each section to toggle between icons.

Freelance, Business and Workflow Related Stuff

How To Get More Clients by Donating Your Services – As a graphic design company, increasing your exposure is crucial to your success. It’s only through getting your name out there that you can find clients, and therefore success, as your business grows.

Eight Great Online Tools for Entrepreneurs – As small business owners, you’re always looking for new tools and services to accelerate growth or make business more efficient. Here’s a list of online tools and services that I have added to my digital arsenal.

Freelancers, Here’s Why Your Clients Hate You – They say a clean desk speaks of a professional attitude and aptitude. HA! It speaks of anal-retentive people who spend too much time cleaning their desks or not working so there’s nothing to sit on their desk.

Freelancing 101: 10 Things People Forget to Tell You About Freelancing – As a career choice, freelancing comes with plenty of ups and downs. It takes a certain personality to withstand those changes and find success. There’s a lot that I have learned along the way.

A beginners guide to creating your own promotional videos – Adding videos of people can make your brand feel more human. But, knowing how to go about it can feel too difficult. In fact it is easier than you think.

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

Good Design. Bad Design – That’s design. Creating experiences. Now, its in your hand to create a good one or a bad one. I personally think that one should never create neutral experiences. Either make it so good that no one forgets it or make it so bad that no one would be able to forget it.

The 80/20 Rule That You Should Know As A Designer – Using the Pareto principle in web design involves the same 80/20 breakdown. It means that your profits can be maximized simply by placing the focus on the 20% of processes, activities or products that are generating 80% of the results that you want from your website.

How Top Designers Tell Clients That Their Taste Sucks – What do you do with clients who just fundamentally have terrible taste in design? They’re paying the bills, creating a problem that almost every designer has to face in his or her career at least once: How do you tell your clients that their taste sucks?

– § –

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.