.. Your Daily Design Dosis

Tweet Parade (no.47 Nov 2012)

| Comments Off

Yay, it’s weekend again .. it’s 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.

Accessible custom checkboxes and radio buttons – However, since recent versions of all major browsers support the :checked CSS pseudo-class, you can now leave it to the browser to handle the states and focus on the CSS. No JavaScript involved

A round-up on CSS playgrounds – Playgrounds are becoming more and more popular and there are a bunch of options when you want to use one. Basically, they all do more or less the same stuff but each one has its own strengths and weaknesses. So in the end the choice is up to the user.

CSS Transitions – There are two ways to create animations with pure CSS:  CSS animations and CSS transitions.  CSS transitions provide a simple method for animation one or multiple properties from one value to another.

Learn How To Use Git – Git is very popular source control software which easily allows groups of people to work on the same documents or files at the same time. Along with Git there is a very popular way of hosting your source control files, this is Github.

Mastering SVG use for a retina web, fallbacks with PNG script – Consider your options for SVG use, and then realise the full power of them; logos, icons, navigations, patterns, repeating backgrounds, all fully scalable to any size.

Building A Relationship Between CSS & JavaScript – Creating a developmental balance on the front end is very important, because the environment is so fragile and we can’t control it like we can on the back end with a server.

A Look Into: HTML5 Placeholder Attribute – The placeholder text is the grey text that you find in an input field that is used to give a hint to the users on what input is expected in that field. Once users start typing in the input field, this text will disappear.

Should You Use Inline-Blocks As A Substitute For Floats? – They aren’t exactly the same of course, but the inline on the outside and block on the inside characteristics are sometimes all we really want and either a float or an inline-block might be appropriate.

Learning Principles for Improving Your CSS – This article will cover some basic principles and tips on how to learn and become better at CSS, based on personal experience.

Average Page Weight Increases 30% in 2012 – Many JavaScript-powered effects are unnecessary and less sophisticated than equivalent CSS3 transitions and animations. Admittedly we are in a transitionary period: most JavaScript libraries still provide animation functions for IE9 and below.

Quick and Easy Interactive Wireframes with Bootstrap – I will show you how Bootstrap can replace static wireframes and bring these details to the forefront earlier and with less effort.

In Defense of Descendant Selectors and ID Elements – There is nothing wrong with id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that class is always preferable to descendant selectors and semantic, structural ids.

Why it’s crucial to test your frontend code – The frontend development landscape is shifting, as is the necessary skillset. So I’ve been considering methods and tools for automating CSS testing.

Start your projectright with Modernizr – Modernizr is a popular feature-detection JavaScript library that, since 2010, has helped web designers and developers take advantage of HTML5 and CSS3 despite uneven cross-browser support.

Essential JavaScript:the top five MVC frameworks – Picking the right JavaScript framework for your needs can be tricky. The massive growth in rich, JavaScript-heavy web applications has lead to a huge array of frameworks designed to help you build apps.

A Case for Code Comments: The Server-Side – I’m going to cover why they matter, a recommendation for how to do so in the context of the standard WordPress required files (for both themes and plugins), and for how to do so for HTML files, stylesheets, and JavaScript files.

20+ Thoughts on CSS/HTML Preprocessors and Frameworks – A collection of opinions, thoughts, and case studies twittered recently which may help to clarify the role of CSS/HTML preprocessors, frameworks and libraries in the modern web design.

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

Adapting Your Site to Different Window Sizes – Many websites have prioritized optimization for a 1024 pixel wide window. This ensures a good user experience for a wide variety of displays when the browser is maximized.

Accessibility is part of UX (it isn’t a swear word) – The reality is that accessibility is simply a key part of UX. A truly outstanding digital experience is a fusion of accessibility, usability, creativity and technology.

20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know – This article is recommended for ADVANCED developers

How to Create Retina Graphics for your Web Designs – Let’s take a look at how you can create special retina graphics for your website so your design looks crisp, sharp and clear on those powerful screens.

Mobile Apps: The Trouble With Using ‘Responsive Design’ – Once you understand the kind of mobile experience you want to create, you can decide whether adopting a responsive design philosophy can deliver upon these expectations and goals.

Responsive Menu Concepts –  The resources seem endless. That’s why I’m going to show you four main concepts and discuss the advantages and disadvantages of all of them. Three of them are made with pure CSS and one uses a single line of JavaScript.

Responsive Web Design is So More than Just a Few Breakpoints –  Layouts became completely broken at widths that weren’t defined breakpoints. In a world where devices are changing at a rapid pace, we need to make sure that our designs don’t break at any widths.

Responsive Image Techniques & Resources – When creating images for responsive layouts you don’t need to spend a whole lot of time coding. There are just a couple of techniques which, if followed properly, will allow you to scale your website very quickly.

The responsive web will be 99.9% typography – Seems there’s growing mileage in services like Reader which strip out visual “clutter” and leave only barely formatted content. Is it because it’s the best way to ensure a consistent experience in an unknown device realm?

Hamburgers & Basements: Why Not to Use Left Nav Flyouts – Another, more obvious downside to the left nav flyout is its inefficiency: tap a hard-to-reach button, wait for an animation, scroll a list while scanning for the item you want, tap again, and wait for another animation.

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

How to Stay Relevant as a Web Developer – Now as web developers we’re expected to wear many more hats. In most positions, especially at small to medium sized firms you’ll need to write code, build graphics and interfaces, and know some SEO.

Invention: Multiple-Choice “Windowed Slider” UI – But the slider plugin was made with such passion that I just had to write this article and share my discoveries. There IS hope. The slider can be fixed.

Sizing type, leading and vertical dimensions with rem-units – What if there was a way to size all the type, leading and vertical dimensions — like top and bottom margins and padding — relatively with one property?

The importance ofwhitespace in web design – Defending whitespace in web design concepts can be hard, but it’s worth the fight because it makes websites easier to understand, quicker to interpret and, as a result, more profitable.

Setting Up Readable Online Web Copy using CSS – In this article I would like to discuss creating readable text on your websites. People who are visiting pages online are mostly interested in some type of content.

Create Quality Print Versions of Web Pages With CSS3 Filters – While I’ve focused on using CSS filters for display on screens, you can also use them in the context of a print @media query to reverse the colors of logos and other graphics w printing

Should you learn to code? – The most important part of learning code is keeping the correct mindset. It’s not telling yourself “I can do this” or hunting for the right books.

15 Reasons Why Parallax Scrolling In Web Design Is Awesome – The interactive nature of parallax scrolling is an obvious advantage, and so is the level of engagement that comes with it. Now let’s take a look at some websites that show us what else you can do with this great new technique.

Photoshop web design: 10 tips to make you more efficient – Photoshop still plays an integral part in the web design process. In this post we bring you 10 Photoshop web design tips you might not be aware of, and hopefully they’ll be useful for your next project!

Characteristics of Great Websites (Designing Your Site to Be Great) – A very important thing that most of the companies fail to realize while designing a website design is that today’s user will only come to your website, if it provides a great deal of usability and functionality

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

The Importance of a Logo – This article is especially for those who still have second thoughts about designing a logo or are unaware of the benefits of a logo for their business or organization.

5 top InDesign resources – Want to learn InDesign? Or hone your skills in the desktop publishing software? Then check out these top online resources.

Tools for Identifying Fonts and Creating a Palette – Developing a font palette for almost any project can be almost as simple as learning to identify font styles, slant and mood. Once you know the basics, you will more easily ..

50+ Adobe Illustrator Tutorials for November 2012 – Are you a professional or a beginner in Adobe Illustrator? Well, never mind! To make progress at least in something you should read, learn and practice, practice and again practice.

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

10 + Bonus Tips To Boost Engagement On Your Blog Through Comments – Blog engagement is an essential aspect for bloggers who are looking to build a community around their blog. Commenting and engagement was very popular or is still popular with forums.

7 Ways To Build A Strong Online Presence Through Social Media –  It is easier than ever to use social media to establish your online presence and if you continue reading, you will discover 7 ways to establish a strong online presence with social media.

5 Rules about Using Web Images in your Blog – In almost every case, pictures found on the Internet (like songs and videos) cannot be used without the express permission of those who hold copyright. To avoid a copyright infringement lawsuit, remember these five rules:


Debugging Tips for WordPress – There comes a time for every developer when things break and it’s time to set to debugging. Mario takes a look at different techniques you can use for plugins, themes, and servers.

Building a Downloads Gallery WordPress Plugin – In this tutorial, we will create a Downloads Gallery plugin for your WordPress website. We will be keeping it plain and simple and shall focus more on WordPress core instead of PHP logics.

Custom Background & Custom Header – With the templates and CSS in place, let’s round off our theme building by adding a way for visitors to add a personal touch with their own Custom Backgrounds and Custom Headers.

5 Essential Tips on Social Media Integration for WordPress – But how do we integrate our website into social media? In this tutorial, we’re going to go through 5 essential tips on how to be more social.

How to detect iPhone browser natively in WordPress – With this simple code, you can apply a specific CSS class to the body tag if someone is visiting your site using an iPhone. Of course, you can do a lot of other things, like applying a new stylesheet.

Understanding and using WordPress Shortcodes – In this article we are going to see what all support does WordPress provide to create a shortcode and how to use WordPress shortcode api’s and create your own shortcodes.

WordPress SSL setup tips & tricks – This posts documents my mistakes and issues with my WordPress SSL setup. With all these tips, there’s really no reason anymore why you couldn’t run any page where a user submits private data on SSL

Building a Downloads Gallery WordPress Plugin – Plugins extend WordPress’ functionality and let you do almost anything with your existing site. In this tutorial, we will create a Downloads Gallery plugin for your WordPress website.

jQuery Lazy Load Images on Scroll without Plugin – This jQuery tip reduces a lot of external requests while loading the page, ultimately helps your wordpress blog load faster. While using this trick, you should also use Cache Technique for simplifying the page loading.

Building your first WordPress plugin (part 3) – Storing and accessing option data is a very common task, that a lot of plugins need to perform. Through the options mechanism you can provide your users with the ability to tune the plugin to their needs.

Two Ways to Develop WordPress Plugins: Functional Programming – This part two of a series looking at two different programming styles (sometimes called programming paradigms) that you can use when writing WordPress plug-ins.

Creating a WordPress Post Text Size Changer Using jQuery – In this tutorial we shall be discussing one example of the usefulness of jQuery in WordPress, by creating a front-end post text size changer.

Search Engine Optimalization, Conversions, Analytics, etc.

How to Diagnose and Repair Conversion Rate Problems –  To learn more about the steps that may be needed to get your site back on track, consider the following conversion rate problem scenarios.

SEO for the mobile web – If you are planning a mobile specific version of your site, you must ensure that the content delivered is genuinely different from the desktop site; if it’s not, give responsive design another look, your clients will thank you.

5 Top Criticisms of SEO – There are some processes out there that are outdated or no longer useful. By avoiding those you’ll save time, money and headaches.

The Future of SEO and Content Marketing – The future of SEO and contenting marketing has become more transparent in least in the eyes of our friends at Google. You need to adjust to the changing ways and adapt accordingly.

50 Tricks for Faster Web Applications – Jatinder Mann, an Internet Explorer PM at Microsoft, held the session 50 performance tricks to make your HTML5 apps and sites faster, providing many tips for creating faster web applications.


Responsive CSS Timeline with 3D Effect – A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.

A Cool Instagram “Gravity” Gallery – Today we will be making something entirely for fun – a “gravity” gallery. This will be a script that runs a search on Instagram, fetches and displays the photos in a grid, ..

Adaptive Thumbnail Pile Effect with Automatic Grouping – An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.

Code a Dynamic Questions & Answers FAQ Page with jQuery – I want to use this tutorial to showcase how we can build a custom FAQ webpage layout. I’ll be using a small bit of JavaScript to show and hide the answers. We could include any type of data like static text, images, or videos.

Freelance, Business and Workflow Related Stuff

How to Get Started with your Freelance Branding –  For those who will just start freelancing, we have given you a list of what you need to do in getting started with your freelance brand. You will be able to realize the value of preparing when you get to start already.

When is it time to stop calling yourself a freelancer and become an entrepreneur? – Why do freelancers tend not to call themselves entrepreneurs? And how can we move from freelancers to entrepreneurs?

7 Pricing Strategies Based on Research Studies – Luckily, we can rely on some research studies to help us price our services better by applying the psychological principles derived from the studies that we’ll discuss below.

How to make design decisions – This post examines an important part of the design process that, for some reason or other, is often omitted from community conversations. Its aim is to get the design community talking about the ‘whys’ — including why they are important.

Why some freelancers get their way with clients and others don’t –  Allow your client to discover their mistake on their own. And in no way did you make the decision personal.

Deposits to Start Work: Deciding How Much to Ask For – Just like with setting your prices as a freelancer, there’s no one true way to handling the deposit process. In fact, there are plenty of freelancers who may never take a deposit  ..

Where are Your Clients Hiding – Clients are truly everywhere, that is, if you know where they are hiding. As freelancers and entrepreneurs, we have to take responsibility and find these people in order to survive.

How To Build Long-Term Client Relationships – In this article we will look at some ways in which you can end projects on the right note, and also what you can do after they are launched to help your project stories have happy endings (and many successful sequels).

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

First Impressions Matter: The Importance of Great Visual Design – Throughout, visual appeal ratings were highly correlated from one phase to the next as were the correlations between the 50 ms and 500 ms conditions.

Be careful who you build for – This removes any transitional hocus-pocus from the changing layout and gives you an idea of the state in which real users will load your product. Real users aren’t going to see changing layouts, the chances are they will see only one layout state

Adding A Personal Touch To Your Web Design – Having a personal experience on the Web is becoming increasingly important. We no longer want to visit cold, formal and anonymous websites.

Code smells in CSS – I’m going to share just a few things (there will, no doubt, be things that I have missed) that I look out for in CSS that will give you and idea as to its quality, its maintainability and its integrity…

Libraries enable devsto build without understanding – Libraries enable people to build websites without learning proper front-end skills, which can leave deeper problems unsolved. But we cannot argue with the fact that blindlyrelying on tools to erase obstacles can easily make people lazy or uneducated.

- § -

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.