Tweet-Parade (no.10 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.

iPad3′s Retina Display Will Wreak Havoc on the Web - The difference of course between a native app and a website is that the bulk of the file size for native apps can be handled in one fell swoop upon download, while assets are requested on demand for the web.

How to optimize your CSS - Keeping your CSS files small and organized is very important, especially if you’re going to spend any time editing your site in the future, (or if others are gonna be using the code i.e. clients).

Pure CSS toggle accordion - We have all made one at some point, usually utilizing a massive JavaScript library such as MooTools or jQuery alongside a bloated accordion script. So my version uses no JavaScript whatsoever.

Mastering CSS3 Multiple Backgrounds - There are many reasons why you may need to create a composition of multiple images to build your background. Today we will focus on another interesting feature—how to use multiple backgrounds with CSS3.

Making Use of HTML5 Storage - The two main data storage objects are localStorage and sessionStorage. The localStorage data persists between sessions, while data stored using the sessionStorage object expires with the current user session.

Another CSS image replacement technique - Here’s the CSS behind the recent update to the image replacement helper class in HTML5 Boilerplate. It has also made its way into the Compass framework.

Ajax with jQuery: A Beginner’s Guide - Explore the concept of Ajax programming, and learn how to use the jQuery JavaScript library to build Ajax-driven websites and web apps. Code examples are included in the tutorial.

Learning Javascript: Arrays and functions - In this article we’re going to introduce you to functions and arrays. We’re also going to see a bit more of the browser’s document object model (DOM) and how it can be leveraged using JavaScript. And, not to disappoint you, we’re going ..

Embed Analytics Using the Google Analtyics API - With the Google Analytics API we can easily display some basic analytics right in each page.  Google offers many libraries for exporting your data or you can use a community developed library like the GAPI PHP library created by ..

CSS: the cascade, specificity, and inheritance - The cascade is a mechanism for determining which styles should be applied to a given element, based on the rules that have cascaded down from various sources.

CSS3 Box Shadow Syntax Breakdown - This is mainly written for CSS3 beginners, but does contain some extra info that might be useful to developers already familiar with what’s new in CSS3, including the use of shadows.

New CSS3 Properties For Better Text And Word Wrapping - The word-wrap features were the last big addition to CSS3 and it was something CSS 2.1 didn’t feature. It also works in all major browsers, including old Internet Explorer. However, word-wrap has been removed ..

CSS: The Bad Parts - In this post, I do nothing but vent. I’ve been coding websites for almost 12 years, and I’ve been doing CSS layouts for nearly half that (yeah, I was a late bloomer). I’ve come to realize what is good and bad about CSS, and here are what I consider “the bad parts”.

Mastering CSS3: 7 Cool text-shadow Samples You Can’t Miss - We’ve been exploring the basics on how to use CSS3 shadows: box-shadow and text-shadow. Today, we are going to improve our skills and look into how to build some amazing text-shadows.

Sass vs. LESS vs. Stylus — a Preprocessor Shootout - In this article, we will be covering the various features and benefits of using three different preprocessors—Sass, LESS, and Stylus.

Word wrapping/hyphenation using CSS - So the cross browser solution for doing word wrapping using CSS only is a combiation of word-break, word-break: break-word; and hyphens:

 

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

How I’m implementing Responsive Web Design - Although CSS media queries get all the love in design circles, I’ve been experimenting with using Javascript to manage the breakpoints in a responsive or adaptive layout, as well. There are definitely pros and cons to both approaches.

Usability And You: The Design Process – How we use usability in our design process. Many people seem to see usability as an impediment to a smooth design process, as something that breaks up the workflow rather than complementing it and smoothing it out.

Landing Page Optimization for More Profitable Experiences - Designing for findability, usability, and brand reinforcement are basic requirements of web experience design. But the purpose of a website is not just to be found and admired. It’s to generate leads, sales, and revenue.

The Challenge of Responsive Images - One of the most interesting being the handling of images. Let’s examine some basic techniques along with the problems they pose. In this post we examine the use of images in responsive design.

5 Simple Guidelines To Improve Your Website’s Accessibility - This article contains 5 simple, yet practical guidelines, which, in my opinion will improve your website’s accessibility. Indeed, implementing these guidelines will improve the overall accessibility for all users.

Responsive type references - When we’re designing responsively, getting type sizes right can be tricky. On small screens especially, we need to make sure that passages of body text are comfortable to read and that we don’t set headings too large or with too much leading.

Cutting the mustard - One of the immediate challenges we discovered when we first started the responsive news prototype was the large range of devices that we would have to support. It terrified us. This article is about a solution we use to alleviate this problem.

Responsive-Ready Content - So today, I wanted to expand on the discussion around responsive design specifically, demonstrating why we need a foundation of content types, micro structures, and business rules if we want to keep priority, relationships, and meaning intact.

Better Use of Paper in UX Design - People often ask me what the place of paper is in modern design, especially considering the arrival of tablets. I always say that paper has unique traits that currently are unmatched by any advanced technology. The advantages of paper include:

Tips for Designing a Compact Website Layout - In this guide I would like to share some of the most common tips when designing for mobile screens. You have to limit your knowledge of building for desktop browsers in exchange for newer compact designs.

 

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

FontFont Subsetter - Web FontFonts speak many languages, but most of the time you only need a select few. Removing the letters you don’t need can greatly reduce the font file size to make your websites faster, optimize bandwidth usage, and reduce high-traffic costs.

New tools for web design and development: February 2012 - There were more ambitious apps out there but ambition isn’t always a guarantee of quality. And, interestingly, a couple of these entries are free while not being open source. It’s a pretty good month for developers, all in all.

5 Tips to Designing a Winning “Buy Button” - First of all, the text on your button is the most important thing, but there are some other features that need to be addressed. In today’s article, we discuss 5 crucial traits of a proper “buy button”.

3 Reasons Effective Design Plays a Role in Your Success - A solid marketing plan isn’t enough to succeed anymore. With more competition than ever before a mere click away, effective design has become a key advantage. If your business hasn’t yet caught on to this fact, ..

The Basics of jQuery - jQuery is a client-side JavaScript library that abstracts away browsers’ different implementations into an easy-to-use API. What jQuery does best is to interact with the DOM, do AJAX requests, create effects (animations) and so forth.

Flexible CSS typographic scale - The best way to do so is quite possibly using a so called typographic scale, which means giving text portions precise, regular and linear dimensions, based on the hierarchical relationships they hold with other text elements.

Web Design Vocabulary Refresh Part 2: CSS Structure - This series will serve as a basic introduction to some terms that every new web designer should be sure to add to his or her vocabulary. It won’t be an exhaustive vocabulary list but rather a primer on a few terms that I found ..

Scroll to Internal Link with jQuery - One page scrolling sites have experienced a huge growth in popularity in web design in recent years. Today, I will teach you how to create a very simple one page scrolling site using jQuery.

10 web development concepts designers should know - A designer who freelances or runs their own agency, may find that they need to confidently explain technical concepts to clients. The end client is often unaware of the various specialisms behind launching a new site and ..

List of Free Applications for Web Designers and Developers - Free web applications are made simple and intuitive for users to attain quick understanding of how it works. The interface of web applications is also simple to utilise and user-friendly despite holding many functions.

Do You Rely On Embedded Fonts? – The added cost and increase in loading times may be small, but they’re nonetheless part of the price to pay for pretty typography. And, the reality is that all of these services are based on @font-face, which is freely available for everyone to use independently.

Is Your Website’s Navigation Perfect: Let’s Work On It - Browse through hundreds of websites and you will come across the same design and structure in website navigation. Although the internet is limitless, most web designers seem to have limited their thought process in terms of navigation.

 

 

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

Video tutorial: Create an editable contact sheet - here’s a quick and easy way to create a contact sheet using InDesign alone. This technique is really simple to use and will enable you to create a contact sheet document that you can alter whenever you like, if necessary.

Does Your Design Follow The Right Story? - the need for every business to tell a unique story and even more to make sure your design tells that same story in every detail. This is the principle of unity to it’s highest degree. It’s the whole being more than the sum of the parts.

4 Key Ingredients For Designing Successful Infographics - Designing an infographic can be a difficult and research-intensive task. From all the research that is involved to making sure the design conveys the right message, some say it’s art, others would say it’s a science.

 

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

6 Reasons Why Your Business Needs A Blog Right Now! - But when you’re about to start a business that has an online presence, first of all you need to know why a blog is so important in your overall effort.

Networking Guide for Bloggers: Simple Roadmap to Networking (Part 7) – Now it’s finally time to discuss a roadmap of online communication and networking for bloggers. Here are the steps that many online relationships have in common.

12 Things That Will Kill Your Blog Post Every Time - Blogging is a lot like fishing. Some people do it all the time and never catch anything…while others catch everything. When you look around at successful blogs…whatever industry or topic…there are several undeniable basics to success.

 

WordPress

Lazy Loading, WP Smush It, and Optimizing Your Website’s Performance – tips and tricks to improve the performance of your website. Some of these techniques may not be suited for all types of content but where they are, you can see dramatic improvements in page speed and functionality.

How to Create Advanced Search Form in WordPress for Custom Post Types - Therefore, we decided to create an advanced search form which lets user pick which area of the site they want to search by limiting custom post types via checkboxes. Users can combine their search queries and most importantly, we made it so the checkboxes are saved along with the search query.

21 Most Useful WordPress Admin Page Hacks - This article focuses on organized collection of some of the Most Useful WordPress Hacks for your Admin Panel which will definitely make your blogging life easier.

Writing Unit Tests For WordPress Plugins - This article shows you how to integrate unit tests into your WordPress plugin, where to write unit tests and how they can help you.

WordPress Custom Fields vs. Custom Posts Types vs. Custom Taxonomies - But if you’re like most of us, then these three terms—custom fields, custom posts types, and custom taxonomies—probably don’t just roll off your tongue at the drop of a plugin.

30K WordPress Blogs Attacked by Malware - Since WordPress and its plug-ins use open source software, black hat hackers* have the opportunity to view server-side source code and discover common vulnerabilities created by novice programmers. Once a vulnerability is discovered, ..

Talk to the Hand: 7 Things You Don’t Want to Do with WordPress - WordPress gives us so many features and options once we are in the dashboard. And if we add some widgets and a theme: presto, there’s even more. But no matter what you are using WordPress for—if you have ..

Speed Up Your WordPress by Caching Custom Queries using Transients API -  Is your theme running custom WordPress queries to show random posts, popular posts, recent posts etc in the sidebar or anywhere else? If yes, then you should consider using the WordPress transient API to cache these queries to reduce resource consumption as well as helping the load time.

How to Use Radio Buttons With Taxonomies - When editing your posts, your taxonomy terms have their own metabox, and they appear either as a checkbox list (for hierarchal taxonomies) or as a tag cloud (for non-hierarchal taxonomies). Those are your two choices.

10 Awesome Shortcodes For Your WordPress Blog - It’s time to get down and dirty with some shortcodes that you can use on your WordPress blog right now. Every single one of these shortcodes has been tested and works with WordPress 3.3.1.

Building a WordPress Security Plugin: The Basics - In this set of tutorials, we will be going through the process of creating a WordPress plugin to detect and fix any security flaws that may lie in your WordPress installation.

 

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

7 Tips to Boost Your Site’s Conversion Rate Using Images - mages not only add life to a website, they also make it convert better. People no longer want to browse a website – they want to experience it. Using the right images can boost your site’s conversions and get you to connect better with your target audience.

12 Steps to Preserving SEO When Redesigning Your Website - If search engine optimization (SEO) is responsible for driving a significant amount of of your business’ revenue, your redesign process may cause your company to lose your search engine rankings. This could be devastating and could even put you out of business.

Keywords, KWP and SEO in WordPress - It’s no wonder we get confused and switch off as soon as we hear words like this. They are BORING with a capital B. People go on about it all the time yet SEO is such a dull subject. Who really needs to know about this?

Ranking SEO Checklist - Here is a SEO checklist of the factors that affect your rankings with Google and the other search engines. The list contains positive, negative and neutral factors because all of them exist. Most of the factors in the checklist apply mainly to Google.

6 Ways to Craft Your Meta Descriptions Perfectly - The Perfect Meta Description: Following on from that I wanted to give you some simple ideas about how to create a killer meta description that will increase your click-through’s from search results pages (SERPs).

6 Indispensable Free & Freemium SEO Tools - Free to use as much as you want for any of your projects. Freemium tools, on the other hand, have both free and premium rate plans based on your needs. Six favorite free and freemium tools that are indispensable for SEO’s everywhere.

Do-follow Links vs No-follow Links – Does it really matter? - One of the biggest debates in the SEO world (and one that shows absolutely no signs of ever going away) is the do-follow vs no-follow links debate. There is one camp who stringently argue that the only links worth anything are do-follow ones; on the other hand, there is a group who say that it doesn’t really matter.

Design for Speed - A fast website is not simply a marvel of engineering. Speed can be designed and is an integral, yet under-appreciated, part of our practice. Speed on the web makes experiences more fluid and natural.

How To Do Keyword Research (What You Need to Know?) - Search engines have begun to pay attention to pages and keyword relationships, so choosing the right keywords is becoming increasingly important.

Conversion Rate – 10 Ways to Improve Leads on Website - Conversion rate of a website is a measure of the total number of leads, sales or enquiries received via your website.  Improving conversion rate is one of the highest priority for business websites and essential to the success ..

How to Improve the Bounce Rate with a Simple A/B Test - The test is best described as follows: Does hiding or showing the publication date of the article have a positive or negative impact on the bounce rate of the article page?

 

Tutorials

40 Fresh Highly Creative Illustrator Tutorials - In this post, we’ll be sharing with you a collection of useful tutorials that will help you to to use Adobe Illustrator in a variety of new ways. Whether you are a pro or a budding novice, you are bound to find something that will help you.

Photoshop Tutorials Roundup – February 2012 - Check out the PS tuts in this showcase to learn how to make a cool textured email template while using various shapes, textures, blending options, how to create from scratch an awesome dark web layout and more!

30 Free Photoshop Tutorials for Graphic Designers - There are two type of graphic design Photoshop tutorials; one is for the novice with the basic idea of graphic designing and Photoshop and the other one is the advance tutorial for the already established professional ..

New CSS And jQuery Tutorials For Newbie Web Designers And Not Only - It is not a surprise that new CSS tutorials are in fact CSS3 tutorials, it is normal that the people who make them consider showing something new to the rest of the web design community.

40 Best Ever CSS3 Practices That Will Improve Skills - we have in below css3 tutorials list as well, we guiding you all who newly using CSS3 as ultimate useful collection of css3 tutorials, how to use css3 and their modern techniques in web designs.

Innovative and Useful CSS3 Techniques And Tutorials - Today we are showcasing some of best tutorials and techniques that will help you create beautiful and functional designs using properties of CSS3.

30+ HTML5 & CSS3 Tutorials - “30+ HTML5 & CSS3 Tutorials” to get you taking place with CSS3 and HTML5. Many of the methods argued are already supported to some extent in some modern web browsers.

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App - In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool.

 

Freelance, Business and Workflow Related Stuff

5 Critical Elements That Should Be Part of Every Client/Freelancer Agreement - Without an agreement or a formal contract, it’s your word against the client’s word if something goes wrong with your project. When you’re crafting a client agreement, be sure to include each of the items below.

Things to Consider When Estimating for a Website Development Project - Building a website takes a lot of time and effort. The client doesn’t always realize just how much work goes into it. If you don’t properly set expectations and price things accordingly up front, inevitably there will be scope creep.

6 Mistakes That Will Kill Your Product Launch - Dragging your feet will kill your launch. Here are six common mistakes that lead to procrastination, and how to avoid them.

Website Pricing: How Much Does A Website Cost? - The reason it’s so hard to simply give one a price for a website is there are so many damn factors involved – even outside of the technology (which matters A LOT!).

When The Project Is Over – Gathering Testimonials - One of the most important marketing tools, especially for freelancers, are testimonials. Why? Before the project begins, and often well into it, there aren’t any tangibles. That spells high anxiety for your new client, ..

5 Reasons Your Content Marketing Must Address Price - Many business websites fail to address some of the most essential questions their potential and existing customers have, especially when it comes to the subject of pricing.

Finding Your Voice – Learn How to Stand Up and Speak Up to your Clients - Some clients already know what they need. Others don’t. So what should you do when a paying client knows what they want, but not what they need?

 

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

Sketch More, Sketch Better: The Buzz at Interaction12 - I do believe that by breaking the ‘art’ of sketching down to a set of basic techniques that can be practiced, anyone can create sketches that not only do a good job of communicating but also look good.

Why Abstraction Can Improve Your CSS - Abstraction attempts to factor out implementation details so you can focus on fewer concepts at one time. I suspect most of you have used a php include statement at one time or another. It’s a simple example of abstraction.

Your Homemade Website Isn’t Cutting It Anymore - Here’s the thing about cheap, template-driven websites: They look like every other cheap website out there. And that cheapens your brand. It makes you look like you don’t take your marketing and messaging seriously.

Most Web Design Agencies Suck - Good design takes time, but in the desire to win work, sales people, account managers and company owners continually force their staff to do more with less. The culture of winning work at all costs forces good designers and developers to do bad things, forcing them to compromise their work and act in ways that go against their better nature.

Why Are We Scared to Design Less? - I think now is a very good time for design. Not just web design, but all fields of design. More and more people are starting to understand that the purpose of design is to solve problems. Sometimes that problem might be to deliver a message or it ..

Great, Another Bootstrap Site - However, I’m starting to get tired of seeing Bootstrap sites. It’s great that developers now have a resource (really no different than WP themes) that they can use to get their sites up quickly, but why can’t people tweak the design just a bit?

How much code should designers know? - The following is a simple three-step process (Step 3 is optional) that guides you to learning “enough code to be dangerous”. Focus on these three things for a couple of hours a day, and you could potentially be programming in less than a month.

 

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