.. Your Daily Design Dosis

Tweet Parade (no.42 Oct 2012)

| Comments Off

It’s weekend again .. time for a new roundup with last week’s best tutorials and articles found on the interwebs. It’s all about HTML, CSS, responsive web design, graphics, 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.

How To Convert Old CSS To LESS – some new tools and apps that essentially aim to makea web designer’s or developer’s life easier, such as this tool: CSS2Less. This tool allows us to convert regular CSS into LESS.

SVG CSS Injection—A Different Approach Towards SVG Rendering – Retina displays are going to drastically change how we design for the web. Vector imagery, most notably SVG, will become a significant tool to display resolution-independent imagery at a reasonable bandwidth footprint.

SVG Fallback, Vertical Rhythm, CSS Project Structure – Welcome to more Smashing Magazine CSS Q&A. Your question could be about a very specific problem you’re having, or it could even be a question about a philosophical approach.

Understanding HTML5 and CSS3 for Web Design – HTML5 and CSS3 gives a web developer even more tools with which to express himself, here is a basic overview of what they are so you can build cutting edge websites.

Easy color contrast ratios – I used to think that WCAG-mandated contrast ratios were too restrictive and basically tried to force you to use black and white, a sentiment shared by many designers I’ve spoken to.

Creating a True Cross-Browser Drop Shadow Effect With CSS3 & SVG – The syntax is very straightforward: the values for the filter represent, in order, horizontal offset, vertical offset, blur and the color of the shadow.

An Introduction to the LESS Dynamic Stylesheet Language – LESS is a JavaScript library that extends cascading stylesheets (CSS), allowing the style language to support variables, nested rules, operations, functions, and mixins.

A classless class—on using more classes in your HTML – This article is a pretty basic one, but it’s aimed at developers struggling to shake the idea that classes in your HTML are somehow a bad thing.

OOCSS + Sass = The best way to CSS – Object-oriented CSS is awesome. But littering your markup with non-semantic classes is not awesome. But if you combine OOCSS and Sass you get the best of both worlds: modular CSS without bloated, hard-to-maintain HTML.

Constraint Validation: Native Client Side Validation for Web Forms – Validating forms has notoriously been a painful development experience. Implementing client side validation in a user friendly, developer friendly, and accessible way is hard.

Redesigning with Sass – Creating any website without using a CSS preprocessor seems a horrible decision.  Even if only to be able to quickly modify a few colors or element dimensions, or even just to easily merge and compress CSS files, CSS preprocessors are becoming essential.

Perspective of a Preprocessor, About a Year In – The following is my perspective on the features of preprocessors and how I feel about them after about a year of use. Instead of just telling you what they do, I’m going to tell you why they matter to me and my workflow.

LESS CSS – Beginner’s Guide – To solve the problem, a CSS pre-preprocessor is created to allow us to compose styles in a more dynamic way. There are a few solutions, but the one that we are going to cover this time is LESS.

Usability, User Experience, Responsive Webdesign, Mobile, etc.

Grids, flexibility and responsiveness – The first step in my grid design was to choose an appropriate typeface. I knew this would be everything on such a text-heavy site, and I really struggled because, as with all the elements on ..

A simple guide to responsive typography – There are two main principles to creating effective responsive typography. The first is resizable type. The second is optimized line lengths, which maintain readability.

The design thinking behind the new Disney.com – Since January we’ve been hard at work trying to create our vision of what Disney is on the web, challenging a lot of the status quo and creating something exceptional.

The Practical and Legal Reasons Behind Designing for Accessibility – Accessibility is a central and, in many ways, fundamental component of user experience, so designers of mobile applications and mobile websites should ..

really responsive design and the frameless grid – Many years ago, the web was a simpler place, in terms of design. After all, it’s quite hard to bring anything of visual beauty to your users, when your canvas is monospaced syntax-highlighted text, and nothing else.

Debugging CSS Media Queries – In responsive design we’re working with different states, widths, and viewport sizes. Fluidity and adaptive behavior is a hot subject nowadays, and it’s perfectly justified when looking at today’s mobile browser landscape.

RWD – Mastering Best Practices: Round-Up of Recent Results – Responsive web design (RWD) has clearly indicated that time of the one-dimensional Web is over once and for all and all variations of the modern Web are of equal worth for web designers and developers.

Why Responsive Web Design Will Revolutionize Your Process – Ultimately, responsive design will have a large impact on the web design and development community. I believe that the more designers understand what makes the web work, the better they’ll be able to accommodate and plan for responsive designs.

The Thing About Those Media Types-  Is the best approach really just to not specify a media type (or specify “all”), and let everything get the responsive layout?

UX design for startups:the age of user experience design – In the age of user experience design your startup needs to focus on users’ problems rather than on technology only. That’s the start of the road to success.

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

27 Online Tools to Test and Validate Websites / Blogs – In today’s post, we’ve compiled a list of highly useful online tools for validating and testing your website in an easy way.

Automating your front end development workflow – We all have a workflow. In fact, we all have many of them. Human beings are creatures of habit. Our first option is to use a pen and paper. We can write all the steps we take.

The Infinite Grid – Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, ..

Successful Websites Make Sure Navigation is Intuitive – Intuitive navigation is an absolutely critical website element that you need to nail if you want to have a successful website.

How to Create Lazy-Loading Images for your Website - This technique forces your images to pause the loading process until the reader has viewed that specific area of the page. Web designers can build this onto a webpage through a number of resources, especially jQuery plugins.

Creating Off-Center Balance: Using Asymmetry in Web Design – Asymmetrical design techniques can be visually intriguing and create distinct focal points. Here are a couple of inspirational examples and tips on how to employ asymmetry in your next design.

Impressive Ideas to Plan a Website’s Structure – Understanding and planning out your websites structure can be done in a document that shows how the content is going to be organized and broken down into segments or categories ..

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

10 winning ways to improve your portfolio – How much time do you spend improving your portfolio? Does it showcase your talents? Ensure you showcase your abilities in the best way with these top tips.

Create an Aged Vintage Style Logo Design in Illustrator – Follow this step by step Illustrator tutorial to create an aged vintage style logo design. We’re going to take inspiration from generations past, when logos were hand crafted with custom lettering.

Illustrator vs. Photoshop: How to Maximize Your Designs – To be a successful graphic designer, the first thing you should know is the difference between Photoshop and Illustrator. Graphic design degree or not, it’s important to ..

What is typography? Learn the basic rules and terms of type! – Every designer needs to understand typography. We explain the fundamental concepts and terminology in words that you can understand.

How to Protect Your Logo & Ensure It’s Really Yours – If you have had a logo designed to ‘brand’ the goods and services of your business it should be registered as a trademark in order to ensure it is protected, and that you are granted the right to actually use that logo!

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

Why You Should Add Authorship Information to Your Website – Quality content is often related to the author; some people are experts in their field and continuously generate useful content. Thanks to authorship markup we can quickly identify these authors.

The Future of Email Marketing and Newsletter Designs – But where has modern email marketing advanced into now in Q4 2012? In this article I’d like to look over some unique trends in current email newsletters and see what the future may hold.

How to get clients to “like” your freelance business facebook page – So the first piece of advice when building your freelance business facebook page: provide content that appeals to potential clients.

A Blog Is Not A Content Strategy – Content marketing has been around for years, but until recently Google was not making good on their word to rank content that deserves to rank. Instead, we could all easily find examples where sites were ranking off of low quality directories, link wheels, blog networks, and many other tactics.


How to Build a Responsive WordPress Theme with Bootstrap – In this tutorial, we will learn how to make our own responsive WordPress theme using Bootstrap.  Bootstrap is a responsive framework for building web sites and

Add Colour Picker To WordPress Admin – In this tutorial we are going to use both of these tutorials to create a colour picker on your theme options page using the default WordPress scripts.

The Beginner’s Guide to WordPress Actions and Filters – Simply put, hooks are what give us the ability to customize, extend, and enhance WordPress through an API in our themes, plugins, and other custom development efforts.

How to Use WordPress Efficiently for your Business- The truth of the matter is that you didn’t choose WordPress so you could work on it all day… and getting lost in a messy site isn’t what keeps your reader coming back either!

10+ wp-config tricks to boost your WordPress site – If you already installed WordPress, you know the wp-config.php file: this is the file where you set up your database connection info and define your site language. But you can do a lot more things with the wp-config.php file.

What is the Best Permalinks Structure for WordPress? – Permalinks is something that plays a huge role in the search engine rankings. I’m currently using %postname% permalinks structure, which works very well.

Search Engine Optimalization, Conversions, Analytics, etc.

3 Handy Dandy Tips To Improve Your Search Engine Visibility & ROI – In this post I shall provide you with some valuable information on what you can do today to improve your search engine visibility and secure better ROI.

10 Dead Simple Tips to Take Advantage of Google+ for SEO – When engineers built Google+, they constructed an SEO juggernaut to dominate search results above all other social platforms. Although Facebook and Twitter are essential to marketing efforts, both restrict Google from accessing much of their data.

How to Optimize Your Title Tags – Did you know that if your title tag exceeds 70 characters that Google may use different content from your page instead? A properly formatted title tag should be under 70 characters.

6 SEO Tools to Analyze Your Site Like Google Does – These tools are critical to your organic search strategy because they allow you to focus on the elements of your site. In this post, we’ll walk through 6 such tools that all help you analyze your site like a marketer … and a Google bot!

A tool to disavow links – Today we’re introducing a tool that enables you to disavow links to your site. If you’ve been notified of a manual spam action based on “unnatural links” pointing to your site, this tool can help you address the issue.

How To Link Build For SEO In A Post Panda And Penguin World – You might be curious how to properly build links for SEO in a post Panda and Penguin update from Google. 6 surefire ways to build links that will get you rankings in the search engines that last regardless of the next update Google has to throw at us.


10 Useful HTML5 and CSS3 Forms Tutorials – These tutorials will help you learn how to code web forms with different layouts and styles for your web design projects. You will find here tutorials for contact, login, search forms and more.

Custom Login Form Styling – In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness.

PFold: Paper-Like Unfolding Effect – A highly experimental jQuery plugin that let’s you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified

jQuery Autocomplete Dropdown – Here we’re going to be building a predictive/autofill drop down box that will let your users see suggestions based on what they’re typing.

6 Cool Image Captions With CSS3 – This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser support needed to run the caption smoothly.

Build a Responsive, Filterable Portfolio, with CSS3 Twists- The inherent visual appeal of filterable portfolios has made them very popular. Today, we’ll be making one using straight-forward markup, CSS3 and a little bit of jQuery.

Building a Live Textarea Character Count Limit with CSS3 and jQuery – In this tutorial I’ll demonstrate how we can build a simple character limit counter using jQuery. As you enter text into the form field a live numerical update will display how many characters you’ve entered so far.

A Simple Parallax Scrolling Technique – Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth.

Freelance, Business and Workflow Related Stuff

Tips for Building Great Startups with a Small Team – In this article I’d like to delve into the concept of a startup and how to adjust the mindset of your team. It will require dedication from every person and long hours are ..

How to Deal with Freelance Burnout – Let’s talk about a few ways in which a freelancer can start to combat that awful feeling of freelance burnout.

5 Stress-Free Tips to be More Productive –  The idea is to work smarter, not harder, which is why we wanted to share some ways to help you increase your productivity without also increasing your stress levels.

Why Freelance Web Designers Fail – The purpose of this article is to share our words of wisdom, in order to ensure if you’re making the transition to freelancing it can be a successful career.

7 Proactive Ways to Promote Your Design Services – While passive methods are important, there may be times where you need work and you don’t have the option to wait for your passive marketing methods to produce clients. In these situations, being proactive may be necessary to get more work.

Why Having Multiple Design Proofs is Vital for a Freelance Design Job – With the vast experience you already have, you would be able to grasp on the value of having multiple proofs.

How to find clients outside your network – As freelancers, we don’t have the luxury of sitting back and waiting for work to come our way — we need to get out there and seek it out — even if it means entering unchartered territory.

Top 10 Reasons Why First-Time Freelancers Fail – There’s quite a fetish for failure-as-fodder these days. Search “failure” on popular business sites like Forbes, Entrepreneur, or Inc, and you’ll get loads of articles on how it can be a great teacher.

5 Career-Threatening Mistakes Web Designers Make and How to Fix Them – It doesn’t matter if you are a beginner or an experienced web designer, a lot still fall on at least one of the five career-threatening mistakes.

Writing Effective Business Proposals – In this post, I am sharing some of the best practices that every business or individual/ freelancer can use to develop effective business proposals.

Essential Guide to Copyright for Beginner Freelancers – As a creative professional, your work is often governed by copyright law. It’s not exactly a topic that most of your clients will be familiar with, so you need to make a point of having practical expertise.

5 Business Concepts Every Freelance Web Designer Should Understand – But as the business world starts becoming design centric, it is becoming increasingly important for designers to accept that their work has an undeniable purpose: profitability.

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

Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad – I’m sure you’ve come across dozens, if not hundreds of image sliders or carousels (also called ‘rotating offers’). You might even like them. But the truth is that they’re conversion killers.

The Unwritten Rules of a Great Design Critique – Design critiques are not only the way to an improved design, they are also a great educational opportunity for all parties involved. If held properly by following some basic guidelines ..

A Line In The Sand, A Story About Meaty Chili and Using Classes – You know that it’s generally best to style with classes right? This is what OOCSS and SMACSS and modern writing about CSS is teaching. Not just “use classes smartly” but also “don’t use ID’s”.

The Languages of Design – We often consider the visual layout of a website – how it guides a user; what the hierarchy of fields in a form might suggest; or what the look and feel of a product says about a brand or company – but what about that company’s words; how do they fit into all this?

- § -

I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the proper section. 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.