.. Your Daily Design Dosis

Tweet Parade (no.04 Jan 2014)

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

LESS vs Sass? It’s time to switch to Sass – I like to imagine LESS as the training wheels for beginners, or perhaps a gateway-drug into preprocessed CSS. Sass is the next level, a tool for the slightly more experienced front-end developer.

5 Ways that CSS and JavaScript Interact That You May Not Know About – CSS and JS can interact more closely than the basic JavaScript frameworks will allow. Here are five ways that JavaScript and CSS work together that you may not know about!

10 jQuery snippets every designer should know – For all the options open to us, there are some snippets we tend to come back to time and time again. Today I’d like to give you 10 snippets that everyone will use time and time again.

15 Useful CSS Snippets for Developers – In this article we are presenting 15 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks.

A Dive Into Plain JavaScript – Today, I’m going to share some of the basic things I’ve learned during the past years, which will hopefully also help you to dive into the world of plain JavaScript, making it easier to decide whether or not you will need jQuery in your next project.

Getting started with gulp – Step aside Grunt, there’s a new task runner in town. Gulp is an intuitive, code-over-configuration, streaming build system. Gulp uses node.js streams, making it faster to build as it doesn’t need to write temporary files/folders to disk.

How They Did It: Typekit’s New Homepage – All in all, the new Typekit landing page is a polished and unique execution of a refresh in web presence that accompanies a shift in product offerings. With a compelling content flow and well executed artistic direction.

CSS Regions Considered Harmful – For those who believe in meaningful HTML tags, responsive web design, and compact CSS code, the introduction of CSS Regions is not good news. Presentational elements is not the only problem with CSS Regions

How to use the Notification API – To create a new notification for the user we need to create a new instance of the Notification object and this object takes two parameters, it is supported by Chrome, Mozilla and Safari.

Not Using CSS Preprocessors? You Should Be – CSS preprocessors provide us many of the features that would ideally have been included in CSS from the beginning. There are a number of different CSS preprocessors, with the most popular being SASS and LESS.

CSS animation-fill-mode – We’re always super excited to get into CSS animations because, quite frankly, they’re incredibly awesome. One overlooked animation property, however, is the animation-fill-mode property.

HTML5 Input Types Alternative – As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say “Yes”, I think they are not yet ready for any real life project.

Web Performance Tricks – Beyond the Basics – There are many ways to improve the performance of your app, and as is often in life – the whole is greater than the sum of the parts. Implement some of the measures we’ve mentioned, and you’ll get a nice, tangible improvement.

Styling SVG with CSS: Capabilities and Limitations – SVG is the new standard for vector images in the browser. Vector editors such as Adobe Illustrator allow to directly save to that format and modern browsers have no problems to properly display SVG.

Flexbox for formsBoom, form markup and styles, easier than ever. The input and button take up the full width of the parent. No inline-block, no floats, no hard-set widths.

Semantic web: Pros and cons -The semantic web is usually related to the web 3.0, and it is a mixture of linked information so it can be easily processed by machines to deliver better results to users. It’s main idea is to add semantic metadata to every piece of information.

10 Tougher Tasks to Reduce Page Weight – If your pages are still obese, there are more drastic dieting options you can contemplate…

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

RWD Ratio in Top 100,000 websites – This test implies Responsive Web Design is no more prevalent on the long tail than it is in the top sites. This may surprise some, since RWD is touted as – amongst other things – a lower cost way to tackle mobile, and so the adoption in the long tail could have been bigger.

StartUps: Your Focus Should Be On Design – Should you and your team shift your primary focus on Design, before investing in anything else (digital marketing, sales, office and staff expansion etc.)?

Adding and Removing HTML Classes Upon Request With jQuery – But when it comes to building an interactive website that allows your visitors to engage with it, you might need to modify, insert, and remove the HTML classes upon request. You can do this with jQuery.

REMs And Viewport Measurements — Why You Shouldn’t Use Them Yet – I’m excited to use rems, though not until browser support is complete. The fallbacks don’t make any sense to me. They defeat the point of either an easier calculation or using relative measurements.

Designing Mobile First [Design with Sketch] – More than 50% of the Web’s traffic now comes from mobile. If you didn’t build a responsive site, you’re already losing half of your users. The good news is that with tools like Sketch, Web Inspectors and CSS3, it’s effortless

Scrolling is easier than clicking – This affects a lot of things, like whether to place information further down a page or whether to place it behind a drop-down, button, or link. Should we break up our articles like news sites onto 7 different pages?

So, You’re Writing A Responsive Images Script – I don’t intend to discourage anyone from writing a new responsive images script, by any stretch of the imagination. Each one that comes along helps us all understand the problem a bit better, ..

5 UX Tips for Designing More Usable Registration Forms – When designing registration forms, keep in mind that they are for the user and the smoother the registration process, the more delighted your customers will be. Here are some tips to make the most of registration forms.

11 Resources to Help You Create a Flat Design Responsive Site – As it turns out, flat web design is just as much about trend-setting as it is about improving the user experience. Let’s talk about why and how, and then I’ll share 11 resources to help you create your own flat style, responsive site.

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

New Year, New Site? Here’s Your Checklist for a Website Redesign in 2014 – It’s a new year – time for a fresh new start. For many people, that means it’s finally time to give that tired, old, difficult-to-update website a facelift. But where do you start?

3 reasons we should stop using navigation bars – Navigation bars are presented in many different ways. Lately, sticky navbars have become very popular. Unlike the proposed effort, this nav bar is always present on the page.

40 CSS Tools to Improve Your Productivity – When it comes to simplifying one’s workflow and improving CSS write-up there are certain CSS tools which developers and designers must have.

CSS Level 4 And More: What’s Coming In 2014 – At times it would be nice to stop and catch a breath, but the year ahead will offer no such opportunity: if anything, the pace of innovation will only increase.

A More Modern Scale for Web Typography – In RWD, the proportions and rhythm of your body, headers & measure deserve as much attention as margins, floats & media queries. So I’ve come up with a responsive relative scale to help you achieve a more readable page regardless of device or resolution.

30 web design tips to make your life easier – Packed with professional know-how, you’ll discover secret features of well known tools, the beta services that the design industry is buzzing about and CSS tricks that make page design for multiple platforms easy.

44 Flexible Grid Tools For Responsive Websites – Creating responsive website is a pleasant and refreshing shift but it requires loads of hard work and efforts. Such websites need to have two important components; one of them is a flexible fluid grid.

The Technology Behind the NYTimes.com Redesign – The NYTimes.com redesign is more than a fresh coat of paint — in addition to the new look, our article pages also rely on a new framework and codebase to run faster while making future changes easier.

15 Fresh and Free Web Development Tools – These tools will surely going to help designers and developers to achieve the desired goals within a quicker time span. If you like to add more tools, please let us know in writing.

Wireframing is NOT prototyping – With the rise of UX role in the industry, wireframes have played increasingly leading role in the modern world. Wire-frames are not meant to deliver a spec, do your homework before you do wire-frames.

50 freebies that you have to try – We’ve got lots of different resources of all kinds. You’ll find beautiful icon sets, perfect for the web, applications and social sharing. There’s JavaScript and jQuery plugins, including sliders.

How Simplifying Your Web Design Can Lead to Better Conversion Rates – A reductive approach to your web design can do wonders for your site’s conversion rates. Here are a few proven ways to simplify a web design in order to improve its conversion rate performance, as well as its usability.

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

A Collection of 23 Amazing and Free Fonts from Behance – A list of amazing free fonts that the can be found on Behance. Most of these fonts have been created in 2013, some a little before that.

The A to Z of Adobe Illustrator – The Adobe Illustrator toolbar is jam-packed with useful tools you may have used a million times or that may be entirely unfamiliar to you. This A–Z list breaks down every tool in the Illustrator toolbar.

Logo 101 – Before I unleash you back to where you were heading, I would like to give you a brief overview of the design process involved in creating a logo. Here are the basics you absolutely need to know.

10 Things You Should Know About the Crop Tool – While the Crop Tool is one of Photoshop’s most-basic tools, you might find that there is more to this tool than you might know. In this tutorial, we will explain 10 useful things about the Crop Tool.

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

The Underdog’s Guide to Building an Unforgettable Blog – As a blogger it’s easy to focus on volume – more web visitors, more shares, more comments, more email subscribers. Because that’s the proof of your popularity, isn’t it?

Is your blog design ready for 2014? Four ways to tell – It’s that time of year again. Time to take a good long look at your blog and reflect on what’s worked well, learn from what hasn’t, and set goals for what will.

15 Powerful Social Media Tips – This is an exciting time for social media users and brands alike. Old patterns of user-brand interaction are breaking down and new ones, better ones, are emerging.

How to Get More Traffic to Your Blog Without a Ton of Extra Effort – In this article, I’ll share 8 different techniques you can use to get more traffic and to make your blog grow itself.


Creating a WordPress Theme from Static HTML: Adding Navigation – We’ll continue to work on the header.php file. You’ll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen.

4 brilliant WordPress techniques you need to know – It used to be that many of those pages were on smaller blogs, but WordPress is becoming a more and more sophisticated tool and, with more complex demands, developers are bringing some of the most up-to-date development techniques to WordPress sites.

2 Ways To Add New Navigation Menus In Any WordPress Theme – In this tutorial, we’ll llook at adding an extra nav menu using 2 methods.From your child themes functions.php file and also adding some of the code directly to a template file.

9 Most Common Misconceptions About WordPress – Usually these misconceptions are based on what they have heard from others rather than trying WordPress themselves. In this article, we will try to address some of the most common misconceptions about WordPress.

20 WordPress Shortcodes and Plugins You Might Want To Try – in this post, we’ll showcase 10 WordPress plugins that add shortcode functionality to your blog, along with 10 codes that you can add yourself.

How to Add Sticky Posts for Categories in WordPress – By adding sticky posts on category pages you can display featured posts from that particular category. In this article, you will get to learn how to add sticky posts for categories in WordPress.

How to Setup the W3 Total Cache Plugin – W3 Total Cache is one of the leading caching plugins available for WordPress, along with WP Super Cache, with both receiving downloads in the millions.

Maximise your WordPress accessibility – The more accessible your WordPress site, the more people can see it, the better it is for you. Here’s how to go about maximising your accessibility. Is your WordPress site accessible?

Search Engine Optimalization, Conversions, Analytics, etc.

Nothing, nada, ne rien, njet!


Coding a Magazine-Style Blog Post Layout with CSS3 Effects – This tutorial can provide a decent starting point for any responsive blog layouts you may wish to construct. This is focused around a single page using 2 columns with a wide header.

Dot Navigation Styles – Today we’d like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion.

25 Excellent CSS3 Shadow tutorials – CSS3 Shadow Tutorials assist a designer to give a drop shadow inward or outward. With the application of CSS3 coding present in the CSS3 Shadow Tutorials, a designer can simply get a drop shadow.

40 Tutorials And Tools That Will Make You A CSS3 Master – Having a tough time in learning CSS? Well, not to worry as here we are presenting 40 excellent and extremely useful tutorials, tricks as well as some tools to make you a CSS3 master.

Freelance, Business and Workflow Related Stuff

Dealing With Workaholism On Web Teams – Workaholism is often confused with hard work. Some people who work on the Web seem not only to disregard its dangers, but to actively promote it. They see it as a badge of honor—but is it really?

The Importance of Creative Brief in Designing an Effective Website – A successful website is more than just a creative effort. It requires a lot of planning and forethought to conceptualize and deliver a website that meets all the needs and requirements of the client.

How to learn more in 2014 – To keep up in this industry, You need a heightened sense of curiousity and a desire to keep learning. It’s not easy keeping up.

6 Common Freelancing Problems That Using a Contract May Solve – If you can’t get a formal contract with a client, at least get your agreement in writing. An email recapping a telephone conversation you had can work.

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

Design solutions, not decorations – Design is not about creating something for your viewing pleasure. It’s about the challenge of solving a problem, something that doesn’t quite work or just feels ‘wrong’.


– § –

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

In this tutorial, you’ll continue to work on the header.php file that you created in Part 2. You’ll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen.

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.