.. Your Daily Design Dosis

Tweet Parade (no.45 Nov 2013)

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

Icon fonts and user-defined style sheets – Adopting this technique means the page gets the benefit of using icon fonts, but also ensures that people using user-defined style sheets to improve readability for accessibility also get the information.

Which CSS Measurements To Use When – Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where, and when, on their pages. What follows is a list of suggestions, not absolute rules.

Tinted Images with Multiple Backgrounds – Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Gradients are technically background-images and thus not subject to the rule where they can’t come first (be top) in the stacking order.

Improve your CSS with the Sass @extend directive – Of the core concepts found in the preprocessor @extend stands out for three reasons: it has the highest potential to drastically change your workflow; misuse is dangerous to the health of your stylesheet; and newcomers struggle with it far more than other Sass functionality.

Creating Non-Rectangular Layouts with CSS Shapes – I hope this article helped introduce you more to the technical part of getting started with CSS Shapes and Exclusions. Combining CSS Shapes with other cutting edge CSS technologies like Regions opens the door to a new world of creativity.

Transformer Tabs – There are loads of variations of course, but it’s one of the most ubiquitous navigation design patterns out there. When arranged in a horizontal row, it is also one of the least small-screen-friendly design patterns out there.

The beginner’s guide to Sass – Sass is extremely powerful and I have only covered the basics here. With traditional CSS, we’ve all encountered the copy and pasting or find and replacing tasks which waste so much time in the development stage of your project.

An In-Depth Introduction To Ember.js – I hope this long article has given you a better understanding of this awesome framework. But the truth is, we’ve only scratched the surface. There’s so much more to cover.

cite and blockquote – reloaded – The definitions of the blockquote and cite elements in the HTML specification have recently been updated. This article explains what the changes mean for developers.

Presentable Accessibility Elements with CSS – creative handling of elements usually only thought of as helpers to screen readers.  Let me show you how we can make those hidden elements useful for all users.

6 Tips for Creating AJAX-Heavy Websites – When you plan ahead and code flexibly, creating an AJAX-powered website is probably easier than you think. Keep in mind the tips provided in this post and you’re 80% done.

CSS Overlay Techniques – There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique’s styles with their pros and cons.

10 best practices from top coders at Google, Pinterest & more – In the spirit of collaboration, I asked some of the most talented web and mobile programmers in my network for their tips. You don’t become a great developer overnight.

10 Useful & Handy PHP Snippets for Developers – These php snippets offer a variety of handy functions which can ultimately end up saving you time. Today, we’ve collected 10 useful and handy php snippets which you may find useful within your coding endeavors.

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

Information Architecture: Beyond Web Sites, Apps, and Screens – Methods and best practices help IA practitioners solve real-world problems—the sorts of practical problems that many of us confront on a daily basis.

UX Design: the user is not enough – For a successful project the focus on the user is not enough: we also need real product experts who deeply understand the business challenges of the project.

Responsive design, screens, and shearing layers – focusing on that flexible layout first, I think we’ve got a strong foundation for the future. Responsive design might begin with the screen, but it doesn’t end there. I can’t wait to see where it goes next.

Responsive HTML Emails: a Different Strategy – A mobile design strategy that doesn’t address one of the most popular mobile email clients isn’t a very good strategy. So we thought… what if we took a different approach?

Responding to environmental lighting with CSS Media Queries Level 4 – The Media Queries Level 4 specification introduces four interesting new media features: script, hover, pointer and luminosity.

Killer Responsive Layouts With CSS Regions – CSS regions enable us to disperse content across multiple containing elements. They provide a flow, which consists of content that may appear within multiple elements, and a region chain, which is the collection of elements the flow is spread across.

In RWD We Trust – Is this trust misplaced? – I am sure its adoption will continue to increase, but whether a business will be able to really up its profits with the adoption of RWD is really debatable.

CSS Image Setimage-set() function seems to be a promising solution for serving images in high-res. But, with the current limited browser support, image-set() is not ready to be implemented in a live site.

The 4 Design Assumptions Costing You Money – While assumptions may save you time now, the time saved won’t be worth all the money you’ll spend and trouble you’ll go through to fix them later. We’ve found that there are four common assumptions that you’re better off testing instead.

Design responsive emails with brand new Ink – A powerful new resource for designers to easily produce responsive HTML emails that look and work great across more mobile platforms than ever, including Outlook.

The Next Big Thing: Responsive Icons – Honestly, this topic sounded a little bit strange to me when I first learned about responsive iconography, as we have recently adapted icon fonts in order to make sure they scale well for various device.

User Experience Belongs to Everybody – It means everyone sweating the details of their piece of the user experience. Because that’s the only way – together – that we can make our products awesome.

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

When Flat Design Falls Flat – I believe that a few prominent flat designs sacrifice usability and best practices such as consistency for the sake of aesthetics — and this is what I’ll primarily be talking about.

Using BrowserStack for Cross-Browser Testing – BrowserStack.com aims to offer this via it’s browser-based virtualization service and in this article we’ll cover the service and how it helps tackle the cross-browser testing problem.

How to Build a Website that Adds Value to Your Brand – Since building your website is usually the first step towards the entire subset of work that goes into building your brand, here are ways to make your website work for you to add value to your brand.

Useful Tools for Testing Your Code Snippets – Following tools are let you write, debug and test your code easily in various languages (php, html, javascript, css, Ajax etc.) and help you to simplify your development tasks quickly.

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

Typography 101: Web vs. Print (and Why It Even Matters)  – here are a number of strategies essential to successful typography on the Web, including the careful use of macro- and micro-typography.

10 Bad Habits to Break in Photoshop – Design & Illustration – In this tutorial, we will explain 10 bad habits that you can break in Photoshop to help you work a bit more efficiently.

30 Stunning Photoshop Tutorials to Take You to the Next Level – Here you’ll find the simplest tutorials to work with layers and color correction along with difficult photo manipulations that might take more than one hour to complete.

5 Free Tools To Support Graphic Designers – Graphic design is a beautiful field – however, in order to succeed in this industry you need design skills, training and a variety of useful tools that will help you create outstanding images and banners.

45 New Adobe Illustrator Tutorials for November 2013 – A list of step-by-step tutorials that might come of a great interest to you, in case if you’re searching for new methods of enhancing your personal skills and to make your work with this program more efficient and easy.

How to Change Your Logo without Damaging Your Brand – Changing your logo, though, is not a quick task. Change too much and you may confuse current and prospective customers. Change too little and you will not accomplish your goal for revamping your logo.

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

Don’t Make These Blogging Mistakes – Today’s post is written with an aim to change and redefine my own blogging strategy. Besides, it’s with the hope that others learn from these mistakes and make a successful blogging career for themselves.

One Activity You Should Do On Your Blog Every Day – I’ve been paying as much attention to my archives as I have to writing new content. And it’s paying off driving more traffic to old posts, finding new readers and importantly, improving the quality of content on the blog as a whole.

20 Free Themes for Ghost – No other CMS over the last few years has received such universal acclaim and been able to generate such excitement, as we have witnessed this past month. Not since WordPress anyway.

Eight Unconventional Tips for Better Blog Post Ideas – Much of the advice out there is very useful – like using mindmapping, or setting side time for idea generation. So today, I wanted to share some tips you might not have come across until now.

Ghost Blogging Platform Review, Good Bye WordPress? – Ghost is world’s first blogging platform, that is built with  javascript (Node.js). Manual installation is a little bit complicated & may be confusing for beginners.

How We Grew Our Blog to 5,000+ Subscribers in Five Weeks – If your product doesn’t deliver massive value to your users, then no amount of growth hacking will help you succeed. Our topic had to be useful to our audience.

The 10 most common mistakes of blogger outreach – The practise of blogger or influencer “engagement” is one of the most widely-used tactics in marketing these days, done by almost everyone, from PR agencies to SEOs, social marketers to spammers.


10 Things You Should Do When Inheriting a WordPress Site – Inheriting an existing WordPress site comes with a lot of responsibilities. In this article, we will highlight 10 things you should do when inheriting a WordPress site.

How to Make WordPress Sites Load 72.7% Faster – Here is what an optimized core for a WordPress website includes: Reliable DNS, Hosting configured specifically for WordPress with a smart origin caching strategy, a clean theme that is devoid of bloat and a plugin list trimmed of fat

Customize Your Own WordPress Theme Through Functions.php – You can use functions.php file to extremely change the features and aspects of your wordpress theme instead of using plug-ins that sometimes are malicious and can cause many inconveniences to your site.

The Future of WordPress Widgets: A Better UI With Real-Time Previews – The Better Widgets and Widget Customizer plugins are paving the way for the future of WordPress widgets. If you’ve ever been frustrated with widget management, you can breathe a sigh of relief, because some very nice updates are underway.

10 wp-config Tweaks To Improve Your WordPress Site – In this tutorial I am going to show you 10 quick edits you can make to your wp-config file to make your site more secure and make your life easier.

Search Engine Optimalization, Conversions, Analytics, etc.

Stop Trying to Rank for Keywords! Use the Dandelion Theory Instead – Putting SEO and PPC together now, basically what you’re saying is that just focusing on core keywords is a mistake because most the conversions that a business can get are going to be located in the fluffy halo of the dandelion

Why Google authorship is so important for the content you create and how to set it up – Google authorship, a highly effective way of connecting and promoting content on search results pages. It’s free to use, easy to set up, and worth the effort—especially for us who dream the Google dream.

Google’s Matt Cutts: Don’t Worry About An SEO Down Side To Responsive Design, There Is None – In a video released today by Google’s head of search spam, Matt Cutts, he said you don’t have to worry about there being a down side, related to SEO, when using a responsive design approach for mobile web sites.


Code a Simple Github API Webapp using jQuery & Ajax – In this tutorial I want to demonstrate how we can build a remote Github webapp using jQuery and Ajax. You enter a username and using the API we pull out some information about the user and their profile stats.

How to code a Teehan+Lax navigation – The navigation bar works as follows: it’s being hidden once you start scrolling. As soon as you scroll up a few pixels it is shown. After that, when you scroll down again it gets hidden.

Whirling CSS3 dropdown menu – a truly new and unique design. In today’s lesson, we will create a new CSS3 drop-down menu with new effect: when you hover on the upper menu items, the submenu items appear whirling.

Easily create stunning animated charts with Chart.js – Chart.js, a JavaScript plugin that uses HTML5′s canvas element to draw the graph onto the page. It’s a well documented plugin that makes using all kinds of bar charts, line charts, pie charts and more, incredibly easy.

Building a Single-Page Dynamic Website using AnimateScroll.js – In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations.

Animated SVG Icons with Snap.svg – Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.

Build a Freaking Awesome Pure CSS Accordion – What we’re going to build is a pure CSS horizontal accordion slider. You’ll be able to insert as many slides as you want, each with unique content and each accessible via a click event, all without a lick of JavaScript.

Freelance, Business and Workflow Related Stuff

5 Signs When You Should Take A Break  – Taking breaks goes a long way to make you a better freelancer. It gives you more emotional stability, keeps your health at check and ensures that you can reload your creativity bar to produce better, and more engaging results.

How to design for maximum traction – In this article, I’m going to share a few simple, but important tips to help you design a site that performs its primary duty: Build traction with your audience and convert them to customers.

My Design Process — Deployment & Improving The Overall Process – The feedback/iteration loop makes it quicker to get to the finished design, shortens development time, and keeps clients more focussed and involved.

How to quote a project you’ve never tried before – Once you make up your mind to go for it, you’ve got an even bigger challenge: how do you quote a project you’ve never done before? Not only do you need to determine pricing, you also must guesstimate a time frame.

Growing Your Audience as a Designer – Being a designer with a devoted following is about making friends and providing value to people. That’s it.

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

“Offline First” – In other words, assuming that someone has a persistent, robust data connection is an artifact of the desktop-focused web, and we need to refine it.

Interfaces in need – So what I’d personally love to see are different types of redesign concepts of interfaces that have never received much love. They are all around us and ripe for the picking.

Building A Successful Product: Start Small And Listen – “You can then begin to develop additional features based on what customers actually want and need, rather than on what you think they want and need.”

– § –

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.