.. Your Daily Design Dosis

Tweet Parade (no.50 Dec 2012)

| Comments Off

A new Saturday, 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.

REMINDER: You can still tweet & comment to Win 1 of 5 premium multisite SliderShock licenses (by @webdesignshock), participation for this giveaway will close on 19th of December 2012.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Testing @font-face Support on Mobile and Tablet – A few attempts to document font-face support across desktop devices, including the article @font-face feature detection on Paul Irish’s blog, are often misleading and deprecated when it comes to the mobile world of pain.

Giving CSS Animations and Transitions Their Place – Here are a pair of methods I’ve found to be pretty helpful in keeping the potential bloat and wire-crossing under control when CSS has its hands in both presentation and behaviour.

JSCamp: CSS Next – Before I delve into what the newer features of CSS that I am very interested in are, I want to clarify a myth that persists on how there are varying ‘versions’ of CSS like CSS3 and CSS4.

PHP Anonymous Functions: What Are They, and Why Use Them? – In this tutorial you’ll explore anonymous functions in PHP. Anonymous functions are a PHP feature that you probably won’t use that often; however, they can be really useful in certain situations.

How To Work With Linear, Radial, And Repeating CSS Gradients – Gradients are things of progressive enhancement and not usability requirements. They should never be essential to your design working. In other words if someone using IE8 can’t see your gradient, it’s not a big deal.

A bag of [code] tricks - This is just a list of pretty cool little snippets of code you can just pop into your projects. Most are centered around the idea of making things more usable and useful to your average user.

Best Practices When Working With JavaScript Templates - Like any other tool or technique, there are a few best practices that you should keep in mind, when using templates. We’ll take a look at a handful of these practices.

Increase Your Site’s Performance with Hardware-Accelerated CSS - Most computers these days have graphics cards suitable for hardware acceleration. Because of this, we are able to leverage GPU power for those heavier features so that our sites and applications can perform faster than is possible in browsers running on the CPU.

PHPitfalls - The first thing you come across when starting out with PHP is probably the fact that it has an extremely bad reputation. You will hear lots of things, including “it doesn’t scale”, “it’s not a real language”, “it doesn’t have X so it ..

How do I start a new project - About the way I start a new project. I thought it could be a good idea, plus I’m currently working on a new project at work so it may help me as well!

CSS Animations with only one keyframe - This is a very quick tip, about a pet peeve of mine in almost every CSS animation I see. As you may know, I’m a sucker for reducing the amount of code (as long as it remains human readable of course).

Do we need box-shadow or border-radius prefixes anymore? - Do we need -moz and -webkit prefixes anymore on popular items such as border radius and box shadow? Is there a post abt this?

Select This! CSS Selectors - great presentation about CSS Selectors

:hover is dead - With the proliferation of touch enabled devices, the :hover pseudoelement is dying. How many times have you tried to access a menu orsome form of navigation on a touch enabled device only to find that themega-menu is based on :hover events.

HTML5 Now: Getting More Through Polyfills - One of the most stubbornly persistent misconceptions about HTML5 is that it’s effectively unusable for years to come.

HTML5 video for retina displays - Recently I came across a question on Stack Overflow where a user wanted to serve a high resolution video to devices that supported retina displays.

Ultimate CSS List Creation Methods and Examples - In this post we will show you some really useful CSS list methods that you can use to create horizontal, vertical list or CSS list box.

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

Object-focused vs Task-focused Design - A lively discussion happens whenever UX folk gather to discuss how a UI has been organized. We all have our opinions, but our reasons are often unclear.

Creating An Adaptive System To Enhance UX - In computer science, the term “adaptive system” refers to a process in which an interactive system adapts its behavior to individual users based on information acquired about its user(s), the context of use and its environment.

7 Articles That Will Help You Understand Responsive Typography - In this post we’ve collected articles that will help you understand and how to implement responsive typography.

Designing for Users and Their Devices - I’d like to focus on some of the areas where I see the greatest misunderstandings and the most problems and provide some simple guidelines to help UX designers get to a more complete understanding of device hardware.

4 tricks for designing data-heavy applications - Through the process of redesigning our customer service application, we learned several important lessons for designing simple interfaces built on complex data.

Three reasons to stop A/B testing - This article deals with one of the most used types of online experiments, A/B tests. I would like to explain why you should stop running them.

Nine Ways to Improve User Experience in Mobile Design - how to build a great mobile site, and here are nine tips from the book for optimizing your site for all those mobile site visitors.

How to design forms that convert - Any time one of these forms is abandoned we lose a potential customer, so it’s in our best interests to make sure as many people as possible complete the form.

Design Systems - The most important part of responsive web design is that, no matter what the viewport width, the content is accessible in an optimum display.

20 Responsive CSS Frameworks and Grids Worth Considering - CSS frameworks have gone responsive, squeezing content into a spectrum of desktop and mobile browsers with varying degrees of success.

Responsive is the Mobile Web of Tomorrow - There are a lot of misconceptions, or myths, going around constantly about responsive design. We've even busted a few ourselves.

Redesigning the Media Query - Responsive web design is showing us that designing content is more important than designing containers. But if you’ve given RWD a serious try, ..

The Dark Side of User Experience Design - User experience design just stopped to be a niche and became a standard. It’s easier now to find an internet company without the SEO guy than without a UX designer on board.

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

20 Fantastic jQuery Web Type Plugins - Today we’re going to look at the best jQuery plugins around that are specially built to make web type more awesome. Download a few and take your type further.

50 Most Useful jQuery Plugins from 2012 - We have split all of the plugins into the following categories: Web Page Layout Plugins, Navigation Plugins, Form Plugins, Slider & Carousel Plugins, Chart & Graph Plugins, Image Effect Plugins, ..

What’s new for designers, December 2012 - Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

Awesome web tools to simplify front-end development - As a developer, I really like tools that can help me save time, or just make the whole development process easier. In this article, I have compiled my favorite web tools to simplify front-end web development

Fresh Resources For Designers And Developers – December 2012 - This time we have some cool resources from one that capable of slicing your design in Photoshop to some fresh new jQuery plugins with stunning effects.

12 Design Best Practices for Drop-Down Menus - We often focus optimization activities on landing pages, checkouts and home pages, and less on the pages that provide the “assists” in conversion.

13 Tips for Creating a Better Portfolio Website - In this article I am going to show you how to create an effective portfolio website to convince your clients to order your services.

Web Design Trend: Color Blocking - Color blocking could be called the bricks and mortar trend of web design. Using square (or rectangular or even curved) colored boxes as a design tool are beginning to show up almost everywhere.

Parallax Hovering And Its Engaging Quality For Web Design - Parallax effects are interactive by nature and still relatively new in web design. That’s why they are a great way to make your visitors curious, draw them in, and engage them with your website.

Five Signs of an Advanced E-Commerce Site - There are basic features that make up the skeleton of every self-respecting e-commerce website out there: product sorting, add to cart, guest checkout, and order tracking.

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

Creative Photoshop and Illustrator Text Effect Tutorials - In this post we have list down creative text tutorials of Illustrator and Photoshop. All these tutorials are exclusive and professional which you can use easily in your ..

Photoshop Layers tricks and shortcuts- When you are so used to an application you sometimes don't think about its tricks and shortcuts anymore because you are so used to them. Today I want to share some of my favorite Photoshop layers shortcuts & tricks.

13 underrated tools for graphic designers - In this article we’re not talking about the standard tools that every designer uses. Instead we’ve picked 13 of the best, most useful and downright essential tools every graphic designer should have at their fingertips.

5 Shapes, Symbols, and Concepts to Avoid in Your Brand - here are some classic issues that I’ve seen crop up consistently in branding and logo design, as well as my methods for leading the client toward a more focused, effective brand

10 Tips To Help You Build A Successful Small Business Brand - How can a small business develop a strong brand on a tiny budget? Here are 10 tips to help you get started

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

6 Tips for Creating Content That Spreads Naturally- To help set you up for success from the get-go, here are six ways to cut through all that noise and make sure your content comes out on top every time ... no additional marketing effort required.

20 Blog Tips to Help You Succeed - Experts say it only takes 21 days to develop a new habit. By focusing on one main goal for an entire month it’ll soon become routine.


Optimize WordPress in Five Minutes Tips and Tricks - I have to say that it is not an easy task to maintain a clean WordPress website especially if multiple authors are producing content.

Convert a HTML Template into a WordPress Theme - This tutorial will cover the basics of converting an existing template into a WordPress theme, and assumes that you have prior experience working with HTML, CSS, and PHP.

10 Things I Hate About WordPress (And How to Fix Them)- it’s about providing solutions to some common problems. One cool thing about WordPress is that if you don’t like something, you can always contribute your idea for a fix because it’s open source.

How to Customize Responsive WordPress Themes – Part 4: Media Queries - We’re going to take a closer look at media queries, and see how they work their magic in responsive WordPress themes. And don’t worry; it’s really not as complicated as you might think.

Centered Logo in a Menu List - Recently I’ve a designed a homepage for website project and I created the menu navigation with centered logo in between the menu links without knowing that it will be such a challenge to write the CSS that will work with WordPress later.

Insert WordPress Page Content Anywhere You Like in Your Site - If you need to insert content from a Page into other places in your site, such as in a sidebar or a category page, then that’s easily done with this little trick

20+ Useful But Often Overlooked Utility Functions In WordPress - Today I bring you 20+ handy built-in WordPress functions. Some of them you may already know and use every day, while others you’ve probably never heard of as they’re usually not mentioned in WP tutorials or even the WordPress Codex.

The Ultimate Guide to WordPress Permalinks - One important consideration when building and setting up a new WordPress site is definitely your URL structure, better known in WordPress as the permalink structure.

Inserting Widgets With Shortcodes - The shortcode ability of WordPress is extremely underrated. It enables the end user to create intricate elements with a few keystrokes while also modularizing editing tasks.

How to Fix the Custom Menu Items Limit in WordPress - To fix the issue, you need to edit your PHP.ini file. If you are on a dedicated server or on a VPS with root access, then you should already know what we are talking about.

Practical Tips for Improving Your Code - So rather than focus on how to build something or review any particular code, let’s review a few practical tips for writing quality WordPress code.

WordPress threaded comments and SEO - Pages showing as noindex,nofollow when he ran a spider across a site. A bit more researching learned us that WordPress automatically adds a noindex, nofollow robots meta tag to each URL that has ?replytocom in it.

Discover WordPress Conditional Tags - They are simply great because thanks to these tags it’s very easy to create conditional statements. You can for example display content only for some users, or load scripts only if a page is using ..

How to Create WordPress Photo Galleries with the New 3.5 Media Manager - The biggest change in the recently released 3.5 version of WordPress was undoubtedly the way media is handled. Not only did the Media Library change, but the way galleries are created also changed.

Managing 301 Redirects in WordPress - The two main types of redirect are 301 and 302 the difference on the surface is minor but important, a 302 is a temporary redirect while a 301 is permanent.

Search Engine Optimalization, Conversions, Analytics, etc.

How To Launch A New Website Design, When Your Old Design Is Perfectly Optimized- I’ll show you how to ensure that your new design is a high converter even before it is launched, and how to use basic, cost effective research to understand what your current website is doing right.

The 20 best tools for SEO - SEO tools can help speed up your process and save you time, allowing you to concentrate on the important tasks. But with so many out there promising the earth how can you decide what you need and which tools to choose?

The Inconvenient Truth About SEO - Remember, you shouldn’t be optimizing for ranking in search engines, you should be optimizing for users. Your primary objective should be better content, not higher rankings.

10 .htaccess File Snippets You Should Have Handy - I've put together a few useful .htaccess snippets which are often helpful. However, the other tips in this list are less common, but are quite useful to know when you need them.


How to Create a Responsive CSS-only Slider - In this tutorial we’ll create a simple responsive home page with a header embellished with a carousel where photos slide from right to left. Our solution will not require javascript, we’ll make our slideshow using css3 animations

Make A Responsive CSS3 Image Slider - Web developers desire solutions that not only scale across viewport sizes, but perform well on mobile devices. The responsive solution detailed here is particularly well-suited to those goals, as it avoids JavaScript entirely, running purely in CSS3

Make a Jquery and CSS3 powered Lightbox Gallery - Learn to make a fully functional lightbox using Jquery with both mouse and keyboard based controls for navigating images. The thumbnails have cool hover effects with zoom icons added by CSS3 pseudo elements to save on repetitive HTML.

How to Create a Custom File Input with jQuery, CSS3 and PHP - This tutorial will guide you through the process of building a jQuery plugin to replace that ugly looking input with support for multiple files and a simple fallback for old browsers.

Fullscreen Pageflip Layout - A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.

Coding a Minimalist Portfolio Layout with Dynamically Sorted Projects - I want to demonstrate how we can build a dynamic filtered portfolio list using jQuery. To speed up the development process we can use a jQuery plugin Quicksand to help with the sorting animations.

BERG Cloud Buttons - In this tutorial we will recreate them with some modern tricks. We'll use no images (more efficient), less markup (more semantic), and function smoother (no javascript controlling states).

Creating a 3D Button in CSS3 - Today I want to show you how to use some of the awesome new features in CSS3 to create an animated, three-dimensional button. To start off, we care about creating a fun experience that works to its ..

Sticky Captions Concept - A little trick on how to make captions of thumbnails or items "sticky" in order to stay visible in the window or viewport. The main idea is to see when a hovered element overflows the viewport and show the caption in the right place by changing its position from absolute to fixed.

Mini Help System with jQuery - In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application.

Create a Flexible Folded Paper Effect With CSS3 - In this tutorial we’ll learn to create a flexible (responsive) folded paper effect using CSS3 features like background gradients and box-shadows, which can give a cool-looking background to the content area of your website.

Stylish Custom User Settings Dropdown Menu with CSS - In this tutorial I want to demonstrate how we can build a simple HTML5 user dropdown menu. This will contain links for a typical user profile which are only displayed through a jQuery sliding animation.

Freelance, Business and Workflow Related Stuff

Redefining Web Designers, Web Developers, and Web Hybrids for the modern market - Is it time we rename the titles in the web industry to better reflect modern duties and responsibilities, and to add value to their roles?

Which Best Practice Is Ruining Your Business? - One reason why a practice's inefficiency may be difficult to spot is because when it came into existence, it was beneficial — like broadsheet newspapers once made sense.

Digital Jubilee - This year, I’m practicing a digital jubilee by archiving my inbox, deleting my RSS subscriptions, and unfollowing most everyone on Twitter.

Using Questionnaires for Design Research - In this article, I share a bunch of tips and practical advice on how to write and use your own surveys for design research.

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

What is User Experience? - I’m tired of discussing “user experience.” What it is, what it isn’t. I’m tired of talking about wireframes vs prototypes. I’m tired of the agile-lean-waterfall debates. I’m weary from discussing personas and sitemaps.

The Psychology of Why Sexy Websites Suck at Sales - The biggest source of frustration for web surfers appears to be the ability to find relevant information on a website—that’s the biggest killer, the biggest driver of dissatisfaction.

Mobile Design From The Bottom Up - Designing for mobile devices is like living life looking through a toilet roll tube. Because a mobile device screen is so small, app designers need to strip out the orientation cues that users might find on a conventional website, to leave enough room for the content.

Should We Be Reactive? - Looking at the evolution of the web and the devices we use should help remind us that the times we’re adjusting to are just another step on a journey. These times seem to be telling us that we need to embrace flexibility.

Design or Content First: The Chicken & the Egg - That’s putting design blindly before content, and it doesn’t work. After all, a website, in nearly every case, is a vessel for content.

Don't Confuse Engagement with User Experience - The mystery shouldn't be a mystery: Designing a great device is not the same as designing a great user experience. Designing a great user experience is not the same as designing greater engagement.

Psychology of Online Buyers – Web Design Tricks for an Online Store to Sell More - We are constantly manipulating human consciousness as everyday life as in business. Skilled craftsmen of a psychological impact turn us into docile audience, ready to purchase each advertised product.

 - § -

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.