.. Your Daily Design Dosis

Tweet Parade (no.47 Nov 2013)

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

Progressively drawing SVG paths with D3.js – I wondered how on earth they were doing this. I knew it wasn’t flash, so I opened the dev tools and after a bit of digging, I saw they were using two stroke SVG properties to create this effect.

Automating your JavaScript workflow using Grunt – Using tools like Grunt to improve your JavaScript development has been popular for quite a while. It’s not a surprise since it will truly improve your workflow and takes care of pesky tasks we so hate to do.

Bootstrap without all the debt – These shortcuts are a significant part of why Bootstrap draws so much criticism from some circles; paradoxically, they’re also a large part of of what has made it so popular. But that’s another discussion.

How to use CSS filters – CSS Filters are a powerful tool that allow us to achieve some amazing visual effects with our elements; they are especially great for hover effects. Filters provide us with a method for modifying the rendering of a basic DOM element.

Namespaced Events in jQuery – You might want to remove a listener because you don’t care to perform any actions on that event anymore. But let’s say you’ve attached several listeners to the same event. How do you remove just one of them? Namespacing can help.

HTML5 features with GWT Elemental – GWT Elemental is new library and there is absolutely zero documentation on the library. In this article we use some HTML5 features like WebWorker, WebSockets andFileSystem APIfrom gwt-elemental library.

Animating from “display: block” to “display: none” – It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.

Avoid Making Silly CSS Mistakes Like These – Mistakes can be made in CSS and HTML files whether the developer is a beginner or an experienced coder. Most of these mistakes come from carelessness or in some cases lack of experience.

CSS3 Box Model behaviour – Any html element on a web page can be represented using a box. These boxes are made up of basically four components which affects their representation on a page. This four components are Content, Padding, Border and Margin.

CSS Preprocessors and Parent Selectors – Working on web sites and web apps that require RTL support is hard because ensuring correct display in RTL is made more difficult by the fact that we either don’t have the CSS properties and values to do so or that the existing support isn’t widely used enough yet.

DevTools Snippets – The snippets can be used in any browser console. Chrome provides a ‘snippets’ feature that can be used to manage the scripts, while Firefox has a ‘scratchpad’ feature that lets you run, edit, and save chunks of JavaScript.

10 Best HTML5 Code Snippets to Simplify Your Tasks – In this article, we have compiled 10 HTML5 Code Snippets which will help you enable HTML5 markup on your site and web related projects quick and hassle free.

10 Best HTML5 Code Snippets to Simplify Your Tasks – In this article, we have compiled 10 HTML5 Code Snippets which will help you enable HTML5 markup on your site and web related projects quick and hassle free.

Deploying Private Repos Automatically with Github – I present to you here an alternate approach that attempts to strike a reasonable balance between simplicity, convenience, and security.

Introducing Recess – We all make mistakes when creating our code, it’s part of being a programmer and having a linter that pulls us up when we make errors is always a great idea. It’s called Recess and it can help us keep our CSS code clean and super manageable.

The Elusive :target Feature Test – :target is a CSS pseudo-class that is often overlooked. It’s a very useful tool in the performance toolkit for moving content hiding from JavaScript up the toolchain into CSS. “Anything CSS can do, JavaScript can do worse”.

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

HTML Email Design with Fabio Carneiro – Using the proper mix of HTML, CSS, and media queries, you can design an effective message fit for laptops and mobile devices, no matter what kind of content you need to send.

Update: Banning Blue Links on iOS Devices – I’m sure you’ve noticed it before: phone numbers, addresses, dates, and—sometimes seemingly random—words like ‘tonight’ automatically turn blue and underlined in emails viewed on an iPhone or iPad.

20 Reasons Why a Mobile Website is a Must for any business! – In this day and age, every company needs to have a mobile-friendly website if they want any chance of connecting with mobile consumers.

Don’t cut corners when coding UI – “The devil is in the details,” people tend to say. When it comes to designing a product, it is often very true. The more attention you’ll pay to all the little things, the more pleasing your product will be.

Why Our Float Based Approach To Layout Should Evolve – How we develop responsive layouts is going to be how we think about our html structure. Responsive design calls for more flexibility and modularity, but the way we’ve been structuring html is far less modular than we sometimes realize.

Grade components, not browsers – To properly define and set expectations for how our sites should work across browsers and devices both now and in the future, we’ve made a simple change to the way we define browser support.

Techniques for Responsive Typography – When it comes to responsive type on the web, there’s more to do than just resizing the text’s container and having the text reflow inside of it. This in-depth article covers various techniques for making text responsive.

How to Maintain Image Aspect Ratios in Responsive Web Design – As far as I’m aware, the padding trick was first highlighted by Thierry Koblentz to create responsive videos, but the same concept can be applied to images or any other content.

Techcrunch – Our merry group of makers had the opportunity to revisit what the modern Web design process looks like, and this post is going to step through how we did things.

7 Best Practices of Responsive Web Design – Considering the rate at which the mobile web is growing, it’s becoming crucial that your website be ready to accept visitors who are coming in from a widely assorted array of different devices and screen sizes.

Why Responsive Images Is So Hard – This problem is largely solved in CSS. If the image being added to the page doesn’t need to be in the markup, you can use media queries in CSS to handle the conditions and change the image accordingly.

Responsive Design Won’t Fix Your Content Problem – I spoke to a digital team at a large corporation a while back, and outlined some of the many challenges they were likely to face in creating, revising, and publishing their content so it would work well on smartphone, tablet, and desktop interfaces.

Applying App Design Concepts to Website Design – Should we let app design guide us more in website design? In this article we’ll explore how app design concepts can help rethink the planning and design of websites for a better user experience.

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

List of Free Parallax Scrolling Tutorials for Websites – Today we have collected 15 helpful parallax scrolling tutorials for websites in order to give you a possibility to master this smart and fancy effect.

A Simple Guide to Creating iOS7 Style Icons – Icons can be a tricky thing to get done right – especially if we are talking about a whole set. Additionally, having line iconography is another challenge in itself.

Designing for the 3 Second Rule – 3-5 seconds! Yes that’s all it takes to make a great first impression. I know this sounds like an atrociously low time frame to create an impression, but that’s the way it is!

4 essential UX rules taught by eye-tracking research – How can designers harness this very powerful information to create sites that are nothing short of excellent? You’ll be surprised at what the research has uncovered.

The Future Of Video In Web Design – But how do you integrate video into an app or a marketing page? What would it look like, and how do you implement it? In this article, you will find inspiration, how-tos and a few technical goodies to get you started with modern video on the Web.

You Shouldn’t Overlook The Design Of Your Website’s About Us Page – The About Us page is often the highest rank page on a website but it largely gets overlooked in the development process.

10 fresh and fantastic jQuery plugins – Hundreds of new jQuery plugins are released each month. Most of them are fairly basic, but on the other hand, some others are truly incredibles. Here’s a list of fantastic jQuery plugins recently released.

10 Crucial Elements for Any Website Design – While every designer may have a different plan when it comes to building a website, they do have a common checklist. No matter how you try to avoid it, there are a few elements every website should include.

Is flat design a passing trend or something more? – This technique is clean and minimal with a focus on great typography, color schemes and simple icons. Quite the equation for delivering the pleasing aesthetics clients and users expect.

30 Best Tools for Data Visualization – There are many popular online resources for Data Visualization which provide the end user with the ability to view all types of data and to better understand this data provided within a visually defined manner

Best Practices for Designing Effective Banner Ads – In this article, we’re going to take a look at banner advertising and investigate just what creating a strong ad is all about. Banner ads are one of the principle forms of advertising on the web today and, for many sites, a fundamental source of revenue.

Flat Design vs. Minimalism – The problem is, these two concepts are quite different, and can be mutually exclusive depending on the designer and the particular project he or she is asked to work on. So, what’s the difference, and why should designers care?

Four Ways To Build A Mobile Application: Native iOS – The series will provide an overview of how to build a simple mobile application using each of these four approaches. Because few developers have had the opportunity to develop for mobile using a variety of tools, this series is intended to broaden your scope.

Everything You Wanted to Know about Website Redesign – Redesign is also about optimizing the website’s loading speed and making sure the makeover takes the business’s brand to more people. It’s important to understand that the focus of this process is to improve the usability and the interaction of users

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

3 Ways in Which Colors Affect Your Creativity Backed by Science – This time, let’s take a look at how colors can affect your own moods and thought patterns. It stands to reason that, if you can use colors to influence others, you can use them to influence yourself.

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

7 Tips to Turbo-Boost Your Blog and Gain More Leads – Below are 7 blogging tips. Follow these tips and you’ll gain more shares, more comments, more traffic, more business, and more raving fans.

The Ultimate Guide to Blogging – In this guide I’ll show you how I created all of my blogs and monetized them in the past as well as this one you’re reading now. This article is based on design related blogging but practically can be applied to any niche.

Tools Don’t Matter, Skill Does – To be an expert, you need the foundational skills. The tools don’t make a bit of difference. Those will go away in a number of years, but the skills you need to effectively use them will be needed for their replacement.


8 WordPress mistakes to avoid at all costs – Some people using WordPress make the same mistakes over and over again. Here I’ll explain what the most common mistakes are and how to avoid them, so your WordPress sites are faster, better planned and more secure.

WordPress.com Adds Support For Markdown: Is TinyMCE On Its Way Out? – Support for Markdown has also been added to WordPress mobile apps, which will make it much easier to style and format text while blogging on the go. Very soon we should see a Markdown module added to Jetpack.

Search Engine Optimalization, Conversions, Analytics, etc.

How to Read Your Website Source Code and Why It’s Important – This is a quick guide to show you how to read your own website source code in order to make sure it’s properly SEO-ed and, really, to teach you how to sanity check your SEO efforts.

7 Ways To Use Eye Tracking To Improve Conversions – Eye tracking is a powerful tool to optimize the way people interact with your website. But remember that the goal is not to get them to see any one specific part of your page or to follow any particular path – the goal is to convert them.

How to Optimize Photos for Search Engines – Include things like keywords, meta tags, headings, titles, internal links, externals links, and– of course– images. Optimize photos on your site and you should see a marked difference in where you rank on search engine results.

6 Conversion Rate Optimization Tips for Testing Landing Pages – A landing page is where your search engine optimization efforts will lead, because the landing page is where your SERP (search engine results page) entries will lead.

User Behavior: How It Affects Your SEO Rankings – But how do we ensure that the searchers are provided with a page that delivers ‘user satsifaction’? This post talks about how search engines use human behavior data to promote or demote your rankings and what you can do about it.

6 Proven Ways to Boost the Conversion Rates of Your Call-to-Action Buttons – So let’s cut the excuses and start using techniques we know will work, like the six data-backed methods for improving conversions explained below.

Tracking Events Responsively With The New Google Analytics – Analytics.js is a new and more flexible way to glean some insights about how users interact with your site. It’s built into Universal Analytics, which itself is designed to give you a lot more control over the entire process.

Google Hummingbird: A User Experience Perspective – In an effort to maintain its dominance as a multi-use platform, the Hummingbird algorithm affects several of Google’s products – all of which are aimed towards improving the user experience.

RSS feeds in the age of Panda and Penguin – The use of RSS has dwindled, at least for us because the readership has quadrupled over the last 2 years but the number of RSS subscribers is now less than 1/4th of what it was 2 years ago, let alone the traffic.


Basic Animations in CSS and Javascript for Prototypes – One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes.

Build a Super Easy CSS Slider With Thumbnails – Today’s project is another exploration of the types of practical applications that you can achieve with a little ingenuity and some fairly basic CSS. The final result with be a great way to display a strip of small image thumbnails that the user can hover to see larger images.

Creating a Custom HTML5 Audio Element UI – MediaElement.js allows you to embed any HTML5 audio or video using a native player interface which can dynamically adapt into a Flash/Silverlight player when needed.

Freelance, Business and Workflow Related Stuff

Stop Freelancing – I stopped freelancing and started my own company. I came up with a business name, filed for a business license, and as of recent finally even got myself a desk with a fancy “Suite” address in a coworking building.

Supercharge your Workflow in Sketch – Sketch is simple enough that you don’t need to learn many shortcuts to become more effective in it. But learning the most effective ones can increase your productivity in leaps and bounds.

13 Side Projects for Fun and Profit – In this post, we’ll describe thirteen side projects you might want consider starting. These are all projects you can work on at your own pace. Put as little or as much effort into them as you wish.

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

Design, Annotate, Plan, Code – How to plan smart CSS development using a style-guide approach. The interactive design process is relatively new and one of the most constantly evolving practices out there.

Why “Simple” Websites Are Scientifically Better – In this article, we’ll examine why things like cognitive fluency and visual information processing theory can play a critical role in simplifying your web design & how a simpler design could lead to more conversions.

Start from impossible – By removing the restrictions and the limitations that prior knowledge imposes on your thinking, imagining the impossible helps you to see the solution more clearly.

Buck Design Trends: Tips for Finding New Design Inspiration – consider using these sources as inspiration of what not to do. Here are a few ways that you can buck the trends to find a truly unique inspiration for your next design.


– § –

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.