.. Your Daily Design Dosis

Tweet Parade (no.44 Okt/Nov 2013)

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

12 Awesome CSS3 Features That You Can Finally Start Using – A word of caution – most of these features will not work in older versions of IE (9 and below). If these browser are a large portion of your demographic, I am afraid that you will have to rely on fallbacks.

6 CSS HTML Form Styles – Styling HTML forms with CSS is fun and there’s always something new to explore and learn, but don’t you feel dull when you do it over and over again? So here are few CSS from styles I’ve created for your websites.

Cross Browser CSS Injection – The ability to inject newly-modified CSS on every file change (without reloading the page) is the type of workflow-enhancement that you never truly appreciate… until you lose it.

Implementing the Float Label Form Pattern – Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.

Get Up And Running With Grunt – When you are working with JavaScript, you will likely need to execute multiple tasks regularly. While this is pretty much a given in most projects, it’s a time-consuming and repetitive way to work.

Sublime Text Setup.mdFrom here on out, use Package Control to install everything. +Shift+P, then type Install to get a list of installable packages you can ‘livesearch through. After installing plugins, they should be running.

How to conveniently check for responsive breakpoints in JavaScript – For websites using progressive enhancement or responsive techniques it’s often useful to get track of the viewport-width in JavaScript, e.g. for loading images in different resolutions with ajax.

Top 9 HTML Elements To boost Up Your Web – There are several really useful elements available to use, that make our code more semantic, our website more usable, and in general, everything easier for both us, the coder, and the end-user of our site.

Conditional Media Query Mixins – So how do you create both a style.css and a style-NoMQs.css from the same source Sass? We use the power of our @mixin.

Force Browsers To Load Latest CSS And JS – There are a few tricks that developers can do to make sure that browsers will download an up to date version of the stylesheets and javascript, this is done by putting a querystring to the end of the URL for the stylesheet.

10 CSS mistakes every web designer must avoid – The trouble with bad CSS is that it generates more bad CSS. What all these examples have in common is that they’re symptoms of a big issue: overspecificity.

How to use the progress element – When creating a web site we sometimes need to provide the user with feedback on the progress of a particular task , whether that be uploading a file, saving a document or even showing them how much is left until they complete filling in a form.

Useful snippets for php developers – When developing websites, apps or blogs, code snippets can be a real time saver. Today, I’m sharing super useful PHP snippets that I’ve collected over the past months.


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

Name, State, Role, and Value: What’s it all about? – The DOM API defines an extensive series of interfaces which identify the properties and methods that a Document Object should have. In Object Oriented Programming, an Interface is a description of what properties and methods an Object of that type must have.

How to Create Mobile-Optimized Websites – But with smartphones and tablets driving the market, it has become indispensable for companies to optimize their website for the mobile.

Selling Responsive Web Design To Clients – An interesting glimpse into how we as designers can go about selling responsive websites, and when we should push for a solution that we know to be an important best practice and yet whose need is not immediately obvious.

Viewport research addendum: height and @viewport – Summary: height doesn’t work. @viewport works only on Opera Presto, with the proper vendor prefix, which basically amounts to “doesn’t work.”

Relying Too Much on Screen Size – RWD has helped teams build amazing sites and apps that adapt their designs to smartphones, desktops, and everything in between. Many of these solutions are relying too much on a single factor to make important design decisions: screen size.

Modular Media Queries & Sass – After a lot of pain I think I’ve wrangled up a pretty sweet solution. In essence, instead of writing all the CSS style rules inside each media query, we put those rules in separate style sheets and then import them into the media queries.

The new Kellum method – So what is the goal of image replacement techniques? The goal is to have text without a font showing up. Now that @font-face is supported just about everywhere we can take advantage of it to load a font with characters that have no width and make no marks.

Responsive Web Design – Responsive web design is at its best when it’s device agnostic; where you’re not aiming to design for particular resolutions or sizes, such as for iPhone or iPad sizes only

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

6 Landing Page Conversion Killers and How to Avoid Them – Let’s have a look at 6 types of landing page conversion killers. Avoid these mistakes, and your chances of creating a high-converting page will dramatically increase.

Weekly Free Resources for Designers and Developers [October 28,2013] – Most of the tools, jQuery plugins, free fonts, free icons and free PSD files etc. are the most latest releases or the ones you might not have seen yet.

Using CSS Shapes to Enhance Visual Storytelling – Since most daring ventures into non-rectangular layouts using regular CSS and HTML usually end in frustration, most of the content on the web is still trapped in simple boxes.

How white noise affects UX – When advertising and product placements don’t interfere with your users’ website experience, you’ve done it right. How do you handle adverts on your sites? Is advertising a good way to fund free content?

Useful CSS Tools Showcase and Snippets Libraries for Web Developers – Some very useful CSS tools to enhance your work and save you time, as well as a list of CSS code snippets libraries for you to browse either for inspiration or to grab the code for your own projects.

Love Your Frontend Tools on Windows – Windows is often neglected by sweet command-line, development tools. We admit it, we’ve neglected Windows in the past too. But, undeniably it IS still a popular development environment.

6 Conversion Rate Optimization Tips for Testing Landing Pages – The practice of conversion is represented by conversion rate optimization or CRO. It will enable you to secure additional revenue without expending considerably more investment.

Buggy edges in Chrome when using ‘background-size: cover’ – Chrome seems to have an issue with using background-size: cover to make background images fill the entirety of the element the property is used on.

The 5 best tools for responsive design – The best tools to aid you in responsive design are those tools that help you to understand and make use of web technologies, plan your website thoroughly, write better code more efficiently, and test/present your responsive designs to clients in context.

How to Remove Broken Links From Your Website – Broken links are links on your website that point to pages that no longer exist. For instance, suppose you write a post linking to an article you found very interesting on another website.

Love Your Frontend Tools – not all developers are familiar with these tools, and sometimes you find yourself developing on unfamiliar environments, without the tools. I want everyone to have these tools, and I’ll tell you how to make that a reality.

Fresh Resources for Designers and Developers – November 2013 – We’re looking at tools that let you embed images into CSS code, implement shortcut keys to your website, name your PSD layers in batches, and lets you check your sites on multiple devices.

Bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing) – The traditional thinking is that body copy (long text, multiple paragraphs, takes more than a glance to read…) should be between 45 and 75 characters per line to be comfortable.

The 7 Things Every (Great) Checkout Page Needs – So, what I want to focus on today is to teach you how to make your checkout page convert well. I know it’s only one part of your overall funnel, but it’s an important part.

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

Serif vs. Sans Serif Fonts: Is One Really Better Than the Other? – So which is better: serif or sans-serif? It all depends on the use, mood and individual project. The best answer is typically the least clear – many great design projects incorporate both styles.

45 Useful Adobe Illustrator Tutorials – Good tutoriasl might be a good help for you to skip that hard time. Therefor, we have collected 45 Useful Adobe Illustrator tutorials for you. We hope these tutorials will help you to get some valuable design skills.

10 Quick Tips for Photoshop Users – In this post I’d like to highlight 10 quick tips that are ideal for less experienced Photoshop users, or for those who want to learn something new without much time available.

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

Personal Branding With Social Media – Be in charge of your own information to help steer your search results and put your best digital foot forward. Let’s start with these five tips.

The Beginner’s Guide to Google+ – This guide is only the beginning of what can be a deeply immersive social experience. But if you are new to Google+, this will be enough to get you started.


5 Common WordPress Setup Mistakes (And How to Fix Them) – So the next time you opt for a quick install solution, remember that you may need to go in and manually set up a few things and make a few changes if you want your site to look, feel, and function like you’re a real pro.

Why You Should Never Add Analytics Code to Your WordPress Theme – Site analytics are not a theme feature and simply do not belong in your theme. Analytics has nothing to do with your website’s design. Even if Google tells you to add this to the header of your site, do not directly edit your theme.

How to Use Visual Editor to Create Widgets in WordPress – If you are developing a WordPres site for clients who don’t know any thing about HTML, or if you are a beginner yourself, then you can use this technique to create custom widgets in WordPress

How to Fix Common Image Issues in WordPress – WordPress comes bundled with lots of goodies to handle images. However, for beginners some of these features are not as obvious as they should be. In this article, we will discuss some common image issues in WordPress and how to fix them.

WordPress Date Query – With the addition of advanced date query, WP_Query has become even more extensive. If keeping track of dates is important on your site e.g. if you are an event organizer or host multiple conferences or conventions, this new feature will definitely be very helpful.

 Debugging WordPress: How to Use WP_DEBUG – Every good developer should turn on debugging before getting started on a new plugin or theme. In fact, the WordPress Codex “highly recommends” that developers use WP_DEBUG mode while working on code they plan to release publicly.

Customizing the WordPress Admin – Adding Styling – In this tutorial you’ll learn how to add some styling and branding to your admin screens. I’m going to create a plugin to do this – giving you one plugin with all of your admin customizations.

10 Simple Ways to Keep Your WordPress Website Secure – Website owners or web developers need to manually configure plugins and implement security settings to keep the websites secure from hackers and help your site to stay secure from invalid data interceptions on the web.

 How to Add a Slide Panel Menu in WordPress Themes – Slide panel menu can be used to greatly improve the user experience on mobile sites. In this article we will show you how to add a slide panel menu in WordPress themes.

Search Engine Optimalization, Conversions, Analytics, etc.

SEO & Social Media Alignment – Scaling social media best practices across an organization can play an important role within SEO strategy. The larger your social footprint, the more impact social media will have on your SEO efforts.

Introduction to A/B & Multivariate Testing in Web Design – A/B split testing most likely isn’t needed for every website, but when understood properly it can provide value into any creative project.

A Step by Step Guide on Using Tumblr Effectively for SEO & Social Media Marketing – Hopefully you now understand what Tumblr is and how powerful it can be in terms of SEO, as well as driving direct traffic to your site. Use the content ideas above and build your own mini SEO asset!

Free Online Tools for Testing Your Website’s Speed – Use these free website speed testing tools to get information about your website’s loading speed and performance, as well as an understanding of issues that slow your site down.


Multi-Item Selection – This little script tries to ease that task by allowing a rapid and simple selection of multiple items by clicking, holding and moving over the desired items.

Medium-Style Page Transition – An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

How to Build a Minimalist User Profile Layout With Content Tabs – In this tutorial I want to demonstrate how we can build a minimal user profile layout design. This is mostly centered around a small set of navigation links, which dynamically change the display between bits of content.

Creating HTML5, CSS3 and jQuery Drop Down Menu – Drop down menu always make your site more attractive and handy. With Latest technologies HTML5, CSS3 and jQuery, designers are going to make their task more attractive and live.

Freelance, Business and Workflow Related Stuff

My Entire Front End Development Processes From Start To Finish – I have become increasingly more of a keyboard jockey and tools that allow me to continue using the keyboard rather than reaching for the mouse allow me to stay in the flow and keep my thought pattern uninterrupted.

A Guide to Passive and Recurring Income for Designers – Ok, so we’ve looked at some of the reasons why you might want to pursue passive income as a designer, but how do you do it? Here are a number of options that many designers are having success with right now.

Measuring design’s return on investment – If as a designer you’re to give your client a full report you’ll need to track those metrics before and after (or ship the task to a company that specialises). The longer spent on the “before” section, the easier it’ll be to measure the impact of “after.”

Entrepreneurs: Tips To Counter Stress And Create Productivity – Stress is a productivity killer. So in order to achieve more, we need to define what stress is, when it occurs and how to get rid of it.

35 Thoughts on When and How to Raise Your Freelancing Web Design Rates – 35 thoughts on when and how to raise your freelancing web design rates. I’ll provide clear signs that it’s time to raise your rate. I’ll also list some strategies to help you earn more money.

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

Curse of the Open Source libraries and frameworks – The number of people using frameworks or libraries to speed up their development, or solve the parts of development they can’t do themselves has increased as well. Is it a good thing, or are we shooting ourselves in the foot?

– § –

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.