.. Your Daily Design Dosis

Tweet Parade (no.50 Dec 2013)

| Comments Off on Tweet Parade (no.50 Dec 2013)

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

Node.js Is Big, And Still Getting Bigger – Shortly after application programming interfaces (APIs) became popular and useful, companies sometimes found it sometimes difficult to manage them flexibly and to keep complex networks of applications working smoothly.

Animating Vectors with SVG – SVG is an XML format, which means it is possible to write by hand or to script. The most common way to create an SVG file is through the use of various drawing applications like Illustrator, Inkscape or Sketch. All of them open and save the SVG format.

How to create a filterable gallery with jQuery – We see filterable galleries in plenty of portfolios, they’re a nice and tidy way of showing off different categories of work. We’re going to build a filterable gallery using the data attribute that came with HTML5.

7 little known but super useful PHP functions – PHP have lots of built-in functions, and most developers know many of them. But a few functions are not very well known, but are super useful. In this article, I have compiled little known but really cool PHP functions.

A beginner’s list of JavaScript gotchas – I consider myself a novice when it comes to coding in JavaScript but lately I played a bit more with this language and stumbled upon a few random things I thought were worth sharing.

Stacking Contexts: What You May Not Know About The Z-Index Property – The z-index property in CSS seems simple enough, but there’s a lot to discover beneath the surface. In this tutorial we’ll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples.

Converting your CSS project to Sass – There is plenty of documentation and know-how going around with starting new projects with Sass and Compass, but taking the time to convert an existing project over could use some help. Here’s a step-by-step guide

Grunt for People Who Think Things Like Grunt are Weird and Hard – Grunt is one of those fancy newfangled things that all the cool kids seem to be using but at first glance feels strange and intimidating. I hear you. This article is for you.

Cross-browser filters with CSS and SVG – For some time now, since Safari 6 and Chrome 18 were released, we’ve been able to use the –webkit-filter CSS property to apply graphical filters to HTML content.

3 Ways to Turn Web Images to Grayscale – We are going to walk through some methods that we can use to turn images grayscale. We’ll also look into the stumbling blocks of each method and near the end, we will combine these methods to achieve a grayscale image that works across different browsers.

Make better websites with browser developer tools – Browser developer tools allow us to inspect, edit, debug, log and profile our HTML, CSS and JavaScript, and include an exhaustive range of features and functionality to aid us in these tasks. You can improve your development workflow by getting to know how these tools work.

How to use HTML5 geolocation – You’ll then learn how to take those co-ordinates and feed them into the Google Maps API to reverse-geocode those values and produce a live in-browser map of your current location, complete with a place marker.

The (probably not) definitive list of CSS features in non-CSS specs – While most CSS features are defined by the CSS Working Group and either included in CSS Level 2.1, or individual CSS Modules, there are a surprising number squirrelled away in various other specifications

Usability, User Experience, Responsive Web Design, Mobile, etc.

From Responsive to Adaptive design – Which is the best of 4 design options for multi-device design? – The presentation started with my outlining the challenges and options that we face today when considering the development of a new digital platform.

Intentional Breakpoints with CSS Transitions – Introducing CSS transitions alongside media queries in your responsive website can smooth out those breakpoints, making some design decisions appear less like a mistake and more intentional.

The Four Waves of User-Centered Design – Technology has evolved dramatically over the years, but focusing on the user needs and business indicators has successfully guided us though frequent and often dramatic industry transitions that came in four distinct waves.

Front-end and UI style guides – This round-up focuses on how others are building CSS/UI style guides and some best practices. Specifically not grouping in pattern libraries in here to demonstrate the many uses of these documents.

The top 25 responsive design tools – This article takes a look at some of the most helpful responsive resources and tools that have emerged that will help you on your responsive journey.

47 Responsive Design Tutorials And Guides – In this session, we are showcasing 47 tutorials and guides for responsive designs that will greatly help you in learning this technique.

Good accessibility is good web page design – In case you think that the internet is becoming a friendlier place for screen readers, go take a look at any modern social network in Lynx, it’s not a very pleasant experience is it?

Why Bother with Accessibility? – Web accessibility is the degree to which a website is available to as many people as possible. Accessibility is most often used to describe how people with disabilities can access the web.

Mobile First Media Objects – The media object by definition is flexible enough to hold images and content of varying dimensions and types, so the above examples may not be a one size fits all solution.

13 really useful responsive design tutorials – We’ve rounded up these really useful tutorials to help you from day one. From typography to imagery and layout to responsive design tools, you’ll be a pro before you know it.

5 Copywriting Tips That Can Dramatically Improve Your UX – Here are five copywriting tips that you can quickly put into practice to make your Web site’s UX design much more effective.

Unusual Responsive Menu Designs for More Web Beauty: Examples and Tutorials – I’d like to present the result of this tendency for originality regarding such important elements of any website design as menu. Check the following unusual responsive menu designs: examples and tutorials.

Accessibility isn’t a buzzword, it’s personal – Accessibility isn’t about screen readers, contrast, or big fonts. Accessibility is about people. When I say people I don’t mean those people over there with a big “disabled” label.

Holistic Performance – Bad performance online is not a technological problem; it’s a cultural one. Only by thinking about performance throughout the process can we reverse the trend and start making experiences that delight our users, not frustrate them.

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

Anatomy Of A Grid-Based Website – The existence of grid-based design approach for the print dates back to the post-world war era. Grid-based website offer a visual balance and a hierarchy of importance often eliminating anarchy and confusion.

How to Decide on a Color Scheme for Your Website – Color goes beyond aesthetics and has possible effects on the behaviors of your website’s viewers. Deciding on a color scheme can be a difficult choice, with so many combinations and choices it can be hard to choose something that represents you.

10 small business web design disasters to avoid – Creating a website requires a large helping of planning and strategy as well as a good pinch of skills thrown in. To avoid web design disasters, make sure you keep an eye out for this list of disasters to avoid.

What’s new for designers, December 2013 – What’s new for web designers and developers’ includes new web apps, graphic design tools, inspirational resources, web design tools, icons, typography resources, and some really great new fonts.

A Survival Guide To Web Fonts – Basic type design became something of a forgotten art, but it’s come back into vogue again as a way to fight software bloat. Then again, it also helps to understand the ins and outs of modern embedded typefaces as well.

10 Fresh and Handy Tools for Developers – a collection of tools which will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of your project.

Designing A Website For 2014 – As we have been working to give our website a fresh coat of paint, I’ve come across some current design trends that we may or may not implement, but wanted to share with you.

They Say You Shouldn’t Count On Photoshop Anymore When Designing Websites – HTML and CSS are designed to utilize your browser’s capabilities to create things like fluid layouts, and progressive enhancements and animations.

A Comprehensive Guide to Effective Portfolio Websites – In this article we’ll take an in-depth look into the topic of portfolio websites. We’ll start by looking at keys to effective portfolio sites. Then we’ll move on to look at the options for creating your own portfolio site.

Unique Ways to Display Data on Your Site – And Why Beautiful Data is All the Rage – There is now so much data available that it’s getting difficult to convey. Every site we visit has its own set of with numbers, statistics and facts and often those numbers are dizzying.

15 jQuery CSS Plugins to Speed Up Your Coding – instead of using bloated plugins which have features you will never use by which to produce certain elements within your web project or page, the following jQuery & CSS plugins will allow ease of workflow, and produce similar if not better results within your projects.

Quick Tip: Embedding New Google Maps – The all new Google Maps was made openly available to the public back in July, but it’s still a preview of what the final product will be and therefore lacks a few familiar features.

Designing E-Commerce Websites Properly – Basically, the website selling the e-commerce products has to be focused on the clients’ specific needs when buying online. Every step of the shopping and buying process should be designed to give customers a great experience.

The essential ingredients for perfect parallax UX – There are all sorts of options for engaging users, but one of the most popular is parallax scrolling. Parallax scrolling uses a script to move elements on a webpage at different rates, creating the impression of depth.

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

Best Free Fonts of 2013 – time for our “Best of 2013” series, where we look back over the past year and pick our favorite freebies and resources. To kick things off, we’ve went back through all of the free fonts we’ve discovered in the past year.

Visual Style Guide Template for Logos – With a style guide, you can guarantee that your logo will look its best and stay consistent at all times to help build your brand integrity. Create alternate layouts, color schemes and complimentary typography so others know what logo to use in which situation.

100 Photoshop tutorials to level up your skills – Love it or hate it, Photoshop continues to be the design software of choice for millions designers across the globe for a wide range of tasks, including photo editing, graphic design, typography, illustration, 3D modelling and animation.

The designer’s guide to special characters – When it comes to clear writing, the importance of the mechanics of spelling, grammar, and proper punctuation are always stressed. However, the importance of using the correct typographic special characters is often overlooked.

Get started with type design – As a designer, once you develop a passion for typography, the logical next step is to want create your own lettering, and new technological developments are making this easier than ever.

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

15+ Places to Promote Your Blog On The Web – No matter how good your content is, earning a regular readership requires promoting your blog to audiences who would find it useful. Where should you be promoting your blog to help connect with readers and help them fall in love with your content?

Warning: If You Have A Facebook Fan Page, Read This… – Then I stumbled on an article from AdAge where Facebook openly states that fan page owners should expect their organic reach to continue to decline over time… and the best way to get your stuff seen is to pay for reach.

How To Blog Your Way To More Personal Brand Authority – For many “soloprenuers” and small business owners, the life and death of your online reputation can rely on this very simple fact: You must be blogging.

How to Use Tumblr for Marketing – The beautiful thing about Tumblr is that it makes it really easy to share your content with millions of Tumblr users… so you can get a big audience without spending a ton of money on marketing.

The Complete Guide to Designing for Email -Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it’s worth employing as many tricks in the book as possible to make sure your message gets through.


How to Display “Featured Content” in WordPress – You probably have stories in your blog you want to highlight to your readers. This is commonly referred to as “Featured Posts” or “Featured Content”.

How to Use Masonry to Add Pinterest Style Post Grid in WordPress – We hope that this article helped you understand how to use post revisions to undo changes in WordPress. Have you ever used post revisions?

How to Fix Image Upload Issue in WordPress – This can happen due to a number of reasons. Its possible that your web hosting provider ran an upgrade and something caused the file permissions to change. It is also possible that a hacker made those changes while uploading a backdoor hack

Spam Filtering with Akismet – Today, spammers target everything. Your contact form is no exception. Contact Form 7 provides several ways to prevent spam, and cooperation with the Akismet spam filtering plugin is an important part of the prevention strategy. In this article, I’ll show you how to implement Akismet on your contact form.

Best of Best WordPress Tutorials of 2013 on WPBeginner – Over the course of the year, we wrote tons of WordPress tutorials. We thought we should compile a list of our favorite ones. Let’s do a year in review of WPBeginner.

5 Ways to Optimize your WordPress Website – The benefits of having a well-performing website are many but the most important ones are: improved user experience, better ranking in the search engines and last, but not least, lower hosting expenses.

Search Engine Optimalization, Conversions, Analytics, etc.

How to improve your organic SEO and beat the paid search results – With competition for user attention so high and paid search results so prominent. So few organic results appear above the fold, that they may be invisible to users unless a top organic position is held.

How To Simplify Mobile App Data With Google Analytics And Tag Manager – As a developer, business owner or marketer, you need to know how to gather data and how to do it efficiently and in a scalable way. Furthermore, you need to understand what that data means and how to present it.

What are ‘nofollow’ tags and when should they be used in SEO? – ‘Nofollow’ tags are an HTML attribute that tells search engines not to pay any attention to links that appear on a webpage. I thought it would be helpful to give an overview of why they’re important and in what context they should be used.

Why Profiling is More Important to User Experience than Search – Whoever knows the customer best. Don’t make them search. They won’t do it if they don’t have to. They’ll stick with whomever figures that out first. Let that be you. Let them tell you who they are.

14 Insights into Semantic Search and SEO ~ he term semantic comes from linguistics and is all about finding meaning in language. Apply this to search and you get semantic search, which seeks to provide more accurate results.

What is Mobile SEO? [FAQs] – What should you do to rank high in mobile searches? And how are search engines responding to the trend of ever-growing mobile web usage? You’ll find answers to all of these questions below.


12 Awesome CSS Tutorials – It’s crazy and amazing that CSS can now handle a lot more today them it did 5 years ago and codrops is doing really amazing work with CSS as you will see in this post about 12 Awesome CSS Tutorials.

Progress Button Styles – A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Easy Display Switch with CSS and jQuery – I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may find this helpful when browsing website articles, e-commerce products, and other similar galleries.

Freelance, Business and Workflow Related Stuff

How Freelancers Can Commodotize Their Assets and Earn Passive Income – I’ve noticed more and more people complaining that they don’t have enough time to focus on what they love. If you’re one of those people, there is another option: passive income.

Tips for Finding Flow – Flow is also a priceless state of mind when it comes to work-related tasks. When someone is in flow, they can get a lot of tasks accomplished, do it well, and often quicker than expected.

Why You Should Use Continuous Integration and Continuous Deployment – Two best practices that have gained a lot of traction over the last few years are Continuous Integration and Continuous Deployment. Here’s some quick definitions.

How Designers Can Hustle for More Business – 3 Things You Can Do Right Now – When it comes to marketing and promoting yourself or your agency, there’s probably a few things you’re doing right now. So how can you stand out, get more referrals… and get more business?

How to Deal Effectively with Drastic Deadlines – Fortunately, there are some tactics you can use to effectively deal with most deadlines–even drastic ones. In this post, I take a look at 19 of those tactics–focusing on what you can do before, during, and after your project.

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

How Important Is To Have Always Visible Navigation? – Mobile devices are quickly becoming the de facto way to access the web if they aren’t already there. When people are visiting our sites they’re more commonly visiting on a smartphone or tablet where we’ve chosen a responsive pattern that hides navigation by default.

The Line Of Least Resistance – We need to permit ourselves to keep the vision going — from the ones whom we got it from, to the ones coming to get it. We all have the tools to do it. We just need to be responsible with them.

Things I Wish Someone Had Told Me When I Was Learning How to Code – If you believe that with time and patience you can figure the whole coding thing out, in time you almost certainly will. You’re a lot more likely to find success in the end if you have a clear idea of why you’re learning to code in the first place.

The Responsive Hover Paradigm – While content can be our top priority, let’s not forget that our designs and interactions, hovers included, can have a great positive impact on how visitors experience our site. Hover wisely, friends.

Designing Products That Scale – The design system and style guide behind Salesforce1. Doing product design in a huge organization is tricky. Clear, constant communication is imperative.

– § –

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.