2012-05-19

Another weekend, another Tweet-Parade! A collection of the best design-related articles and tutorials of last week’s blogosphere, a hand-picked weekly roundup. It’s all about webdesign, graphic design, 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. The different articles and post 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.

Text masking — The standards way - We have had a standards compliant alternative for this for the past 11 years and it’s called SVG. It can also do much more than masking, if you give it a chance.

Prioritization in CSS: id, class, tag – which has the most weight? - In CSS importance or prioritization is called specificity. So the styling with the highest specificity wins. So how are these specificities being calculated you’re asking? Here I present to you the values.

Vendor Prefixes: A Force For Good or Evil? - As different versions of different browsers understand different things, many different properties must be used to accomplish the same thing in multiple browsers.

Six Common Web Programming Mistakes and How to Avoid Them - Most new programmers (and many old hands as well) are guilty of a committing a bevy of programming mistakes, some of which can be virtual suicide for a promising app or software program.

Rotating Web Page Elements Using The CSS3 Rotate Transform- With CSS3, you can rotate Web page elements by a specified number of degrees, clockwise or anti-clockwise. With a small amount of HTML and JavaScript code in conjunction with CSS declarations, you can also animate these rotations.

Building a modern grid system - Grids aren’t new. There are, conservatively, several dozen perfectly viable grid systems already out there to help you get things done. Each brings something to the table, each leaves some things to be desired.

An Overview of the Web Storage API - The Web Storage API defines two types of storage areas ― local storage and session storage.  Local storage is persistent data which remains until it is explicitly deleted, or until the browser’s cache is cleared.  According to the specification,  ..

Source Code Comment Styling: Tips And Best Practices - Developers who have spent any time on large projects understand the importance of code comments. When you’re building many features into the same application, things tend to get complicated.

Great Online Resources For Website Designers In Making The Best Of HTML5 - Most recently, there is one tool that has granted extreme maneuverability to web designers and developers in making websites even more attractive, convenient, and productive and that is none other than the HTML5.

Two New Proposals to Solve the CSS3 Vendor Prefix Crisis -  From a coding perspective, vendor-draft modifiers seems the most logical option but I doubt it can be considered until vendors “complete” CSS3 and begin work on CSS4. Supporting unprefixed properties is more practical but will certainly cause versioning issues which couldn’t be fixed in CSS alone.

Clever Problem Solving Techniques for CSS - With the launch of HTML5 and CSS3 came new ways and techniques of using these advanced tools to resolve development challenges in clever ways. CSS3 can be implemented on websites to improve the browsing experience for users ..

Designing in the browser - Designing on the web is changing. In a world of multiple devices and capabilities we have many new, exciting challenges. I have found designing in the browser to be a helpful approach in solving some of these design problems.

SASS vs. LESS - “Which CSS preprocessor language should I choose?” is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems.

Diving Into CSS Regions - At the time of this writing, the CSS Regions specification is a working draft and things may change! The aim of this tutorial is to give a basic understanding of CSS Regions and what might be coming to a browser near you.

How to Center Anything With CSS - There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around ..

The Tilde is an Amazing CSS Selector - I recently ran into the ~ selector, which is somewhat similar to the + selector.The + selector finds the nearest siblings, whilst the ~ sign is able to target any sibling. This is big news. This is the reason we can have CSS3 slideshows with controls and many other possibilities.

CSS generated content and screen readers – Using pseduo-elements has become more and more common. There is one catch though, and many developers seem unaware of this: several screen readers will speak content that is created this way.

The “dark sides” of LESS (and probably SASS) - I’ve tried out LESS recently at a small project and first it got me very excited. The possibilities seemed endless, the benefits overwhelming. But! Yes, there’s the first “but” (and more to come). LESS doesn’t allow you to group ..

 

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

Tips and best practices to develop responsible websites - Responsive websites are website that can adapt to lots of different screen resolution and always look good. In this article, I have compiled tips and best practices to create responsible websites.

Effective Presentation of a Website’s Navigation - Users obtain information on the web in one of two ways: searching or browsing. Browsing – moving through a multi-faceted content structure – is made easier when information architects present users with an intuitive navigation hierarchy.

Use Your ‘Head’ For a Better Way to Serve Images- It’s certainly less verbose than either of the other proposals, needing only a single image element with no custom properties or other code. It’s also backward-compatible provided you either create a directory called “{case}” ..

Unbreakable Rules For E-Commerce Checkout Design - While e-Commerce websites are stealing the show of today’s rapid business world, these websites are considered to have a strong survival only if they have a solid checkout design.

Building a Nested Responsive Grid with Sass & Compass - Whether you are a hater of the technique or not, Responsive Design is one of the most important things happening on the web right now. I am finally getting a chance to work on a responsive approach to the site, but I have definitely come across a few gotchas here and there.

Responsive Images and Web Standards at the Turning Point - Recently, all of the ongoing discussion around responsive images just got real: a solution is currently being discussed with the WHATWG. We’re throwing around references to picture and img set; making vague ..

Build Responsive Websites Faster with Sass - With new CSS box-sizing options and the latest version of Sass, developers can build responsive web sites much easier now, with a combination of a few new tools at our disposal.

5 Useful CSS Tricks for Responsive Design - Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design.

The Mobile Web: CSS Image Replacement for Retina Display Devices - I see more and more devices that have a pixel ratio bigger than 1.5, even 2. Retina display seems to be the next evolution and next challenge for us as designers.

Helping Your Clients Build an Effective Mobile Strategy - Granted, we shouldn’t expect smart business managers to implement every new thing just because we tell them it’s a good idea. That wouldn’t be cost effective. But what if you know in your gut that the future of a client’s business may be at stake?

Creating a Mobile Web Application with Meta Tags - Lately there have been many updates to mobile operating systems and web browsers with more capable rendering engines. This means we can work openly with webkit CSS3 effects and even many bits of jQuery code.

The Usability Of Single Purpose Websites - For any usability or user experience enthusiast who has noticed the proliferation of single purpose websites on the internet, one question immediately comes to mind: do users need single purpose websites and do they find them usable?

A New Take on Responsive Tables - We looked at the current state of responsive tables, and we weren’t happy. Today we’ve released a new playground piece, with a new, awesome take on responsive tables. If you’ve ever tried to make large data tables work in a responsive design, ..

Relevant Tips for Good Web Usability - Any website that merely looks beautiful and attractive but lacks usability is useless. This is the more important thing to consider because without good web usability, one will not be able to reach out to their readers effectively.

 

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

The Toolbox - .. a directory of useful single-page sites and apps, by @SachaGreif

Top 10 Free Website Monitoring Services - Every blog or website owner knows the importance of uptime. Downtimes can prove to be totally disastrous for your website’s success.

Pixel-fitting - Using automatic antialiasing when resizing vector graphics leaves a lot of important decisions up to computer graphics software. So, for important icons and logos– really, for all rasterized vector images–you should fit the pixels to the grid and ensure they are as sharp as possible.

Landing Page ROI 101: Are Your Landing Pages More Like Bouncing Betties? - A preferred landing page, however, really is a special type of page. Pages designated as PLPs are the ones you’d ultimately like your visitors to come to. You want them to see these pages first, ..

Extremely Useful HTML5 Coding Tools and Resources - a short report concerning the latests useful HTML5 coding tools and resources. It is not a secret that HTML5 was created with simplifying the life of web developers idea in mind.

How Colors Help Make Websites Successful - You might not realize how important colours are in web design. If a website is green, it might as well be blue; it doesn’t matter. There are psychological effects behind each color and tone, therefore I decided to tell you more ..

New Tools And jQuery Plugins For Web Designers - jQuery plugins are released more often than people would expect and that is a good thing because this way you have a whole bunch of them to choose from. In this article I featured 38 of these wonderful jQuery plugins ..

Making Room to Breathe: Wrapping Text Around Elements - Text wrap can be a useful tool when embedding images into blocks of text and when used properly can add to your site’s readability.

Tomorrow’s web typetoday: The fine flourishof the ligature - First up, I want to talk about ligatures. Like most OpenType features, we’ve wanted ligatures on the web for ages. In addition to looking a bit fancy, the primary purpose of the ligature is to make text that little bit ..

Tomorrow’s web type today: from Qaegkvwyz to Qaegkvwyz using stylesets - I haven’t covered everything in these first four posts but by now you’ll see that using OpenType on the web today essentially comes down to these key considerations.

Stop Redesigning And Start Tuning Your Site Instead - In my nearly two decades as an information architect, I’ve seen my clients flush away millions upon millions of dollars on worthless, pointless, “fix it once and for all” website redesigns. All types of organizations are guilty ..

Web Typography: 10 ultimate steps to follow to hit the bull’s eye - Typography though can be called as an old idea but using it over the web platform is something new. The designers generally have one common and important task to accomplish – to properly carry out the setting type.

39 Beautiful Email Newsletter Templates - Email newsletters are an important marketing and communications tool for many businesses. The appearance of your newsletter can be enhanced with an attractive design, but having a custom design isn’t the only option.

Making, Using, & Bulletproofing Icon Fonts - Unfortunately, the demands placed on icons can make them difficult to use on large projects. The variations required (size, color, pixel density, texture) can bloat your icon pool to an unmanageable size pretty quickly, requiring ..

 



 

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

Beginner Tutorials on Photo Manipulation - This article will feature some tutorials on how you can manipulate your photos. Feel free to experiment and add some insights. Again, your imagination is your best tool.25 Useful Adobe InDesign Tutorials For Print Designers

25 Useful Adobe InDesign Tutorials For Print Designers- The mainly use of adobe InDesign is in Print media. Adobe InDesign is used to design graphical banners, posters, magazines, flyers, book covers and many more print related operations.

Perfect Your Typography With Tracking, Kerning, Leading, And Other Typesetting Techniques – Focusing on the basic principles of typesetting. When it comes to setting type, text entered straight into Illustrator or Indesign does not cut it. There are a few techniques that designers are meticulously taught that help them implement readable, flowing text that’s compelling and easy on the eyes.

How to Design Awesome Infographics - In a nutshell, infographics are visual representations involving data with applied design and style aspects to display written content. In forms of images plus text, some charts and other friendly resources, they extend the content of articles, ..

How to Kern Properly: Essential Tips & Resources - If you’re not manually kerning your headlines and other important type, your designs aren’t as good as they could be. There, I said it. Kerning isn’t an overtly difficult skill to become adept at – however, it is a skill that is difficult to master.

Use Split Frequency Healing to Retouch a Photo in Photoshop - Split Frequency Healing is a technique that you can use in Photoshop that will allow you retouch photos without affecting the photo’s respective tone or texture.

 

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

Why Small Business Have A Huge Advantage Over Brands In Social Media - Brands are far from becoming human and getting the user engaged for real. There are a few brands that are able to focus on satisfaction and do an excellent job on quick responses and providing solutions.

9 Steps to Take When You Loathe Your Own Blog - If you bore yourself, how do you expect your readers to read, let alone share, your content? Find a way to restart, tabula rasa. And you’re the only one who can make it happen.

Creating Content that Sells - Content is the most essential aspect on web, as it is for offline magazines and newspapers. It doesn’t matter what kind of website you own, it should carry content. Content is the difference between successful websites/magazines, and not so successful ..

6 Data-Backed Tips for Getting More Retweets [Research] - Here are the 6 most interesting data-backed tips that you can apply to your own Twitter efforts to get more retweets … and by extension more site traffic, more leads, and more customers!

A Guide How To Launch A New Design Blog- A collection of tips which I’ve implemented over the years when launching a new design blog, as well as being a good personal reference of things I should do in the future if I choose to launch a new blog.

Seven Principles of Content Marketing - Now that we’ve all agreed that “Content is King (Again),” and Content Marketing is all the rage, maybe it is time to think about some easy-to-follow tenets.  Let’s keep this simple.

10 Tips for Awesome Tumblr Theme Design - Today we’re going to take a look at what makes a great Tumblr theme. With over 1,300 options in the Tumblr theme garden, it can be difficult to stand out. Why do some themes catch so much attention while others are ignored?

5 Blogging Rules Worth Breaking - When it comes to blogging, sometimes, doing everything wrong is exactly the right thing to do. That’s because, with a little creativity and foresight, going against the grain can actually work to your advantage?

 

WordPress

Conditionally Including JS and CSS With get_current_screen - “A good WordPress citizen only loads their files where they’re needed”. There’s no justification for loading CSS and JS files on every admin page when you only need them on one single page you created. Thankfully doing things the right way is only one function call away.

QueryPosts.com - A new reference for developers that aims to be an even better WordPress code reference than the codex. Explore the site a little bit and you’ll find that function pages have tons of information, source, links to trac and github, and a list of similar and/or related functions.

Connecting a WordPress Domain to Google Apps - This tutorial will help you set up Gmail for a unique domain name for your business, blog, or whatever you’ve built on WordPress: yourname@yourdomain.com.

7 Plugins to Save Time With the Dashboard - As bloggers, we spend a lot of time working on a range of different tasks. This includes things like checking stats, monitoring ad revenue, and interacting on social media.

7 Ways to Speed Up Your WordPress Blog - With complexity of any site, the speed of the site tends to slow down. It’s not uncommon to see page load times creep past 10 seconds, which may become a death sentence in the world of the Internet. We’re going to take a look at seven ways to speed up your WordPress blog.

Adding Post Series Functionality to WordPress With Taxonomies - Ever wrote a “post series” on your blog? In this article, we’re going to learn how to create the “post series” functionality by using the  taxonomies and shortcodes.

How To: Add Custom Styles to the WordPress Visual Post Editor - In this example we will be adding a Styles drop down menu to TinyMCE, then we will add a purple button to it, and another element for writing tag lines. At WPlift we use that purple button to highlight links ..

Quality Tutorials For Creating WordPress Custom Post Types - With custom post types you have the possibility to create more interesting and unusual user experience in your blog by expressing more creativity using them. Custom post types allow users to easily create ..

Use WordPress to Create and Archive Your Email Newsletter Online - This tutorial will show you an easy way to maintain an online version of your archived newsletter, while making it easy to create each email newsletter. The difference is creating an online version of your ..

How To Customize The WordPress Admin Easily - In this article, we take a break from some of the more advanced ways to customize WordPress, and share some super-easy customization techniques for the WordPress Admin area.

The Practical Guide to Multiple Relationships Between Posts in WordPress - But some quite common tasks that we’re expecting from CMS are still missing in the Core. One such task is creating and management of many-to-many relationships between posts of different types.

Use Functions.php to Create an Advanced WordPress Theme - One of the most common uses for this custom functions file is the creation of a theme-specific control panel that allows users to determine theme appearance options on their own, without so much as a single edit to the theme’s actual files

 

Search Engine Optimalization, Conversions, Analytics, etc.

4 Content Techniques That Will Improve SEO & Sales - The less content there is, the more users will read. Pretty simple but not advantageous if you’re trying to get across a number of key selling points to new customers. Striking a balance between word count and design/usability should be the focus.

Penguin, Panda, it’s not that black and white.. - Because there has been quite some news about Google’s Penguin and before that its Panda update, people are blaming those. You need to fix all your issues, not just the ones that this specific update “targets”.

How to Protect Your Google Analytics From Getting Hacked- Within 15 minutes, anyone with a decent amount of traffic to their own site can completely CORRUPT your Google Analytics data. It’s easy, simple, and once the data is corrupted, you can’t fix the data that’s ..

Conversion Rate Optimization is Critical to Online Marketing Success - The essence of marketing is to entice new and repeat customer purchases. The smaller the marketing spend and the greater the sales, the higher the profit margins. Unfortunately, margins erode ..

What You Ought to Do If You’ve Been Punished by Google’s Penguin Update - In order to help you understand exactly what the Penguin update was…and how other actions by Google during this time, like their parked domain mistake and Panda 3.5, might have affected ..

Is Your Landing Page Copy Outsmarting Your Prospects? – True or not, the fact is that the readability of your landing page copy is critically important. If the prospect that is reading your copy can’t understand it, it will have zero chance of converting them into a customer, ..

How Does Google Define Quality - Google has been harping about quality content for a while now. Of course there are millions of examples showing garbage content at the top of the SERPs but they are slowly improving and are better than the alternatives.

Penguin or Panda? How To Determine Which Google Algorithm Update Impacted Your Website - Ever since Google rolled out Penguin 1.0 on April 24th, I’ve been heavily analyzing websites that were hit by the update.Based on my analysis, I have written several posts covering my findings.

 

Tutorials

Get Yourself Preprocessing in Just a Few Minutes - There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in which we use Jade and Sass on.

Annotation Overlay Effect with CSS3 - A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-class with the sibling combinator.

30 Responsive Web Design and Development Tutorials- Responsive design and development are still a bit new, even among the web guru community. So, here are 30 great responsive web design and development tutorials to get you started!

20 More CSS3 Tutorials and Techniques for Creating Buttons - No longer satisfied with just using the basic CSS3 properties (border-radius, box-shadow…), many developers have progressed to using @font-face icons, animation and 3D effects. All with only CSS.

Placing Content in a Randomly Generated Mosaic Effect with jQuery - If you’ve ever visited Pinterest or 500px, one of the most striking features is how content is loaded. In this tutorial we’re going to be taking a bunch of normal div’s and placing them into a mosaic of different sizes and shapes.

CSS Preprocessors – LESS Tutorials and Resources - Less helps you to speed up and simplify your development by using variables, inheritance, functions. This is very powerful CSS tool has two major versions – compiled and JavaScript powered. Basically CSS preprocessors ..

20 Useful PHP Tutorials For Beginners - PHP is a scripting language that is especially designed for the web development purpose. With the help of PHP, one can create dynamic web pages with loads of functionality. It is the general-purpose scripting language which is similar to ..

Cycle Through Client Quotes With CSS Keyframes - As a fun experiment, today we’re going to set out to build a cool little quote section that will rotate between multiple different quotes using only CSS. Along the way, we’ll learn all about how to plan and create multi-step keyframe sequences.

CSS3 Parallax scrolling slider - The Parallax effect is an optical effect. Basically, this is when we can see several shifting layers during some action. And today, we will apply this effect for vertical slider. We won’t use javascript, but only pure css3 properties.

 

Freelance, Business and Workflow Related Stuff

Helpful Tips for Designers Who are Aiming to Start as a Freelancer -  If you want to be a freelance designer, allow us to help you on how you can successfully start with the tips we have below. Chew on the tips so you can have a great start as a freelance designer.

Keep Scammers & Bad Clients Out of Your Freelancing Business - Clients who won’t pay. Clients who treat freelancers poorly. Clients who pile on more work than the freelancer agreed to. In this post, I’ll share a checklist to help you identify scammers and bad clients.

3-Step Risk Management for Freelancers - Freelancers have to step outside their comfort zone for a number of reasons. You might be offered a collaborative project with a larger team than you are used to working with, or asked to take on a far bigger project than you would ..

Writing A Creative Brief: Dragging The Right Information Out Of A Client - For every assignment, for every project, whether you are a freelancer or work a staff job, it’s of the utmost importance that you document every aspect of what is required to complete the project both correctly and in a timely manner.

Handling the first contact, the first call. Without blowing it - I don’t want to constrict you, but this first contact is a big deal. It’s where the price negotiation begins, even when we don’t mention money at all. It’s where the client senses who you are, and how it would be to work with you.

Setting the Bottom Line for your Web Projects - You need to understand how to freelance working with a bottom line. This should be your ultimate goal to achieve on every project. When working for many clients it will be difficult jumping through hoops to accommodate design choices.

5 Principles to Better Networking for Freelancers - Networking is more than just attending events and swapping business cards. Freelancers, in particular, can find fellow collaborators, future partners, prospective clients, and a tribe of fellow freelancers when they network.

Thoughts on pricing - In the past, I felt like I should always be working, especially in evenings and at weekends, because I was worried about money. It’s common for freelancers’ to feel constantly hungry.

Which is better: Many customers at low price-point or few at high price? - The ensuing discussion swirled around the merits of selling more units (i.e. maximizing reach) versus selling more expensive units (i.e. maximizing per-unit profitability). This is a choice that every startup founder must make, so I’d like to dig in deeper.

 

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

The Role of the 21st Century Designer - There is already enough stuff in the world. The software that we use already has enough features. The TV remote already has enough buttons. Now it is time for designers to start figuring out how we can design less, but get more out of it.

Dieter Rams On Good Design As A Key Business Advantage – The transcript of the speech he delivered in New York in 1976, in which he articulates his ethos of user-centered design and some of his famous 10 commandments. In 2012, they feel as if they were written yesterday.

Work harder on yourself than you do on your startup - I feel that in a startup, the quote is even more relevant. Here are some of the reasons I’ve discovered that tell me that you may want to seriously consider working harder on yourself than you do on your startup.

Selling online with the 10 laws of persuasion – part 1 - The evidence of theories of persuasion or influence is everywhere in business. However a lot of the time it’s not understood. And can you use this knowledge in your own business online.

Employing AIDA Principles in Web Design - AIDA (Attention, Interest, Desire and Action) principles are especially relevant to the design of landing pages, where typically marketing and web design meet online. Landing pages generally aim to sell either a product, service or a subscription.

BRVTY++ ? - in the wake of the current discussion about responsive images and solutions using a picture element or the srcset attribute I came across an argument that always annoys me. And I fear that the more we use that argument the more we alienate ourselves from what the web is and how it became what it is now.

 



 

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

Show more