.. Your Daily Design Dosis

Tweet Parade (no.41 Oct 2012)

| 1 Comment

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.

Essential Javascript:the top five testing libraries – Testing JavaScript has recently become more and more popular, and as such a number of libraries have sprung up to make your job easier.

Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap – LESS is a friendly, easily-approachable CSS preprocessor. Though ultimately, Sass and Stylus are more powerful and robust, LESS has a certain charm that keeps it as a forerunner in the battle of the preprocessors.

Tip: A simple CATCHA for preventing spam through your submission forms – The solution that we’re providing uses Javascript, so unfortunately the <2% of people that disable Javascript will not be able to submit your form.

box-shadow vs filter: drop-shadow – The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element. Or you wanted a box-shadow to take transparent parts of a .png into account?

CSS3 Regions and Flow – Put simply, CSS3 regions associate boxes and blocks with other blocks to allow a designer to make content flow from one box into another automatically. Previously this was impossible with just CSS.

Designing Better JavaScript APIs – This article covers the most important things that you will need to consider before and while writing your own utilities and libraries. We’ll focus on how to make your code accessible to other ..

What the Heck Is CSS Specificity? – Ultimately, you can only avoid it for so long. Specificity is an essential concept that you need to grasp to be an effective developer. Today I’ll walk you through the concepts of specificity in a simple and easy to understand manner.

A Touch Of Class: Using  CSS .classes Effectively – Simply put, classes are best used for multiple, non-sequential exceptions to presentational stylesheet rules on a page. That non-sequential part is important.

Gradient In CSS3: Circular And Elliptical – Today we are going to continue our discussion on CSS3 Gradients. This time we will cover their relative, Circular and Elliptical Gradients.

JavaScript Array Methods Reference – This should provide you with more or less everything you’ll need to manipulate arrays with vanilla JavaScript. There are some other methods and properties listed on MDN that I didn’t include.

How To Vertically Center Unknown Rows Of Content Inside A Fixed Container – Here’s a quick reminder of the methods for centering. You can click the methods listed below and be taken to the original demo for each.

Legacy Browser Compatibility for HTML5 – In this article, I will be showing you how to make your conditional statements, transparencies, and fonts renderings help make Internet Explorer 7/8 more compliant browsers.

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

The Responsive Design Myth – The moral of the story is that responsive design is just one tool in the digital marketer’s tool box. It should be part of a brand’s strategy, not the whole strategy

Overview of Breakpoints in Responsive Web Design – This is an important aspect to know of Responsive Web Design (RWD from now on) because it is this CSS declaration that allows for the ..

“Responsive IA: IA in the touchscreen era” – Martin Belam at EuroIA – Most successful apps do one thing, and do it really well, but publishers often can’t resist the temptation to try ..

9 Valuable CSS Tricks for Responsive Design – Let us take a look at few of the most useful, valuable and simple CSS rules playing an important role in responsive designing.

The Semantic, Responsive Navicon – The majority of responsive websites that use an icon to represent a hidden menu opt for the three horizontal stripes.  Its vagueness in shape doesn’t detract from its message as the icon is becoming an emerging standard.

5 Responsive Web Design Guides for the Week – With responsive web design, websites can adapt and fit any resolution of whichever device you are using. Here are 5 tutorials that will help you get started in creating responsive designs.

3 low-hanging fruit for retina websites – Here’s three things you can do easily to improve your low-density website or app for people on Retina screens.

Mythbusting the Responsive Design Myth – Every once in a while you read something on the internet and it leaves you scratching your head thinking, “what the heck is this person talking about?” We recently had a similar thing happen ..

Get started as an iOS developer – The purpose of this article is to make it slightly less intimidating and aims to point the budding iPhone and/or iPad developer in the right direction.

How to Choose a Responsive Images Tool – There are already some techniques out there that can be used to deal with this approach, such as riloadr, Github’s HiSRC, Foresight.js and Picturefill, Adaptive Images and multiple others.

How Important Is a Mobile-Optimized Site for Your Business? – Mobile traffic currently makes up 10% of global Internet traffic, as shown in the chart below, and next year more people will use mobile phones than PCs to get online.

How to Use Responsive Web Design to Support Old Browsers –  In this tutorial, we’re going to create a simple web page which works in all modern browsers as well as IE8, IE7, IE6 and possibly earlier versions.

Three Line Menu Navicon – In this article I’m going to focus on the “three line” symbol. I quite like the three line symbol as a symbol to represent menus. If we have to pick one, I’m all for this one.

Viewport Meta Tag For Non-Responsive Design – If you haven’t got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices.

Lessons Learned From A Responsive Design – I didn’t work with an ideal process and I’m not 100% happy with how things turned out. However, I learned quite a bit and now have some guidelines to follow for future projects.

Setup to Build Responsive Websites –  You cannot have a responsive site without a responsive design. I recommend taking a “mobile first” approach because it forces you to focus on the most critical elements in your app.

10 Tips How To Handle Responsive Navigation Menus Successfully – The smaller the screen, the more difficult it gets to display the same content in a clear and usable way. Here are 10 tips how to effectively design your navigation menus both on big and on small screens.

Responsive Web Design vs Adaptive Web Design – There are 2 proven techniques that provide this idyllic solution; Responsive Web Design (RWD) and Adaptive Web Design (AWD). As their names would suggest they have similarities, yet are very different methods for optimising websites for mobile devices.

Taking Your Business Mobile: Mobile Website Or App? – You have finally decided it’s time to take your business mobile. How difficult can it be to make an app? The question is: do you choose to make a mobile site or an app (or both) and what is the difference?

Embracing the Flexibility of the Web With ‘Responsive Enhancement’ – Part of the reason responsive design sometimes feels foreign is that legacy of thinking that websites are things with widths.

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

What’s new for designers, October 2012 – The October edition of what’s new for web designers and developers includes new web apps, JavaScript and jQuery tools, productivity tools, CSS frameworks,and some really great new fonts.

Form-Field Validation: The Errors-Only Approach – Error pages for form-field validation are dreadful. You’ve just filled out 20 form fields, yet you get the same bloated page thrown back in your face because a single field failed to validate.

How to present your branding on mobile devices – If the uniformity from print to mobile isn’t there, then your brand is in serious trouble. We still see some companies jeopardising their reputations by not adapting their brands to be transferrable across digital media.

Top 5 Benefits of Grid-based Web Design – Grid-based layouts can enhance both the appearance and usability of a website. Here are five specific benefits of incorporating this concept in your web design strategy.

4 Custom Web Design Myths To Avoid While Designing A Website – A good design plays a significant role in making a website successful. However, designers often fall for some common myths associated with web design which may mar all their efforts.

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

17 Creative Logo Designing Tips And Tricks  – A logo designing is not only present on company’s paper or the main door, it’s the main trademark of the brand. The logo needs to be unique, so it can be solely used for one company.

Designing a Logo – From Inspiration to Execution – Designing a logo that stems from pure inspiration and yet manages to be both accurate and truly representative of your clients needs, is one of the most difficult tasks in the world of art and design.

7 Readability Tips for Designing Engaging Content- Readability is not something that can be reserved for formal publications like annual reports or four-color brochures. All of our content marketing messages should be easy to read.

27 Photoshop Tutorials Released in September – 27 Photoshop Tutorials to help you explore the different features of Photoshop, tools and function. These tutorials are also useful for more advanced techniques in Photoshop.

75 Excellent Photo Manipulation Tutorials – The first thing that clicks our mind when we talk about image editing and photo manipulation is Adobe Photoshop. Photoshop is such a great tool for image editing ..

How to create a design style guide: 20 pro tips – When handing over a creative project, most agencies for freelancers include a document known as a style guide. This not only adds an additional air of professionalism ..

A Collection of Illustrator Tutorials Released In September 2012 – Here is A Collection of Illustrator Tutorials Released In September 2012 which will help you make a more professional and creative masterpiece.

How To Make The Worst Infographic Imaginable – The modern infographic is designed to be unattractive, uninformative and completely incoherent. If you still want to make one, just read this handy guide to creating your ..

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

Seven Ways to Get More From Your Nonprofit’s Email Marketing Strategy – Like social media, email marketing is where you nurture constituent relationships. But e-mail is different from social media in a few critical areas

12 Blog Title Tips For Improved SEO Ranking – The first and the foremost part of any blog post is a title. Writing a good blog title can do more than just get your post complete.

Google’s “Over Optimization” Update and What It Meant for Bloggers – If Panda has slapped the wrists of low quality content or sites that are housing duplicate content, this new ..

How to Get Lightning Fast Social Media Sharing Buttons for Your Blog – At the same time, having different kinds of social media buttons on a blog is desirable so that the readers can share the post. However, this could negatively affect the page load speed.


jQuery In WordPress – 35 Of The Best Plugins To Customize Your Blog – Adding a jQuery plugin to your WordPress site can be done in two ways, a hard one and an incredibly simple one. The hard way to do it is include ..

How to Create a WordPress Reward for Tweet Plugin – In this tutorial, I’ll be showing how to create a WordPress reward for Tweet plugin to increase the tweets on your content while satisfying everyone!

10 Tips for a Deeply Customised WordPress Admin Area – Client-oriented WordPress development often requires the customisation of the default admin area. In many cases this customisation is ended with altering of the branding.

Compass Compiling and WordPress Themes – If you’re a WordPress theme builder and a Sass/Compass user, first, yay you are awesome! Second, there is this little issue that will probably crop up for you regarding compile locations, so let’s solve it now.

WordPress Body Class 101: Tips and Tricks for Theme Designers – Body Class (body_class) is a WordPress function that gives the body element different classes, so theme authors can style their sites effectively with CSS. HTML ..

How to Scan Your WordPress Site for Potentially Malicious Code – In this article, we will show you a few ways on how to scan your WordPress site for potentially malicious code.

Be Careful Out There: The 5 Myths Of WordPress – Online and offline, “thought leaders” and “experts” are pop out of every crack, with advice sprinkled with untruths, half-truths, exaggerations and over-promises.

5 Code Snippets for Interacting with WordPress Post Content Effectively – As the software pairs big content management features with small code snippets that can easily manage, organize, and present website content effectively.

Internationalize your WordPress plugin – If you have written a WordPress plugin, you can make it much more accessible by translating it into another language. This is known as internationalization.

Building a Simple Announcements Plugin for WordPress – In this tutorial we’ll be creating a plugin that displays custom site-wide announcements across the top of the page, with the ability to schedule messages to appear between two given dates.

Search Engine Optimalization, Conversions, Analytics, etc.

Link Building in a Post-Penguin World — SMX East 2012 – Build great content and ask for links in the right places. Write good stuff and links will happen. You can’t promise viral, even ..

REL=Author Tag, a must or a myth – This gives writers of original work more ownership over their content, and increases their search engine ranking.

A Crystal Clear Explanation of How Social Media Influences SEO – More and more, search engines have begun to incorporate social context into their search results. And it’s high time we ..

A Keyword Research Method Guaranteed To Increase Traffic – The key to increasing traffic to your blog or website is proper keyword research. If you don’t take the time to research ..

SEO: 12 Quality Signals that Improve Rankings – Google looks for ways to identify the relative quality of sites, and to quantify those quality elements. This approach derived from its algorithmic history, combined with ..

SEO and Web Development: Smartphone vs. Desktop – If more users are searching for businesses while on the go through their smartphones, wouldn’t it be worth the clients’ investment to accommodate them?

How to Optimize a Web Page in 7 Easy Steps – On-page optimization is the easiest, most learnable aspect of search engine optimization. But like all “easy” things, we sometimes forget that you can still do them wrong. Easy doesn’t always ..

5 Simple Conversion Rate Optimization Tips For Your Website – You run a small service-oriented business, and you’re well into your shiny new online marketing campaign. So what more can you do to convert users into customers?

The Message or the Messenger: What Makes SEO Successful?- SEO has certainly evolved over the last decade and that likely will continue. Much of what SEO was 10 years ago is surely dead today, but that stuff was never ..

Could Google’s Penguin kill the franchise? – The response to the first two Penguin updates may have been disappointment, frustration and simple resignation; the response this time has been outright anger.

SEO Tips When Switching to a New Website – Whenever a client says that they want to redesign their website, we can’t help but shudder a bit. A big SEO ranking factor is the trust of your website.


30 Examples of CSS3 Buttons Tutorials – We have a list of some really cool tutorials for creating CSS3 buttons. These tutorials will help you learn a lot of amazing techniques as these ..

Create a Cool Website with Fancy Scrolling Effects – In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.

Windy: A Plugin for Swift Content Navigation – Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a ..

How To Build A Pricing Table With CSS3 Animation –  I was given a PSD which was a pricing table and realised that there are ways to improve the look of this just by using CSS.

Real-Time Geolocation Service with Node.js – In today’s tutorial we will make a simple real-time application that will determine and show the locations of currently connected users directly on a map. For this purpose we will use Node.js and the HTML5 Geolocation API.

Google Extension Effect with CSS or jQuery or MooTools JavaScript – One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane and a detail pane.

How to Create Full-page Animations Using CSS – Our target is to achieve a seamless browsing experience in which content smoothly appears into view when the user visits a page and transitions away when he clicks on a link or performs a relevant action.

Freelance, Business and Workflow Related Stuff

5 Essential Contract Templates for the Freelance Designer – Let’s break down the most frequent contract types that a freelance designer will encounter sooner or later in his/her professional life, ..

14+ Essential Elements of a Good Freelancing Blog – While most seasoned freelancers know that blogging is an important way to promote their freelancing business, quite a few freelancers don’t have any idea how to create an effective freelancing blog.

Thinking About Freelance? – As a freelancer, you have the option of setting your own hours and increasing your rate as you gain experience. There are downsides, too.

Freelancers: it’s not you, it’s them – Many freelancers deal with less-than-ideal client interactions that spiral out of control and leave both parties frustrated, stressed and jaded.

Big question: how do youchoose your clients? – We asked our expert panel what criteria they use to determine if a client is a good fit for them, and to tell us about times when they’ve regretted taking on a project

20 ways to boost your design career with social media – Social media is not just for abusing celebrities and finding your ex-partners. It can get you work too. We reveal 20 ways to use Twitter, Facebook and other networks to send your career soaring.

How to Write an Effective Freelancer About Page – The most visited page on most websites is the about page. That holds particularly true for freelancers — on my site, almost half of my visitors wind up there. That’s because a client looking to hire some help wants to know exactly who he’ll be working with.

“We” vs “I” – the best pronoun for a freelance business – Today I want to explore the pros and cons for both “we” and “I” when talking to clients about your design business.

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

Is Internet Explorer Development Really a Waste of Time? – No one’s forcing you to develop for IE6, IE3, Lynx, JAWS or a five-year old Nokia browser but that doesn’t make it impossible.

Avoiding The Pitfalls Of Free – In this article I will examine how the desire to build a large audience by giving away your products and services free of charge can cause conflicts of interest, which in turn can lead to dubious ..

Busting that Creative Slump You’re In – Being creative is a state of mind and finding that creative state of mind can be difficult. Here are some ideas and tips on how to get out of a creative slump and what to do in order to stay in a creative mind set.

 – § -

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

1 comment

on this article: “Tweet Parade (no.41 Oct 2012)”