.. Your Daily Design Dosis

Tweet Parade (no.36 Sep 2012)

| Comments Off

It’s Saturday and by now you know what that means .. it’s time for a new roundup with last week’s best articles and tutorials found on the interwebs. It’s all about web design, graphic design, branding, SEO, tutorials, social media 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.

Paralax effect without a plugin – Just 5 lines of Javascript to get a cool parallax effect in your website (on Codepen)!

Creating Cool Scrolly Stuff with Scrollorama – Modern web sites are designed to provide various types of interactions with users. CSS3 and jQuery effects are used in most of those situations. Scrolling is one of the major effect used for these interactions.

Get Your Social Follower Count Using PHP –  Often it is a pretty common occurrence to see websites display their social statistics such as Twitter followers and RSS subscribers on their site. In this tutorial, I will show you how to get your social following statistics ..

A Beginner’s Guide to Leaner CSS – Don’t repeat yourself (DRY). It’s a simple concept with the ability to completely change the way you write code. If I look back to my early days with CSS though, I don’t think the concept meant much to me.

30 top examples of JavaScript – JavaScript creates platforms that can engage a user and ensure that they remember your site and continue to revisit. It can be used to create games, APIs and scrolling abilities that allow any site to flourish.

Java Is No Longer Needed. Pull The Plug-In – For nearly everyone, it’s time to dump Java. Once promising, it has outlived its usefulness in the browser, and has become a nightmare that delights cyber-criminals at the expense of computer users.

12 Evil HTML Tag Mistakes You Really Should Avoid – All those who work on HTML should be really considerate and careful about the HTML policies.  This is because they catch up the most minor mistakes in the code and they name them as the HTML mistakes.

Using CSS3 transitions: A comprehensive guide – This article covers CSS3 transitions in-depth. I hope you’ll come away from this article with a more rounded understanding of CSS3 transitions, along with a few practical tips and techniques to help you ..

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

Style Guide To Prototype — Design Iteration In The Browser – When it’s time to create the initial visuals for a design, how do you proceed? Do you sketch? Do you wireframe? Jump right into Photoshop to begin a complete design comp?

Four Ways To Break Into User Experience – User Experience isn’t for everyone, and just because you get a degree doesn’t mean you’ll be good at it. Try it out before you jump in the deep end.

Developing Responsive Designs With Opera Mobile Emulator – In this article, we’ll look at how you can use Opera Mobile Emulator to create responsive designs, and we’ll cover some of its more exotic settings.

Does Your Website Use Responsive Design? – So along with all your direct sales efforts, your website is a critical factor in growing your business — a positive user experience will move prospects closer to saying “Yes, I want to deal with this organization.”

Common mistakes when designing for mobile – Whatever your goal for mobile development, before you launch, let’s take a quick break from that process to make sure you aren’t making a few of the most common mobile design mistakes.

5 Simple Tips for Designing Better iPhone Apps – We’re told early on in life not to judge a book by its cover, but without a way to trial an app, screenshots are one of the few ways a user can judge the quality of it.

Managing user expectations in responsive design –  I think there is a missing step we haven’t explored enough: how to change the mental models of users who have become used to separate sites on their mobile phones and desktop computers.

Five steps to gettin’ flexy in responsive web design – We’ve constantly in the process of trading in our tenacity for pixel perfection and embracing the web for what it really is; fluid. Today we’ll cover some steps to help you transition towards flexible web design ..

Does Creativity Suffer With Responsive Workflows? – While many will insist they aren’t creative because they can’t draw a straight line, the truth is we’re all creative. It’s one of the greatest strengths of being a human being.

Enquire.js – Media Query Callbacks in JavaScript – Enquire.js is a lightweight, pure JavaScript library for handling media queries. It is less than 1kb when GZIP’d and minified, and has absolutely no dependencies.

Design sites using theResponsive Grid System – The Responsive Grid System isn’t a framework or a boilerplate. But it does make creating responsive websites quick and easy.

Creating a good mobile experience – Considering that by 2013, Gartner predicts that more people will use their mobile phones than PCs to get online, the mobile user has become a key customer demographic.

The road to responsive images – 29 August 2012: a date that will go down in history as the one on which we finally got an official specification for responsive images. Last week, the W3C published an editor’s draft for responsive images ..

How to Make Your Site Mobile-Friendly with ‘Responsive Design’ – Virtually every business needs a website. People are using the internet on an increasingly diverse array of devices, from smartphones to gaming consoles.

4 Ways To Shift Your Business Structure To Provide A Better User Experience – Getting more people to visit and stay engaged on their websites. Websites are continually increasing and online businesses are constantly striving to capture visitors’ ever-shortening attention spans.

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

30 Excellent CSS3 Forms for Web Designers and Developers –  These slick and stylish CSS3 Forms is an easily customizable forms setup that helps you create for your web sites. In this roundup we are featuring 30 Free and Premium CSS3 Forms for your web projects.

Content Management Systems Defined – If you are not a professional web designer but would like to create websites, then a content management system (CMS) is all you really need!

New tools for web design anddevelopment: August 2012 – There seems to be a meta theme to the releases this month. Once again grids get a good going over, thanks to Gridset and jQuerin, and there’s cross-platform sync from fruux.

jQuery: the good, the bad & the ugly – jQuery is one of the best libraries out there and it can make writing JavaScript much easier. However, like many tools, jQuery is at its best used by an expert craftsman.

Tools And Plugins To Create A Responsive Website – 48 Items – This is the future of web design, a future that is already here and we must prepare ourselves for it with the help of tools and plugins that other web designers and web developers have created.

20 Useful jQuery Chart and Graph Plugins- So we rounded up the following 20+ javascript libraries and jQuery plugins for the work of charts and graphs. Some of them are capable of rendering various types, a few of them are good at certain specific type.

Latency: The New Web Performance Bottleneck – when it comes to your web browsing experience, it turns out that latency, not bandwidth, is likely the constraining factor today. As a consumer, did you consider this when you picked your ISP?

Do I Really Need A Style Guide? – What is a style guide and when should you use one? We’ll summarize the main properties of a style guide, what it should contain and how you can determine if you should invest the time in creating one for your brand/website.

Top 21 Ways to Improve Website Navigation – Good website navigation makes it easy for customers to explore content and contributes to an overall satisfying user experience. Good website navigation also retains visitors on your website for longer and can increase conversion rates

[How To] Write a Call-to-Action that Converts – With Case Studies – This guide, packed with case studies, examples, and simple optimization principles, will teach you exactly how to write calls-to-action that convert.

5 Hacks to Optimize Mobile Landing Pages for Conversion – First, you must understand why people visit your site from smartphone or tablet. One thing you can be sure of: they have a goal. They are not pointlessly browsing.

How to Create a Scalable Background Image For Your Website – Some will tell you to use a jQuery, some won’t, but the following method uses CSS-only in order to resize the image and keep its aspect ratio intact.

The What, Why and How of Textures in Web Design – we’re going to jump straight into some of the ways that you can use texture and patterns to enhance your next design, serve up some inspiring examples of textures used in the right way ..

best articles of last week

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

Illustrator Tutorials Roundup – August 2012 – Here’s theall-new Illustrator tutorials roundup from the past month, containing the most popular “how to”s concerning vector illustrations, the latest trends and basically any new design goodies that have surfaced.

35 Tutorials For Learning And Mastering Indesign – The compilation is a great collection comprehensive tutorials in order to grasp a firm understanding of the fundemental features in indesign.

Add depth and texture in Illustrator – Adding extra depth to an image can be a quick process that utilises some simple tools offered by Illustrator. Using the Grain effect you can add a retro texture, which, combined with some halftone patterns and simple ..

Perfectly Paired: Using Symmetry in Web Design – Symmetrical design relies on principles of balance, rhythm, proportion and unity to create a style with mirroring sides. Symmetry happens when the composition of design is distributed evenly around a central point or axis.

Ultimate ad Valuable Typography Tools for Designers – Among all the designers typography designers has lots of worth because there a strong relation of typography and web design. Now everything is on your fingertips because I am going to share with you typography tools for you.

Why Logos With Hidden Meanings Work So Well – Logos are designed to do three primary things: to represent a company’s brand; to be iconic and recognisable; and to engage the audience to create an emotional response.

27 Illustrator Tutorials Released In August 2012 – Here are the 27 Illustrator Tutorials Released In August 2012 which will help you create attractive graphics for publication. Check out this collection as these tutorials include some latest illustrator ..

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

49 Ways to Gain the Trust and Loyalty of Your Audience – How can you demonstrate that you’re competent, credible, and trustworthy? Gaining trust online may seem difficult. But it doesn’t need to be. Online, you can’t assume trust is automatically established. Instead, you need to actively build your trustworthiness.

The Anatomy of a Solid Content Marketing Strategy – Content has continuously been a main factor in ranking authoritative websites, but recently content marketing has gained the attention it deserves in businesses committed to creating quality content.

The 10 principles of inclusive content – Following the 10 principles I’ll outline here, you should go a long way towards creating content that is usable and accessible for all.

Blogging for Startups: 10 Essential Tips to Make it Work – Blogs serve as a great way to increase organic traffic and establish the all-important relationship of “know, like, trust” through the provision of free content.


How to Add Custom Styles to WordPress Widgets – For the purposes of this tutorial, we’ll be using a simple text widget so you can get the hang of things. Once you’re familiar with how easy is actually is to get your WordPress widgets looking the way you want, ..

Add Lazy Loading Social Sharing Buttons to your WordPress Blog – Each social platform adds a JavaScript file with its buttons, this means when a blog page loads it has to wait for the 300kb of social media. This hangs the rendering of the page which results in increased page load time.

Useful WordPress Plugins Released In The Last Three Months – Connect to a variety of Content Sources like YouTube, Flickr, Twitter, WordPress posts and Pinterest to create gorgeous, dynamic sliders in a few clicks

How to Create a Child Theme in WordPress – It may sound a little unusual, but it is extremely common (and best practice). In fact, an entire market has developed for child themes of popular frameworks, such as Thesis and Genesis.

20 NOS Boosters For Your WordPress Website –  For years, webmasters around the world are trying out new tips and tricks to speed up their WordPress websites for the benefit of the users. In this post we shall discuss 20 best ways through which you can significantly reduce the page load time of your WordPress website.

Creating a responsive header in WordPress 3.4 – The Custom Header Image feature has been supported by WordPress for some time, however previously its fixed dimensions made it too immobile to be of much use in the age of responsive design.

How to Add Icons to WordPress Custom Menus Without Plugins – Adding icons to WordPress custom menus is a relatively simple 2-step process that does not involve any php coding whatsoever. None. Zip. Nada. Zilch.

Top 10 things to monitor on your MySQL – Monitoring MySQL servers is no rocket science provided you know what to monitor. MySQL gives a comprehensive list of variables to check your server’s health and performance.

How to Create a Daily and Weekly Email Newsletter in WordPress – A lot of you guys have sent us an email asking how to do daily and weekly email newsletters. How to add all these other options, what are the benefits etc?

SQL for Dummies: Demystifying The WordPress Database – WP uses its database to store and retrieve information as and when needed. The following article gives you a crash course knowledge of the WordPress data storage.

How to Create a “Sticky” Floating Footer Bar in WordPress – In this article, we will show you how to create a sticky floating footer bar in WordPress. You can use it to get more attention to your featured posts, popular posts, email opt-ins or whatever else you like.

Add an Awesome Image Slider with the Free WOW Slider Plugin –  looking into WordPress plugin Wow Slider is worth your time. Pairing use of this plugin and the WOW Slider program (free download), adding a fluid image slider becomes as easy as inserting a shortcode!

Post Formats: Aside – Asides are generally short posts or notes — the total opposite of a normal blog post. The post formats section of the Codex describes an aside as: Typically styled without a title. Similar to a Facebook note update.

7 Lessons Learned from 7 Years of using WordPress – Here’s a few tips for the smooth-running of a WordPress site, most of these are common sense but worth mentioning …

Search Engine Optimalization, Conversions, Analytics, etc.

The Only SEO Strategy That Works (Cutting Through The Bullsh*t) – Create fantastic content as often as possible, share it with other website owners frequently, and try to get as many links as possible. There is more to learn, of course – namely, ..

10 Unnatural Link Building Tactics and 10 Quality Alternatives – Google has also been sending warnings to website owners and bloggers about unnatural links and over optimization. This all is an evident example of why link building has gotten so difficult in recent times.

12 Awesome Keyword Tools for Your Website – In-depth keyword research is the backbone of any effective SEO campaign. Fortunately, you don’t have to go it alone. The Internet abounds with keyword tools. Some of them are free, and some of them come ..

6 Ways To Improve Your Website With Google Webmaster Tools – If you aren’t using Google Webmaster Tools, then you’re missing out on a valuable and (more importantly) free tool that offers a lot of features that can help you improve your site for search engines as well as visitors.

How To Remove Your Unnatural Inbound Links – I’m a strong believer in focusing on building good links rather than dwelling on the past, but sometimes, the past is so egregious that trying to remove your bad links is the only course of action.

SEO Mistakes | Are You Making Them? – Just when they think they may have it figured out, throw in a change by the engines and they are back to square one.  I feel your pain.

Tips on How to Lower Your Bounce Rate In Google Analytics – These are all great strategies for building traffic, but the problem arises when the traffic is coming but they just are not sticking around. This is where the bounce rate comes into play.

Toggle a Page’s Color and Content With Pure CSS – We’re going to build a basic HTML/CSS demo page, then add in a button that allows the user to toggle the page’s color scheme between to states: day and night. As the colors switch, so will various other elements on the page.

SEO Services VS Social Media – Social Media is quite a correct way to get the traffic instantly for a short term and to showcase your product. However both social media and SEO have their own benefits in long term as well as in short term.

Are Your SEO Techniques Outdated? – With the constant advancement of the Web, top search engines (particularly Google) also keep on evolving. From time to time, they introduce algorithm updates that directly affect the current practices of many Web masters.

Why So Many Suffered from Google Penguin Update + How to Recover – A big reason why many blogs, businesses and websites have suffered from Google’s Penguin and Panda updates this year is due to inexperienced, Black Hat, or just plain bad SEOs.

Five Powerful Ways To Improve Your Website’s SEO – Optimizing your website for search allows you to reach people preciselywhen they are looking for you!  This means that they’re probably more likely to donate, volunteer, or at least join an email list.

How Google Panda And Penguin Are Affecting The Web – However, these two Google soldiers have different functions and if your site is to survive and triumph, you need to understand how each functions differently but complementary.


3D CSS3 Book Generator with jQuery –  A new jQuery plugin – as a generator of books. The main idea is to display user friendly book basing on raw text (with images). In order to achieve this 3D effect we use CSS3 transform and transition effects.

BookBlock: A Content Flip Plugin – BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text.

Code a Mountain Lion Style Notification Window With CSS – To pull this off, we’ll use some basic HTML and a little bit of fancy CSS3. To finish it off, we’ll add a touch of jQuery magic to allow the user to drag the window around.

The Creation of a CSS3 Clickable, Rotating Menu – It uses a lot of CSS3 but surprisingly works quite well in many browsers. The main problem is with opera, which runs into a few problems when trying to run the code (due to lack of support for transforms).

Build a Fun Photo Swap Animation With CSS Keyframes – Building a stack of two photos that spread out and swap their stacking order when you hover over them. Along the way we’ll learn all about how to wield keyframes like a pro and juggle all of those head-spinning prefixes!

Freelance, Business and Workflow Related Stuff

The 7 Deadly Sales Sins Committed By Startups – Here are “7 Deadly Sales Sins” committed by many startups today. Some of these may sound familiar to you, but by identifying and address these mistakes, you will help your company succeed.

Guide To Online Collaborations: Useful Tips, Tools & Apps – Working with a team of any size is going to require some compromise. And with the right tools and ideologies it’s possible to build some of the future’s greatest technological advancements.

Fire Your Distractions: Be More Productive & Professional Working at Home – Most of them we cannot control, but when it comes to your home business, it is important to eliminate as many as you can. Not only the crying baby, but the barking dog, ..

How to deliver the perfect design – Working with clients can be tough. There can be a lot of back and forth communication and many requirements. Every client has their different level of standards and can make bouncing from project to project a bit difficult. One client’s idea of good is another’s idea of average and they’ll want more.

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

The best interface is no interface – And a decade later, when we could touch the Palm Pilot instead of dragging a mouse, we were even more impressed. But today, our love for the digital interface has gotten out-of-control.

The Monty Python guide to user experience design – We define ourselves by roles that sound pretty similar to people that work outside the field — Information Architects, Interaction Designers, Visual Designers, Usability Engineers and User Experience Designers are just a handful of terms commonly used.

Are Great Designers Born or Made? – Is the ability to design a talent you must be born with or is it a skill you can learn? Successful designers have shown that the answer to this question may not be so black and white.

The Benefits of Prototyping and Designing in the Browser – A prototype explains exactly how a responsive layout works by being a real functioning thing as opposed to just a static picture of the proposed thing “to be built at a later date.”

- § -

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.

Sorry, comments for this entry are closed at this time.