Tweet-Parade (no.13 Mar 2012)

It’s weekend! .. Time for a brand new Tweet-Parade! A Tweet-Parade is a post filled with the best articles and tutorials of last week’s blogosphere. 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.

Definition Lists versus Tables - A co-worker was using a definition list and I mentioned the accessibility issue. A table was better. But was it? HTML5 indicates that definition lists are now data lists and can take any name/value content.

How Apple.com will serve retina images to new iPads - For Apple, it probably makes more sense to show off how wonderful the screen is regardless of the extra time and bandwidth required to deliver the high-resolution version. For everyone else, the balance between ..

Getting to Grips with HTML5 Browser Compatibility - Now, in 2012, HTML5 is ready for use with all modern browsers, including IE9. It has also been developed to gracefully degrade, even without help from JavaScript or CSS resets. Even still, you may be concerned about ..

Intro to HTML5 for Designers - Together with CSS3, HTML5 is stable enough for use today and is supported on all modern browsers, including Internet Explorer 9 and 10. It is built to gracefully degrade and, when combined with landmark roles, provides even better ..

JSON-P: what it is, what it’s not and how it works - This post is aimed at developers who use JSON-P but have been been too sure about what it does under the bonnet. We’ll pin down what it is, isn’t, how it works, and some common misconceptions.

Back to basics: how to code an HTML5 template - Unlike previous version of HTML, where the code was mostly a limited structure that was determined by how you made use of the class and ID elements, html5 really attempts to provide much more structure.

HTML5 Best Practices for Designers - Learning as much as you can about HTML5 and following these basic practices will help you produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade.

Using Modernizr to detect HTML5 features and provide fallbacks - Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor’s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.

A Comprehensive Introduction to LESS: Mixins - With LESS, we can define so-called “mixins”, which have some similarities to functions in programming languages. In LESS, they’re used to group CSS instructions in handy, reusable classes. Mixins allow you to embed all the properties of ..

How to GitHub: Fork, Branch, Track, Squash and Pull Request - This guide will teach you how to properly contribute to open source projects on GitHub. It assumes that you already know about how to use Git for version control and that you already have a GitHub account.

Pro-tip: How To Backup All Of Your GitHub Repositories In One Go - Today, I’m going to present solutions for easily backing up all of your GitHub repositories in just a step or two. Minimal knowledge of GitHub fundamentals are assumed but if you have experience with writing in Ruby that’ll be a plus.

7 Facts and Myths of HTML5 - Much of what we see on HTML5 websites that is really cool or innovative isn’t the actual markup, but a combination of CSS3 and jQuery, both themselves new and exciting standards evolving right alongside HTML5.

The simplest way to handle retina graphics for iPad and iPhone - Of course this only works for background images for now but there’s not too many scenarios where a background image won’t suffice. We’re working on a fix for inline images which we hope to share soon.

CSS3 Gradient Buttons The Right Way - People make CSS3 gradient buttons for a while now, but the problem is that web-designers tend to just google some css3 gradient generators, then enter some colors in there, then copy paste some giant piece of auto-generated css.

10 Tips for Developing Better jQuery Plugins - There are some great jQuery plugins. The better ones are adopted by thousands of web developers throughout the world. Here are some tips to ensure your plugins reach their full potential…

 

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

Help your users, be focused - Do users get your app? Are you confusing them with too many features? We had an interesting conversation about focus and vision that I wanted to share with you because I think it has lessons for all of us.

Responsive Design: Streamlining Your Process - There are countless combinations of tools, frameworks, and processes to build a responsive website. While there may not be just one right or wrong way to begin, an outline is a great way to start your project. From the initial ..

Minimum Paragraph Widths in Fluid Layouts - A floating image takes away horizontal space from the text that flows around it. In fixed width layouts, you can check that the space left for the text is enough to create a decent looking column, safe in the knowledge that everyone else will see the same thing.

HTML5 Responsive Design: How to Determine the Real Dimensions of an Image in JavaScript - It’s often necessary to manipulate scaled images in JavaScript. In those situations, you need to determine the image’s real height and width.

5 Really Useful Responsive Web Design Patterns- To help reprogram your brain to consider layouts in new ways, we’re going to take a look at some interesting responsive design patterns that are being implemented by talented designers all over the web.

Testing For Dummies - When testing the devices, there are 4 main areas to cover, feature phones, smart phones with low level support, smart phones and tablets. The primary tablet market will be 7-inch devices up to 720×1280 pixels with the lowest smart phone being 240×360 pixels.

Usability Testing: Why Great Design is Only Half the Battle - Unfortunately, beautiful design is only half the equation when it comes to website marketing. A spectacular design will attract visitors to a website and keep them there, but without a strategy for creating an easy user experience that leads visitors to take a desired action, business growth is unlikely.

Content Parity - Instead, whenever I think of the concept of “One Web” and providing universal access to information on the web, I tend to break it down into something much simpler: give people what they ask for.

Stop Designing User Experience! I Mean It! - User Experience this! User Experience that! Stop it, will you? There’s plenty enough research done about User Experience . Now, can we please start designing? The problem with the Internet is that literally anything can go viral in no time.

Device Experience & Responsive Design - 2 techniques can make the process more manageable: classifying device experiences and designing/building responsively. Here’s how these two approaches can work together to optimize interface designs across a wide range of connected devices.

How to design the best website user experience - Here, we’ll cover some usability basics for modern websites. The goal is to show you pragmatic dos & don’ts to ensure you’re taking advantage of best practices and conventions.

The EMs have it: Proportional Media Queries FTW! - As I zoom in, that is, make the text larger in my browser, I’m no longer at a 14pt/16px baseline. 100%/1em in my world is now a different number, maybe 18pt, maybe 32px.

A Handy Guide to Better User Experience - User Experience is based on the reactions and responses the user performs and provides. There are many factors which can influence a user’s experience with your system/product. The following are some of the most important factors.

 

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

Sharing pattern libraries - In my experience, creating a pattern library for any project is immensely valuable, whether you’re working in a team of two or a team of two hundred.

5 Easy Steps to Optimize Your Images in Photoshop - Image optimization is critical in providing the fastest load time for your users. May it be a personal blog or a business you are running online, the fact is that images are – in most cases – an important aspect of the content of your site.

We’re in an icon-sharpness limbo - With the rise of Retina displays people are looking for resolution independent alternatives to PNG icons. Some fell in love with font-icons, some are shouting “SVG”. But I’m sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist.

7 Creative Ways to Use HTML5 Canvas - HTML5 Canvas works with JavaScript libraries and CSS3 to help you create interactive websites, charts and graphs, web-based games and animations. Integrating Canvas into your webpages is as simple as adding any other markup, but ..

Animate.css: Kick-Ass CSS Animations in Seconds Flat - Today we’re going to check out Animate.css, an awesome and free collection of CSS animations that you can apply to your projects with almost no effort. It’s a blast to play around with so follow along and join the fun.

Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites - When users land on your website, they typically read the content available. Most of the time this involves looking for navigation. In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios.

3 Fantastic & Fresh Tools for Web Designers – In the every growing world of single purpose web apps that are specifically aimed at making part of your job as a web designer a little bit easier. Today we’ll check out three of these tools that I’ve found fun and helpful recently.

Must Follow Website Redesign Rules - For various reasons, be it growth or the freshness that comes attached with redesigns, the Internet industry is changing inevitably. Are you up for a redesign or will you just sit back and let others pass by?

10 tools to analyze your website - These tools might show you anything from traffic to age demographic, and are invaluable as a part of any Admin’s arsenal, especially since there are so many revolutionary ways nowadays to measure your site statistics, besides the traditional traffic numbers.

How to Prepare for The High-Resolution Web - Whether we’re ready or not, the future of the web is going to be in High Definition. It’s been predicted for years now, but recently we are starting to see things really change. So, what is the HD web exactly?

How To Design Effective Navigation Menus - Navigation menus are the key to finding what we are looking for on a website. Without a navigation menu that meets our expectations, a website will most likely not be effective.

Selling Digital Goods Online: E-Commerce Services Compared - One possible answer to this problem is earning passive income — i.e. selling products or services instead of selling your own time. A common way to do this is to sell digital goods. But how exactly should you sell them?

10 Essential Things Your E-Commerce Site Should Have – About the advantages of online stores, we all already know that the system works. What I do want to talk about now are the home page designs and layouts that could really help your online business flourish.

 

 

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

Quick Tips for Making Perfect Logos - Designing a logo might seem like an easy job… and it can actually be that way, only if you do it wisely. This is a quick tips article and it will only take a few minutes to read it thoroughly, so please don’t skim.

6 Mistakes to Avoid When You Create infographics - Infographics is a perfect tool to unleash your design talent, get inspiration and master your skills. But when it comes to infographics creation routine, there are a few stumbling blocks which you’d better escape in order ..

30 Very Useful Photoshop Tutorials for Every Type of Designer - In this article you can see a collection of 30 very useful Photoshop tutorials that cover a lot of things and which are a great addition for every type of designer.

10 of the Best Photoshop Tutorials Created in March - It’s the end of the month and that means its time for the Best of Photoshop Tutorials series. This month (March 2012) was a great month for Photoshop Tutorials.

 

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

42 Timeless Ideas for Attracting More Visitors to Your Website - Here are 42 of my favorite timeless ideas for attracting more visitors to your website. You can bet the farm on these. They’ll be as effective in five years as they are today.

How to Automate Your Social Activities - With very little effort on your part, Ifttt will connect your online accounts and services to create triggered events. After setting a trigger from one service, you can create a task to be activated automatically when the trigger goes off.

Publish What You Learn - I don’t think anyone can deny that the Web has changed the way people teach, learn, and do research. Of course, this doesn’t mean that everything we read online is true and accurate—far from it. But I believe that through honest discussion and objective ..

 

WordPress

36 Best WordPress Tutorials of February 2012 - And as wordpress users, we should keep updated with the new development, tips and tricks shared by other developers. So every month we tried to collect the best of wordpress articles around the world.

The Complete Guide To The WordPress Settings API, Part 5: Tabbed Navigation For Your Settings Page - We’ve successfully created our own options page and introduced a few new options, but we left the project in a state that prevented all of our options from being properly saved.

Call to change WordPress widgets - Friedman’s suggestion is to rework widgets using a system similar to menus in WordPress 3.0: a user would define widget holders, fill them with widgets and then order them however they like. Theme developers would then define widget holder ..

Add Rich Snippet Support in WordPress and Dominate Your Personal Brand - The reward for adding rich snippets of metadata is that as you get more blogs published with your name, your face or logo keeps popping up in search results. This is just one more crucial way to get ..

Add Facebook Open Graph Tags To WordPress - WordPress doesn’t come with the functionality to add Facebook open graph meta tags, but you can use the below snippet to add open graph meta tags to all your posts.

 

Search Engine Optimalization, Conversions, Analytics, Loadtime, etc.

Increase SEO Juice for Your Website with Internal Linking - When it comes to SEO, there are many different factors that go into your website’s ranking. One of the best things that you can do to increase your search ranking is to use internal linking.

Duplicate Content – How Many Homepages Do You Have? - Many site owners don’t quite understand when we tell them we found at least 6 versions of their homepage.  And to be fair, it’s kind of unfortunate that search engines aren’t smart enough to consolidate obvious ..

Create Backlinks to Your WordPress Blog for Better Search Rankings - If you want your WordPress site to rank well in SERPs (Search Engine Results Pages), you need to build up a portfolio of high quality links, both to your home page and your individual posts, from a variety of different sources on the web.

7 Keyword Research Mistakes That Stifle Your SEO Strategy - Getting found in organic search is one of the most cost-effective means of lead generation, so it’s no wonder marketers and SEOs spend plenty of time optimizing their online presence to get ranked in the SERPs for important keywords.

 

Tutorials

How to Create a Mail App Icon Using Adobe Illustrator- In this tutorial I’ll tell you how to create icons for iOS-applications, we will also talk about the technical requirements that are applied to this kind of products. In the process we will be using unique techniques that will ..

CSS3 loading animation experiment - For this example, I’ll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect.

40+ Fresh And Useful Adobe Illustrator Tutorials - For today’s collection, we have put together some useful and fresh tutorials for Adobe Illustrator. These tutorials are designed in such a way that they help you use the Illustrator in more effective way.

17 Fresh New HTML5 Tutorials - As more developers quickly adapt to HTML5 for its streamlined presentation and semantic structure, there will be increasing pressure on you as a web professional or individual interested in web design to master the myriad of new techniques and rules of the HTML5 standard.

Login and Registration Form with HTML5 and CSS3 - In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font.

Illustrator Tutorials Roundup – March 2012 - Tutorials are one of the most researched design resources on the web and it’s essential when gathering any type of resource for your personal collection, to make sure they’re also recent.

15+ InDesign Tutorials for Magazine and Layout Design - Learn magazine design from concept, through grid layout and into execution of placing elements, and finish off with print production techniques.

 

Freelance, Business and Workflow Related Stuff

5 Self-Motivation Techniques for Web Developers - We all have our own little bi-polar ups and downs to one degree or another.  During the manic phase everything is interesting and motivation and energy are abundant.  The trick during these high points is to focus on one thing ..

6 Tips to Stay Focused on Project Deadlines - Staying focused on your goals may be difficult at times as a freelancer. Not having a nine-to-five job, selecting your own clients, setting your own rates and deadlines and also doing PR work for yourself is quite different than being a ..

Why Freelancing Is Not The Dream Job For You - Many web designers at some point I’m sure will take into consideration pursuing career as a freelancer, rather than working for a web design firm, simply because of the many perks which come with freelancing compared to working ..

Why You Should Avoid Job Boards Like the Plague (And How to Get Clients Instead) - Job boards are one of the worst ways to get clients. They’re great for entry-level gigs, but if you want to thrive, then you need to figure out how to move beyond that.

Market and Sell Your Digital Goods the Right Way - These ‘stock markets’ represent a good source of revenue for people of all skills, from beginners to advanced, that is why if you have not started your adventure with these places that are great for generating income, you should consider it right now.

7 ways to Increase Sales by creating Trust - The key to conversing a visitor into a client is the creation of trust. Your product can be the greatest thing on earth or the dullest office supply ever, both can be sold online when your visitor knows you are the best supplier for that product or service.

Can you pitch your design business (well) in 15 seconds? - It’d be great if everyone were as interested in our design businesses as we are, but the reality is most people are going to wander off or interrupt even if they do have 5 minutes to listen, and you’re going to sound a bit egotistical.

You Have to Tell Your Customers Where to Go - Case in point is the thing us old word slingers call the “call to action.” It’s a good label. It’s a good thing. And if you decide to hear me out, it’s very possible you’ll go where I ask you to and do what I want you to do.

Top 7 Web Design Mistakes Small Businesses Make – If you get your website designed wrong, you can easily lose thousands of dollars initially, and ultimately lose even more money in potential revenue that you could be making from a well designed, properly functioning website.

Useful legal documents and contracts for designers - Well, today we’ve brought you a list of 16 legal documents that might prove useful on your future projects. We hope these documents come handy when you need it.

How To Gracefully Fire a Client - Clients come in many varieties. Some are thoughtful, professional, cooperative and ALWAYS pay on time. Then there are the other ones. When a client goes beyond “difficult,” to being such a burden on your resources that your other clients  ..

My design client “hates” my first proof. Now what? - Those are pretty harsh words to swallow for any designer! Part of me appreciated his honesty (so we could go about making something he does like), and part of me was, well, a little crushed…and scared I’d just lost a client.

 

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

Story-centered design: Hacking your brain to think like a user -  I see many startups facing these same problems today. So I wanted to share some of the ways that I’ve changed my design process over the years to handle the complexity of large products.

Search = Poor Design - If a website has tens of thousands of pages, some form of search is quite possibly mandatory – but with smaller sites it should be feasible to organise and categorise content in such a way that makes search unnecessary.

Finding Empathy Through Generative Research – These days, most people have an idea what user research means. Even outside the usual circles of people we work with, the concept at least correlates to surveys or product testing. For the most part, however, people I run across have a strictly evaluative understanding of user research.

Redesigning With Personality - a sample chapter from the upcoming printed Smashing Book #3, written by Aarron Walter. In this chapter, Aarron explains how sharing our personalities can help us create lasting relationships with users, and how it can improve the bottom line of our business.

Give Your Website Soul With Emotionally Intelligent Interactions - What is it that makes us loyal fans of the websites and apps we love? When we sat down to answer this question for ourselves, we found that the websites and apps we truly love have one thing in common: soul. They’re humanized.

 

 

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