.. Your Daily Design Dosis

Tweet Parade (no. 37 Sep 2012)

| Comments Off

Yay, .. time for a new roundup with last week’s best articles and tutorials found on the interwebs. It’s all about web development (HTML, CSS, PhP, ..), branding, SEO, tutorials, blogging 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.

Aspects of SVG Image Format for Web Designing – I am just giving you a small introduction about these image formats used in web designing. And we will be discussing and focusing more on the most widely used format – THE SVG.

Ways to embed a Clickable SVG-Logo into Your Website – In this article, we will see how the SVG-format can help us solve this challenge, using an everyday example of a website header with a clickable logo.

SOLID CSS- SOLID is an acronym for five basic principles of object-oriented programming and design that when applied together can make systems easier to maintain and to extend over time.

Coming Soon: Native CSS Variables – Name one feature you’d love to see in CSS. Hands up those who want variables… The issue stems from our need to use and repeatedly re-use the same colors and other values throughout a stylesheet.

Using The :invalid CSS Pseduo Class – There is a new CSS pseudo-class, which can be used to style an input or a form tag differently if it has failed validation. This means that you can make invalid HTML elements stand out when you display the page making ..

Introducing: CSSValues.com- There are quite a few references online for finding detailed info on CSS properties. I find, however, that most of them usually have more than what I’m looking for — and don’t even get me started on the overly-convoluted CSS specs.

Inner Shadows in CSS: Images, Text and Beyond – Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.

Preprocess THIS! – Now, let’s be clear, the point of this article is not to debate the benefits of one preprocessor over another. They each exude awesomeness in unique ways that fuel devoted fan bases. Sass is simply the best solution for me and my workflow.

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

A Flexible Approach to Responsive Navigation – Why not check (with JavaScript) to see how much of our the navigation actually fits in the space available? Once we know that, we can take items that don’t fit within the navbar and move them into a dropdown menu.

3 Tips for a Smarter Mobile Strategy – How well is your company responding to mobile? Read on for a brief look at the state of mobility–and how you can take better advantage of it.

Best of:Responsive jQuery Image Slider Plugins – we gathered 19 best responsive jquery image slider plugins that will help you create a beautiful responsive image slider with many awesome effects, transitions for your website.

Designing for Retina Display – A website will have to double in size to fit on a retina display. This brings us to the issue of device independent pixels. Since everything is doubled on a retina display, the pixel value you use in CSS will effectively cover double the distance on the screen.

Sticky Menus Are Quicker To Navigate – Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll.

UX Unicorns and Other Fanciful Creatures – Fewer things in User Experience Design are more contended than the definition of User Experience Design. Most of us who practice it agree on the goals of UX Design and even the methods we use to get there.

Responsive Web Design in the Browser Part 2: The Tools – In this second installment of Responsive Web Design in the Browser, I want to talk about what I use everyday to try and escape the gnarly grasp of the Photoshop beast.

13 tips to improve your website’s accessibility for mobile platforms – Smart phone sales are exploding, and the desire to make websites accessible to all users on mobile platforms is also increasing. I’m going to give you some tips on how to create accessible web content in the best way.

Big Menus, Small Screens: Responsive, Multi-Level Navigation – In this approach to responsive navigation, we’re going to use an approach that can accommodate large, multi-level navigation menus using media queries and jQuery, ..

How Responsive Web Design Could Become an Alternative for Mobile Websites? – The assumption that your web design is responsive can only be made true when the users using different operating systems and podiums to access the website, are able to do it successfully.

Breaking Down Media Queries for Responsive Web Design – Having a skill that solely relies on code created by another is a hindrance to your career, in order to be able to say something is part of your skill set you have to understand it first.

Does Your Small Business Need Responsive WordPress Design? – For those that like to cut the chase, the answer to the question is… yes, your small business does need responsive web design. In fact, we find it difficult to come up with a reason not to use this approach.

Should We Focus on User Experience? – In the next seven minutes or so, this article hopes to convince you that our current notion of UX design mistakenly focuses on experience, and that we should go one step further and focus on the memory of an experience instead.

What’s Your Vertical? – The problem that I see here is that responsive designers have often been making the assumption that wider screens also means taller screens. And we adjust our layouts accordingly.

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

Time to Dump Wireframes – Wireframes just aren’t up to the job of showing subtle interaction details—the things that make the difference between an application that is a delight to use and one that frustrates and annoys.

Your Most Important Typographic Choices – How do you choose a typeface and another to pair with it? What size should your copy and headings be? How do you determine line-height and line-length so text is both readable and legible?

Revisiting Your Website: Is it time for a redesign? – The main problem with any website is the need to keep it up-to-date. If you do not maintain a website properly, it will quickly become stale and ultimately outdated. When this does happen the only solution is to rethink and redesign.

jQuery in 2013 – or How to Properly Drop IE – The jQuery team has been plagued by IE for years. JavaScript in old IE (their collective moniker for anything below IE9) is antiquated, slow, and lacks the new features added to the language since their respective launches.

Typography rules: Eye-Catching Headlines with slabText for jQuery – Typography in web design has long been treated as an orphan. With the rise of web fonts the situation changed and thanks to jQuery we have loads of elegant little helpers to make our sites prettier.

The Power Of Visual Context In Web Design – Visuals are super important in web design. We just talked about images last week and how they can help to improve the user experience of your site. A while back we discussed how infographics can help you ..

Web Fonts Performance: Making Pretty, Fast – Historically, web fonts have not had a great story when it comes to performance, but this is definitely changing fast: better compression formats, improved browser handling, unicode and character subsetting, and the list goes on.

How To Choose The Right Grid – It’s easy enough to understand how grids are helpful in organizing your content. Not as easy is deciding what type of grid best suits your content and how to build it.

best articles of last week

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

Essential Logo Design Principles That Every Company Should Know – A Logo is of immense value because it is the public face of a Company. The key values of a business are represented with a logo design and this is why it should be made trustworthy and professional.

35 Easy-to-Follow Photoshop Tutorials for Web Designers –  I’ve scoured the web for 35 outstanding Photoshop tutorials for new upcoming web designers. All the tips & tricks are super easy to follow even if you’re brand new to the software.

25 Freshly Released Photoshop Text Effects Tutorials – Here are the 25 Freshly Released Photoshop Text Effects Tutorials which you can try out for free. If you want to make creative amazing text effects then better take a look at this list.

The Master Guide to the Photoshop Layers Panel – Today we’re going to take a deep dive into what the Layers Panel has to offer and how to make the most of it in your workflow. We’ll learn about everything from keyboard shortcuts to obscure customization features.

Create decorative custom type in Illustrator – With calligraphic and hand-drawn typography facing a resurgence lately, I will show you how to create your own custom typography quickly and easily in Illustrator.

Create Highly Detailed Braun Radio Icon from Scratch in Photoshop- In this tutorial I will lead you through the process of creating a detailed, relistic radio icon from scratch, using Photoshop’s vector editing capabilities. We will use fundamental Photoshop ..

10 things to consider when creating a new visual brand identity – The most notable talk of the day for me, was by Simon Manchipp, the CD & co-founder of Someone. Simon’s talk was built around ten things to consider when creating a new visual brand identity.

Create a Quick and Easy 3D Type Effect – Clean and modern 3D type is a cool effect, and it’s surprisingly quick and easy to create. With the combination of Photoshop and Illustrator, this effect is can be created in minutes.

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

10 Habits of Highly Successful Bloggers – Why are all of these bloggers so successful that the vast majority can only dream of the attention and respect they command? What do they have in common? As it turns out – a whole lot.

Tips to make your content get noticed by wider audience – People like to watch more than read. Also text based content is even sometimes ignored due to its length. What works best here is a video version of that text article; you can attract almost all ..

Secrets Of High-Traffic WordPress Blogs – I spoke with the developers behind some of the biggest WordPress blogs on the planet and asked them to tell me their secrets. Now I get to share them with you.

How to Design Your Blog to Convert – One of the most important questions, in my opinion, when it comes to designing blogs is the question of, how design affects conversion on a blog. A lot of people get stuck when it comes to the design elements of their blog.


Displaying Posts in a Carousel – Having a recent posts carousel on your blog is a great way to make it more interactive for your visitors.

Disable Changing The WordPress Theme – The problem with having a multi-author blog is that you have a lot of users which have access to the admin area of your WordPress site. When they have access to your admin site they have access to change everything about your blog.

List of my favorite WordPress development tutorials – If you are web developer, at least not a professional one, you may still have stuff to learn as i do. Here is one list of the best tutorials that helped me!

Top Typography Tips For WordPress- Typography is often a neglected aspect of web design. There are numerous sites around the Web with wonderful content that is badly presented and difficult to read. For sites that tend to be heavy on textual content, ..

Building your first WordPress plugin (part 1) – Building a plugin may seem like an impossible task, but it’s simpler than you may think. Today we begin our “Building your first WordPress plugin” series that will cover the most important principles and how-tos of the process.

Installing A WordPress Plugin? Run Through this Checklist- WordPress‘s core code provides you only a basic blogging platform, its plugins that enhance the functionality of any wordpress powered website. Plugins are external software that are plugged ..

How to Keep Your Anchor Text Linking Natural – The Google Penguin update has been around for a little while now. We’ve all come to terms with what has changed and understand that certain link building practices simply are no longer acceptable.

How to Setup Secure Media Uploads – The good news is that we can have the best of both worlds: solid security for writable directories and suitable file-permissions for working uploads, upgrades, and backups. In this tutorial, you’ll learn how to use .htaccess to secure WordPress’ /uploads/ directory or just about any other directory, WordPress or otherwise.

Quick Tip: Get the Current Screen’s Hooks – Page specific hooks offer the most efficient (and cleanest) way of targeting a callback for only the screen(s) you need it for.

How To: Make Your WordPress Themes Retina Display Ready – Apple’s new Retina Display is a topic of discussion among web designers and developers. WordPress developers and designers have already started responding to this new technology by providing Retina Display ready themes and plugins to do that.

Understanding How to Best Employ Taxonomies within WordPress – While there’s certainly nothing wrong with using categories alone, it’s really not the most efficient or intuitive way to use taxonomies for post classification and containment.

Writing Extensible Plugins With Actions and Filters – An extensible plugin is one that can be modified and extended beyond its original purpose by another plugin or theme. When a plugin is extensible, other plugins (or themes) can alter the behavior or output of the plugin.

Adding, Deleting, and Changing a WordPress Category – Changing your mind about a category name and wish to change it? Want to delete an entire category worth of posts because you don’t want to cover that topic anymore?

Search Engine Optimalization, Conversions, Analytics, etc.

5 ways to use Google Analytics and make your SEO life easier – Nonetheless, with so many functionalities if we don’t use its customization features, the work of analyzing relevant data can be sometimes time consuming. Analyze organic traffic more easily ..

The Realities of Successful Search Engine Optimisation in 2012 – Keywords are still important and they will still be there in your content, but how good the user experience of your well designed website is, is now paramount and also factored into Google’s ..

What You Need to Know About the Google Panda and Google Penguin Algorithms – I will provide you with an overview on each of these two Google algorithms, explain how they work, discuss how they affect website SEO, show you how to find out if your site ..

Recovery From Google Penguin – Tips From The Trenches – After spending weeks analyzing our link profile, determining spam vs. quality links, and looking at on-page factors, I’ve decided to share how I am recovering from Google’s latest visit to the zoo

Common Technical SEO Problems and How to Solve Them- This post outlines some of the most common problems I’ve encountered when doing site audits, along with some not-so-common ones at the end. Hopefully the solutions will help you when ..

How To Build An Authority Strategy For Your Company – Many enterprises have difficulty implementing a strategy to build up the visibility and expertise of key individuals on their staff. So today I am going to walk through the types of problems that come in the execution phase.

An Introduction To Conversion Rate Optimization –  SEO enables a website to be found. But it is ultimately Conversion Rate Optimization that converts the users who find your site into customers.

25 Must Read Conversion Rate Optimisation Articles – With Conversion Rate Optimisation being one of the “buzz” topics of the last few years, we all know it is something we should be paying more attention to.

Avoid duplicate contentpenalties and improve SEO – Unless you’ve been living under a rock for the past year and a half, then you’ll probably have heard of the devastation that Google Panda has left in its wake. Affiliate marketers and SEO agencies participating ..


Create CSS3 Animation Menus – In today’s tutorial we’ll create menu item hover effects that are very easy to customize by editing the css file, no images are required. We’ll animate the background buttons in vertical and horizontal positions.

Free CSS3 Menu and Navigation Tutorials- All these and many more can be learnt by any web designer through the free and useful CSS3 menu tutorials. These CSS3 menus have immense potential to enhance the visual effect of a site.

Creative Web Typography Styles – Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.

Classic Digg-Style Radio Buttons with CSS and jQuery- how we can build custom radio button links similar to the old Digg category selection. You can click on any set of links which will also trigger an active state on the correlated radio input.

Design an Awesome Product Page with CSS Background Attachments – Today I am going to show you how to create a product page for your website with awesome CSS effects. We will be using CSS background attachments and jQuery to create these effects.

20 Useful HTML5 Tutorials For You To Get Started – However, while HTML5 sounds like an awesome feature to use, one might also be confused on where to start, for these reasons we have also collected some cheat sheets to help one better understand HTML5.

CSS Button Switches with Checkboxes and CSS3 Fanciness – In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes.

Freelance, Business and Workflow Related Stuff

Why I never explain my designs before revealing them to my client – As a designer, you’re making a terrible mistake by guiding them through your design process before showing them the design.

Using low rates to attract clients – Yes, when you absolutely need $327 by Thursday, do whatever it takes. No one will fault you. But low-balling is only a band-aid. A crappy one at that. I’ve never seen it work for long. Ever. Your pricing selects the clientele. 6

Good Tips for Your Freelance Design Contracts – In freelance work, having legal contracts between you and the clients you work with is important. Contracts legally protect you and your business in various ways and helps in making sure that you’re properly ..

Entrepreneurs: 5 Reasons Why Your Products Are Not Selling – Often a consumer’s buying pattern is tailored by demographic factors, which sometimes surpresses even the consumer’s original preferences for what they really want to buy. But that’s not the only reason.

How to price your services as a freelancer – Hands down, pricing your services as a freelancer is tough. So tough that no one has really mastered it. There isn’t really a secret formula to pricing your services just right, no magical tricks that will help you land ..

Four secrets to enhancingcreative productivity – While most people attempt to force great ideas of out themselves by relentless pursuit of an answer to a problem or straining to think up original ideas, they don’t realise that most truly great ideas ..

The Creative Process of Professional Designers – Have you ever wondered how other designers do their jobs? How do they come up with incredible ideas? What tools do they use to get their tasks done? How do they manage their time?

Seven tips for successful lead follow-up – For companies looking to drive business online, lots of time and money is invested in lead generation. But what happens when the leads start flowing in? Unfortunately, it’s easy to perform reverse alchemy on leads, ..

Get the Money That’s Due to You AND Still Keep Your Clients – But worse than the negative energy that a late payment creates is the very real fact that, like most freelancers, you rely on receiving your payments in a timely fashion so that you can live.

Effective Ways of Freelancing to make it More Productive – If you have already started freelancing, then the next thing you should think of is how you can improve yourself. Here are some tips and ways for you to be more productive at freelancing.

3 Smarter Ways to Raise Prices – Raising your price can mean losing customers. However, it is possible to raise prices in such a way that your existing customers, rather than leaving the fold, stick around–and may in fact become even more loyal. Here are the ground rules to use.

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

How To Build A Trustworthy Website – We’ll go through some techniques that you can implement to ensure visitor security. We’ll run through examples from other companies and give you resources to build your own trustworthy website.

Making A Better Internet – My relationship with the Internet oscillates between waves of euphoria and waves of angst. Some things make me extraordinarily happy: like a client who loves usability testing so much when they first experience it that they can’t sleep ..

- § -

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.