.. Your Daily Design Dosis

Tweet Parade (no.03 Jan 2013)

| Comments Off

.. yep, it’s time again 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.

Using Unprefixed CSS3 Gradients in Modern Browsers – I’ll take you through some differences between the old and new syntax and behavior and provides some insight into the change. Hopefully it will save you some time as you support many browsers.

Who Says the Web is Just for Squares? – As we have seen, you can make all kinds of crazy shapes with only CSS. On a recent client project, the designer challenged me with a grid of diamonds.

CSS Layout Properties for Noobies – This post is for people new to CSS and new to creating websites. I am hoping to make your life easier by showing and explaining some CSS properties that manipulate layout.

Top useful Javascript & jQuery snippets – Check this amazing collection of the top most used jQuery snippets that you need to know about! These jQuery snippets will help you in your website development to build powerful and responsive web pages.

Windows workflow for web designers and front end developers – As you probably know designing and coding up hot and ready HTML, CSS, and JS isn’t always the easiest compared to Macs. This is where I come in, to attempt to show you some really cool workflow strategies, tips, and of course… tools.

Feature Detection Strategy: a wise web development thanks to Modernizr – HTML5 and CSS3 are redefining our experience on the web. There are still some users who uses legacy browsers which does not support natively the mentioned technologies. So, should we keep working as the old times?

The harsh truth about HTML5’s structural semantics (part 3) – It’s reasonable to suggest that perhaps user agents in the future, such as browsers and screen readers, will do more with HTML5’s structural elements, and that will make them more palatable to us as authors.

Top 10 beginnerprogramming mistakes – In my work teaching first year university students to code, I see the same errors come up over and over again, and they’re the same mistakes I made when I was learning.

All About Cubic Bezier Curves & Transitions – We looked at the basics of CSS transitions, including how to use easing to control how your animation flows. In this post, I want to look deeper at a very powerful easing feature; cubic bezier curves.

How Does Auto Positioning Work In CSS? – As a quick review when you use css positioning on an element it’s position is relative to some containing block. That containing block will be the nearest ancestor element that also has positioning (other than static) applied.

Web Development With Sublime Text 2 – Sublime Text 2 in it’s simplest form is a lightweight text editor. Everything about it was built for speed, which makes sublime one of the quickest and easiest text editors to use.

The New CSS3 Relative Font Sizing Units – While the problems associated with px in Internet Explorer have dissipated, % and em remained the best choices — especially for responsive designs. Fortunately, CSS3 provides us with several new alternatives ..

A Collection Of Javascript MVC Frameworks That You Should Know About – Instead of using jQuery and a few other plugins, you can just use a Model-View-Controller framework so that you won’t get as a result a scrambled code within an overgrown file and zero capability to find what you are looking for in it.

Understanding the CSS Clip Property – The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as “crop”. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property.

What No One Told You About Z-Index – The problem with z-index is that very few people understand how it really works. It’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.

Advanced CSS3 2D and 3D Transform Techniques – Gone are the days of using Flash and GIF images for creating animated graphics. It is time to show off some of the best CSS3 capabilities. CSS3 transform has been there in the web for quite some time.

Media Fragments URI – The temporal dimension portion was implemented last year in Chrome and Firefox but the spatial dimension isn’t supported in any current browser as of the time of writing.

6 Awesome Emmet CSS Time-Saving Tips – Emmet is one of the most useful text editor plugins that you’ll ever come across for developers. It has the seemingly magic ability to turn a tiny bit of work into a ton of code, which can save you an incredible amount of time and effort in the long run.

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

Improving Usability And User Experience Through Consistent Web Design – This article is about how a consistent design can play a vital role in improving website usability and offer a pleasant user experience.

17 Important Tips For Designing Responsive Websites – Responsive web design plays an important role to attract many customers. The main idea here is to create a web design that will easily fit into the size and shape of the chosen screen.

Who owns your UX philosophy? – I’ve come to appreciate the importance of a single person in the company owning the UX with this person being the arbiter of discussion around how to implement the UX.

5 Key Concepts For Mobile Web Design To Look Out For In 2013 – While technical limitations and different interactions might be rather obvious challenges, we also need to think about more specific aspects like the different context of use and different user behaviours.

Responsive Mistakes: Less is More – Designing for small viewports forces content to the forefront of discussion. Despite this, it still appears to be common practice to simply hide content when space becomes limited.

HTML5 Input Types for Mobile – If you are working with mobile web applications, then you must adapt new HTML5 components. This post explains you how to implement new HTML5 input types while creating forms ..

Preparing Websites For The Unexpected – Designing for future cases affects both page layout and website structure. We can’t control on which devices our digital content is viewed — rather, experienced.

Creating Responsive Websites with Photo Backgrounds – In this guide I want to discuss a few trends and possible techniques for creating responsive image backgrounds. There are more than enough examples we can look into which all demonstrate a unique method for website interfaces.

Responsive webdesign Zen gardening – This is not a new proposal by any means, and the practical challenges are many, but I have not seen an outright call for an RWD Zen garden. So let this be it. Our industry should work together to progress the craft of design for the web.

Mobile networking: Where HTML5 falls short – The rivalry between mobile application platforms continues to flare as companies such as Google, Facebook and Apple choose to invest in native apps over HTML5. While HTML5 is viable, few are opting to take on the cross-platform mobile application strategy

Implementing Off-Canvas Navigation For A Responsive Website – The varying viewports that our websites encounter on a daily basis continue to demand more from responsive design. Not only must we continue to tackle the issues of content choreography but we must also meet the expectations of users.

The lack of media queries – What I’m seeing lately are designs created from 320 pixels and upwards (not Andy’s fantastic boilerplate). Which is great if your have a browser viewport that’s 320px wide. But ‘the mobile web’ doesn’t start at 320px.

The Next Step in the Evolution of Responsive Web Design: Responsivity Analysis – Of course, this inaccurate handling of information is not going to be a problem for all sites, but the truth is that each site layout and responsive scheme should be designed on the basis of the content and the desired impact on the visitors.

Seven potential downsides from using responsive design – For the uninitiated, responsive design allows websites to work from a single set of code that resizes itself to fit whatever screen a particular visitor is using, thereby negating the need for a separate mobile site.

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

15 Awesome jQuery Infinite Scrolling Plugin Showcase – In this post, we have a jQuery scrolling plugin collection that can help you implement endless scrolling system on your website. Most of these infinite scrolling scripts are free, but I also added a premium product.

E-Commerce Intelligence – An Introduction – At the crossroads where web design and marketing meet, there is something called eCommerce Intelligence, and if a designer takes this into consideration, he or she will be able to design a more successful website.

Handful tools I use – If you’re a webdesigner or developer, you’ve probably already stumbled upon some wonderful online tools / services. Not necessarly complicated things, just things you definitely need.

Strategies for Launching New Websites Quickly & Efficiently – In this article I want to discuss a few techniques for launching websites quickly. This is the process of wireframing a concept and quickly building the entire layout from start to finish.

Effective Website Taglines: Getting the Message Across – A tagline is very often overlooked and omitted from website design and branding, but taglines can make an impact and can help your site and brand with first impressions.

10 Great jQuery Pagination Plugins and Tutorials – jQuery Pagination plugins are used to split pages and posts into several pages on your website. Pagination can be done in two ways: by using a server-side pagination where the ..

Get started with web fonts: 15 expert tips – Thousands of web fonts are available to use on your websites, bringing the aesthetics of print design to the web. Here’s how to make best use of them.

The Positives of Negative Space – Negative Space is defined as the empty area without or between subjects. It is extremely important for design because it decides where your eyes will be drawn to on the page.

Why Prototyping is Essential to Your Design Process – Whether it’s just a quick sketch in your notebook or a post-it note, a wireframe made using your favorite graphics software, or a high-fidelity mockup created by a web app — incorporating some form of prototyping within your workflow is a critical step.

What Makes Or Breaks A Website Footer – Website footers are often overlooked when it comes to web design — after all, how important can it be way down there at the end of the page? If you’re wondering what you need in a winning footer, use these tips to help guide your design.

How to Use Icon Fonts in Your Website – Creating icons with icon fonts gives designers the ability to manipulate the icons with CSS. The days of creating two different icon images for rollovers or effects are long gone. Now we can easily change color, size, and even animate the icons just as we would most other HTML elements.

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

A Case for Using Gimp – GIMP, short for GNU Image Manipulation Program, is a “freely distributed program for such tasks as photo retouching, image composition and image authoring.”

Branding your company: It’s your child – In this blog series we will cover the various steps you need to take when building your startup, from choosing a name to marketing your idea. Part one of this series focuses on naming your startup.

9 Mistakes Made By Logo Designers – As a logo designer, it is very important for you to understand the importance of a logo design. You cannot jut design anything for your client. I have seen some worst logos and yes, some of the best logos ever.

Understanding The Difference Between Type And Lettering – Unfortunately, as with any popularity surge, there have come with it a lot of misunderstandings of some of the terms and concepts that we use. This article will help you gain a clearer understanding of what typography is and isn’t, and why.

40 Best logo design in illustrator tutorials – There are wide ranges of illustrator tutorials available in the web world and to choose the best can be difficult. To make your task, here is a list of 40 best illustrator tutorials that will help you learn using illustrator on designing logos.

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

5 Big Reasons to Monitor your Website – About the importance of ensuring your website is both online and is performing well. If you cannot be found because your website is down you lose credibility, customer leads and sales.

11 Social Media Mistakes to Avoid – But there are some deadly mistakes that can really cost you and even kill your social media campaign if you’re not careful. Here are the top 10 worst Social Media mistakes you could make and how to avoid them in 2013

10 Steps To Write Scannable Content – Nobody is going to read every single word you write. Here are 10 steps to write scannable content so your visitors get your message, even when they only scan the page.

10 don’ts when designing for email – Sending emails that aren’t formatted, designed or properly structured actually reduces your credibility and when users see a scattered email in their inbox, they simply dont pay attention.

3 Simple Secrets to Reducing Your Blogging Stress – Here are three simple secrets to reducing your blogging stress because, after all, the reason you started blogging was to get away from the stress of that job you had, right?


WordPress Blog Maintenance Checklist – If you’ve been blogging along for a couple of years without giving any thought to blog maintenance, then hang onto your hat and grab up your cleaning supplies.

Simple Steps to Protect your WordPress Site from Hackers – Security means, security of your site as well as security of your content. Here are some simple steps to protect your site from hackers, who may be trying to pick your cyber locks at this very moment.

The Road to a Simpler WordPress Dashboard – I will show you how to make the current interface simpler on your websites, with currently available tools. We’ll also look forward to the future of the platform and its level of administrative simplicity in general.

Using WP_Query In WordPress – If you’ve been around WordPress for a while, you’ll know how difficult it used to be to create lists of posts based on complex criteria while also conforming to WordPress’ standards. By using the power of theWP_Query class, we canlists posts in any way we want.

Featured Posts Area in WordPress – In order to complete this featured posts area, you will need to use secondary and tertiary WordPress Loops, PHP and XHTML coding (with some light CSS), and a small piece of jQuery code for optional animations and transition effects.

How To Set Up WordPress Discussion Settings – Managing your comments correctly has as much to do with directing communication to and from your blog as it does with controlling spam comments. A WordPress blog has built-in features allowing bloggers to do both effectively.

Embed External Media in WordPress Posts and Pages with Shortcodes – Today we are going to take a detailed look at one of them – we will learn how to use WordPress shortcodes to embed external content directly into posts or pages.

What to do if a WordPress Plugin Breaks Your Site: How to Fix the White Screen of Death – That horrid blank screen that tells nothing and alerts us of that our sites are down for us and the rest of the web. A plugin you just activated has taken down your site. WTF! Not to worry though, it’s easy to fix.

Making the Best of WordPress Categories: Tips and Tools – In this article, we will be focusing on using WordPress categories for SEO, discovering good and bad practices as well as taking a look at some nifty plugins that can make our lives easier.

The Most Frequently Asked Questions (FAQ) about WordPress – This article will give you answers to the most Frequently Asked Questions (FAQ) about WordPress so that you become more comfortable using WordPress.

Search Engine Optimalization, Conversions, Analytics, etc.

Semantic Web and Link Building without Links > The Future for SEO? – So, why invest so much time, effort a resource into such a game-changing project? Quite simply because its existing keyword based info retrieval model is in danger of being bettered by semantic search engines.


Account Menu Dropdown – This is a pure CSS3 demo, no JavaScript required. It should work on all modern browsers, OSs, and mobile devices. On mobile Safari the dropdown might not be hidden on tapping elsewhere, but that’s OK.

Create drag and drop features in HTML5 – While Drag and Drop is a new API included in HTML5, it was – amazingly – first implemented in IE5. To create draggable content is easy; you just add draggable=true on to the element you want to make moveable.

3D Image Gallery Room – Today we want to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms.

“Infinite” Scroll to Load More Content Pagination with jQuery – Pagination with numbers is, in many ways, counter intuitive and time consuming for the user. They have to stop, click on a number, wait for the page to load, and then continue their search.

Code a Spinning Circular Menu With CSS – Building a circular navigation menu that spins to different points as the user hovers over an anchor. Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works.

Putting CSS Clip to Work: Expanding Overlay Effect – We want to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element.

Getting CSS animations to trigger at the right time – Because animated elements “below the fold” (depending on the screen resolution) animate on page load, some animations had already played before the user had chance to scroll to them.

How to: responsive image bar – I’ve prepared a little example which showcases this type of pattern. Four images, located in an unordered list with floated list items, each 25% wide and width a gutter of 3% in bet-between.

How to build a threaded comment block with HTML5 and CSS3 – We’re going to look at building a simple HTML5 and CSS3 threaded comments layout. We won’t be using any jQuery effects on the comment blocks (although it is possible to extend this functionality).

Freelance, Business and Workflow Related Stuff

Is Twitter Worth it for Freelancers? – If you’ve yet to dive into the world of Tweets, I’ll show you how to set up your Twitter account. If you don’t get Twitter, I’ll show you how to make sense of it.

Top 10 tips for small business success – Setting up your own business is hugely rewarding; knowing that you created it from the bottom up makes any success all the more satisfying. top ten tips to successfully launch a new business.

How to market your design, the integrated approach – The beginning of any business venture is branding. Potential customers need to know who you are, what you do and why you’re different. Your unique brand tells them this and helps to keep all of your communication consistent.

4 Major web site problems that are costing you clients – Did you know you could be losing potential clients through a few hidden problems on your web site? And there are (at least) 4 major web site problems that many freelancers haven’t fixed yet.

The true meaning of working from home – Nowadays there’s no need to invest in office space, branded carrier bags or snappy suits; plenty of businesses are thriving with little more than an Internet connection and an idea.

Thoughts For Turning Vague Descriptions Into A Concept And Context For Your Design – Start by actively listening. Understand to your client’s story. What is his or her business really about and how does it stand out from the competition. Add your own words to your list as you understand what your client should communicate to achieve their goals.

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

The Flat Sink – Remove all affordances, and you make it harder for the user to know where to click. Put everything on the same plane, and you make it harder to focus on a specific section of the page.

Humans need to know why – Just doing work without an eye on the big picture rarely satisfies anyone. We want to know what we’re doing matters and that means knowing why we’re doing it.

Don’t ever stop playing – Playing around with technologies that interest us, without a particular end in mind, can produce some of the best and most useful ideas. About the need for developers to keep playing in their work, urging those in attendance to “just get out there and make cool stuff”.

Design Process is a Myth – Typically, when a product design falls flat, people want to insert a design process to fix the bad design. Don’t force a process on a design team that everyone must follow. Every designer has their own unique way of solving design problems.

- § -

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.