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

10 Terrific Resources to Learn Web Development Yourself - With a plethora of resources available both online and offline (web sites and books that offer tutorials on web technologies), you can be your own teacher.

The Five Biggest JavaScript Misconceptions - JavaScript, despite its importance and widespread use in today’s web, is a very misunderstood language. Whether it’s thinking that JavaScript is somehow related to Java, or that you can’t implement access control ..

Pure CSS Clickable Events Without :target - CSS-only click events without using JavaScript. It’s a fun use of the :active and :hover selectors.

What the New iPad’s Retina Display Means for Web Developers - The sharp, crystal-clear screens are awesome news for new iPad owners, but they create some new dilemmas for web developers who’d like to offer a better experience for high-resolution screens.

An Introduction To SMACSS Guidelines For Writing CSS - SMACSS stands for Scalable and Modular Architecture for CSS and it has 2 core goals: Increase the semantic value of a section of html and content and Decrease the expectation of a specific html structure.

Maintaining CSS Style States using “Infinite” Transition Delays - an interesting way to keep (store) a CSS style on an element using CSS transitions. As far as CSS only solutions go, there are two other tricks that can be used to achieve this similar behavior ..

CSS3 Attribute Selectors: Substring Matching - Three of the attribute selectors in the CSS3 spec allow you to check the value the specified attribute for a string match. These attribute selectors are referred to as substring matching attribute selectors.

An Introduction to 3D Transforms and Creating More Interactivity - 3D Transforms are just one of the more refined parts of CSS3, although there is still quite a long way to go before all the kinks are worked out. In this article we’ll be going over the basics of 3D transforms, ..

Twenty Advanced CSS Tutorials - We avoided tutorials that used combinations of CSS and jQuery to focus entirely on CSS development tricks. jQuery is a powerful tool, but if you want to learn pure CSS, then these advanced tutorials are a great place to start.

A Comprehensive Introduction to LESS - Technically speaking, LESS is a CSS preprocessor. In simple terms, CSS preprocessing is a method of extending the feature set of CSS by first writing the stylesheets in a new, extended language, then compiling the code to pure CSS so that its readable by browsers.

An Introduction to CSS3 Transitions - CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening as is the ..

Mastering CSS3: Useful Tips and Tricks - Here’s a collection of extremely useful and interesting CSS3 tips and tricks that web developers must have in their arsenal. We’ve tried to collect the newest resources that cover various CSS3 techniques and we do believe that you won’t ..

 

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

Password validity Hinting - When a user is entering the username and password, a small indicator in the password box shows in real-time if the typed-in password is likely to be valid. The exact mechanism and security implications are discussed below, ..

We need a standard show navigation icon for responsive web design - You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button?

The Top 6 Usability Mistakes that can take your Website Down - It’s important to understand here, that a high degree of usability is determined by how the users perceive the website’s user friendliness and not how you, as the website owner, will identify with it.

Nine misconceptions about statistics and usability - Many of the reasons are based on misconceptions about what you can and can’t do with statistics and the advantage they provide in reducing uncertainly and clarifying our recommendations.

Supporting Responsive Design in Old Browsers - This trick uses jQuery, so it is dependent on the browser having javascript enabled. The issue I was running into, is only Internet Explorer 9 worked with responsive designs, not Internet Explorer 7 or Internet Explorer 8.

Responsive Design: 160 useful tools, plugins and resources - All you may need is just one main source that answers all your questions on Responsive Web Design: a full collection of 160 Resources that cover all Web Responsive Design related topics sorted in categories ..

Tips to improve your online forms and create a better user experience: Part One - Part One of this blog post includes our favourite tips on how to incorporate additional assistance/help for users – explanations, hints, and tips – so they can complete your form as quickly as possible.

Developing a Responsive Website Part 4: Finishing The Homepage Portfolio Slider - This week we’re going to finish up the portfolio slider on our homepage that we have already started. At this point, if you view your index.php file and scroll down to the secondary screen it ..

Using Media Queries To Improve Readability - Now we’re left with the email width problem, and that’s an easy one to solve. On a mobile screen, the ideal solution here is to have the email fill the screen completely, regardless of whether the phone is in portrait or landscape orientation.

Responsive Web Design: Missing the Point - The point of creating adaptive sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts. It’s not because it’s “the right thing to do”. It’s not because it’s fun.

Reflowing Ads with CSS Regions - Chris Coyier of CSS-Tricks shows us how ads from a sidebar can reflow into the content of the page using CSS regions. View the demo in a recent version of WebKit to see in action.

Pull Down for Navigation - You can see where I’m going with this but the whole thinking of replacing a UI element with a natural gesture (scrolling on a touch screen is about as close to a ‘natural gesture’ you can get in technology) is very valuable on a mobile screen.

The Extinction of the Scrollbar - The scrollbar has provided a way for users to navigate around an object that’s too large to fit within a window. However, over the past few years, users have been given other ways to scroll: mice with scrollwheels, laptop trackpads with scrolling capabilities, and a new set of gestures for mobile devices and tablets.

Device-Agnostic Approach To Responsive Web Design - If we consider that content is king, then it makes sense to look at it as the corner stone of the solution. In other words, we should set break-points according to content instead of devices.

7 Limitations When Designing For Mobile – However, it isn’t just a matter of scaling down your design – it’s a new platform with a new set of interaction patterns and limitations. In this article we’ll explore seven UI limitations to be aware of when going from desktop to mobile web.

Content Folding - Consider a layout at a large browser window size. Two columns. Articles in a wide column on the left, advertisements in a narrow column on the right. At narrower browser window sizes we’ve decided to drop down to a single column.

 

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

The 10 Commandments of Landing Pages That Work - The landing page would no longer be a desert of confusion and bad taste. Its goal would now shift to the ethical and neighborly persuasion of the prospect to take their desired action.

What’s Coming Up Next? Use Interactive Infographics To Stand Out! Why? - Infographics do go viral if they have that touch of brilliance attached with them. One such touch is the interactivity which is pushed along with every new Infographic. Interactive Infographics will soon be the talk of the town.

About those vector icons - Why can’t we just use vector-based icons in our application? This question, in a variety of reinterpretations, keeps on resurfacing in various forums, blogs and articles. It is asked in the context of desktop applications where the same icon is used in ..

10 More Great Google Font Combinations You Can Copy - Google has certainly made its mark on web typography and stands as an excellent alternative to premium subscription services. The downside of this growth is that it’s becomingly increasingly difficult to sift through ..

Using Texture Tastefully in Web Designs - The right texture and color have the power to transform a web design into an aesthetically appealing, effective website. There are limitless options for adding versatile textures to a site, and proper use of texture can accomplish ..

HTML5 Typography Tutorials - Typography has successfully migrated from the real life into the online virtual world. HTML5 typography tutorials that you can find below describe various methods that you can use to become a HTML5 typography expert.

CSS preprocessors and “view source”: is output readability important? - Should the formatting of the rendered output of your CSS matter? Is it important for your CSS code to be readable by those who might stumble across your site and “view source?”

Use only what you need ~ I agree completely. Too many people include too much by default in their web projects these days. Boilerplates, polyfills, shivs, crazy conditional comments, rare or uneccesary meta elements, and so on.

Tips on Designing the Perfect Navigation System for Your Website - Where is the Home Button? Does this website even care about its navigation system? And, by the way, why are they using breadcrumbs when I don’t see how it could be useful? Well, navigational menus can ..

 

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

Excellent Illustrator Tutorials to Make Perfect Icons - Icons are popular in many fields but its specially for graphic designing because icons are playing an important role in designing. These master pieces of step by step tutorials will help you to make your own icons ..

Condensed fonts: The good, the bad, the ugly - Condensed variations of most fonts should be used sparingly or avoided altogether in most design projects with blocks of text. Although there are a wide-range of excuses to use them there is a simple reason why you should not

Top 10 Ways to Create a Memorable Business Card - They are easy to hand out; easy for someone to carry around, and it is usually the first impression that a company makes on a potential customer who receives the card.

Which Makes a Better Logo Design: Typographic or Symbol? - There are three main types of logos: typographic, symbol or a selective combination of the two. And these design choices have a tremendous impact on brand identity. As a result, they represent the starting point ..

Colorful pattern masking in Illustrator - The hard part is actually finding the right colors. This will take some experimentation, and maybe you might need to do a bit of browsing around to spark an idea.

What are bleed and crop marks? - In this article I will tell you all about bleed and crop marks. These two terms are used when you design for print. Setting up your file correctly before going to print is very important.

 

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

Why Your Blog Needs to Be in a Niche of It’s Own - Many people who have web sites, blogs or ad campaigns like to talk about “niches”. No matter how you pronounce it, it means the same thing. However, all you need to know is that “Riches are in Niches!”…

A Short Guide to Trackbacks - Trackbacks connect blogs together and create a network of blogs in the same way that links create a network of web pages. A trackback is a notification of linking to a web document.

Nine Things That Could Down Your Design Blog - The following twelve essential things that might possibly kill your blog should be known for the creation of a graphic design blog that’s effective ..

How to Promote Archive Posts in Your Design Blog - You have made sure that the article is well written so that the readers can get something from it. You will certainly want current readers to read it, too. You can promote your archives in many ways.

7 Ways To Use The Powerful Principle Of Social Proof To Get Ahead In The Blogosphere - Social proof is a psychological phenomenon proved with countless studies. It’s not an opinion, it’s a fact: in the words of Robert Cialdini, “..we determine what is correct by ..

Unleashing Facebook Page Timeline Tips with a Riveting Showcase - After Facebook launched Timeline for profiles, it was pretty obvious that the social media giant would eventually push similar changes to Pages. Are you excited about the new Timeline ..

 

WordPress

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. Add the following code to your functions.php

Developing WordPress Themes Using Responsive Frameworks - Responsive design is slowly but surely becoming an expected standard for web developers. This tutorial will show you how to add a responsive framework to your next WordPress theme.

Stop adding code to your WordPress theme’s functions.php file - So those the guidelines. Stop adding code to your functions.php file UNLESS it’s meant only for the theme you are currently using. Otherwise, create a plugin.

WordPress plugins for user-submitted & user-generated content - Using the examples below, you can learn how to do the same with your WordPress site or blog. There are various methods that can be used, ranging from the built-in system to numerous plugins, enabling various types of user content contribution.

How to Create Infinite Scroll Pagination - Infinite scroll pagination is inspired from Facebook and Twitter. This is just pagination where the user will need to scroll to bottom of the page to read more articles. This is one way to improve the user experience on a website, but if ..

WordPress Robots.txt Optimization - It is recommended by all search engines to use this robots.txt file so that they don’t waste time and resources crawling and indexing files which you don’t want them to be indexed. Here is what WordPress recommends your robots.txt file to look like.

WordPress Conditional Tags (And Snippets) for Beginners - One of the best features of the WordPress could be the conditional tags. It allows you to tell the code to act differently in specific situations. You can also redirect to post if search query only returns single result.

The header.php – What Needs to Go in It and What Doesn’t - In this tutorial, let’s talk about the header.php, an essential file for any WordPress theme. I’ll show you a nice header file example and give tips about what needs to go in it and what doesn’t.

Useful WordPress Tools, Themes And Plugins - If you’re looking for some great ways to improve your WordPress workflow, read on for a massive collection of free themes, plugins, tools and tutorials. These resources were all linked via the Smashing Magazine Twitter stream, ..

Add a Custom Column in Posts and Custom Post Types Admin Screen - How to add a new column to the WP Posts management screen and in this column we will show the Featured Image of each Post. This new column will also be added in the management screen of any active Custom Post Type.

 

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

Alert! Google Announces a New SEO Over-Optimization Penalty - All of this leads us to the question, “What is over optimization?” This is a tricky one when you actually start to think about. And so to help us get to the answer, we’ll set up an imaginary dialogue between two people.

Revealing the #1 Most Powerful SEO Trick Ever - The big question at the core of SEO is: How can I get the maximum traffic for a given amount of effort? For a while, I’ve been transfixed by the Long Tail.

21 Great Tools To Optimize Website’s Loading Time - When it comes to WebSite Optimization, the first thing which could come in our list is to check the website’s loading Speed that is how long it takes to load your webpage. How fast it Loads?

10 Efficient Ways to Build Quality Links to Your Website - Link building is the most difficult task in SEO, no doubt. Why? Because it is time-consuming, and requires careful research, and the results of which are not guaranteed. For the same reason, many SEOs either ..

Basic Guide To Google Webmaster Tools - Google Webmaster Tools is one of the most popular tools in SEO and makes the work of webmasters much easier. This tool allows a webmaster to keep track of a Web site’s traffic, analyze its robot.txt files, add site maps, and so on.

How Sitelinks Are Quietly Costing You Conversions - Under certain conditions, Google will bump a sitelink up to the main search result. Potentially, and sneakily, costing you conversions. One of those conditions might be the content of the sites linking to you and the location of the person searching.

 

Tutorials

Get more out of your CSS transitions with jQuery - You’ll see how easily we can extend the usefulness of these CSS features by adding just a tiny bit of JavaScript. We’ll create a more advanced interaction while keeping our code nice and simple. The best of both worlds!

15 Retro & Vintage Photoshop Tutorials to Become Expert - the best out of many tutorials which will guide you on your way to become expert. These tutorials are unique and for sure you will learn some new techniques that you can use in your upcoming projects.

Informative Parallax Effects Tutorials - We’ve gathered for you a bunch of awesome parallax effect tutorials so you can improve your skills in creating this extraordinary effect.

How to Illustrate a Vector Vacuum Cleaner - Do you want to illustrate a vector vacuum cleaner? You’ll learn some excellent vector illustration techniques in this tutorial, as well as use powerful Illustrator tools, such as: 3D tools, Opacity Masks, and Blends.

Build a 360 view image slider with JavaScript - We’re going to build a 360 view image slider. What can you use it for? Well, it comes in very handy when your client wants to show their product from every angle rather than showing just a couple of simple angle shots.

Responsive Content Navigator with CSS3 - Today we’ll show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that we’ll show or hide using the :target pseudo-class. With CSS transitions we can make the slides appear in a fancy way.

 

Freelance, Business and Workflow Related Stuff

The difference between freelancers and entrepreneurs - Are you a freelancer at heart? Or an entrepreneur? In one important way, freelancers and entrepreneurs are carved from the same timber. They are both fiercely and genetically independent.

A Beginner’s Guide on How to Pursue a Graphic Design Career - Time to opt for a real career and get out of your part-time money-earning world? It isn’t easy out there especially when you want to opt for a career option which isn’t as safe as the job of software engineers is.

Stop Wasting Time with Prospects Who Aren’t Serious - Save yourself that 45 minute drive and a fruitless two hour meeting by having a preliminary telephone conversation first, to determine if there’s even a reason to meet. It may seem counter-intuitive ..

Starting a Design Project - The first priority when getting a new project underway is to understand exactly what the project is about. I know it might sound obvious but it’s a little bit more complicated. Below I’ve listed a few important questions I ask myself prior to embarking on a ..

5 Primary Questions to Ask a Potential Client - In order to accurately discern which potential clients should earn the time and focus of your company, it’s essential to employ the art of qualifying leads. Qualifying is the act of determining which projects are the right fit for you.

How to Set Yourself Up for Freelancing Success with Proposals - Proposals make a great impression and help your potential clients see exactly what you’ll be providing for them. Having clarity about your work and having your client sign off on it can prevent any problems in the future.

Explaining Creativity To Clients - Is it that clients don’t understand business or is it they don’t understand creatives? Why is it creatives around the globe all have exactly the same complaints and horror stories about clients from hell?

The Psychology of Empathy & How To Use It To Sell Your Design Services - Empathy, as it turns out, is about making your customers feel understood. Read that again. Because think about it: don’t we all just want to be heard, even if what our opinions aren’t ultimately implemented?

How Much Code Should Web Designers Need to Know? - Arguably designers by definition do not need to understand any programming. Design is just that – pretty pixels in an image. However many talented individuals are coming forward who take the time to study both fields.

7 Ways to Toughen Up Your Freelancing Game - Freelancers, from independent creatives to technical consultants, juggle multiple clients, spearhead their own marketing efforts, and work tirelessly at their network of mobile offices from the home dining table, coffee shop ..

 

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

The web was always responsive - The web is inherently responsive. It’s in it’s DNA. If you create a structured HTML document with no CSS applied and open it in any browser, you will see it is naturally fluid and will fit any window size.

Das Design Revolution - Experience design comrades, I speak to you today because I have a vision. A vision where one day the person who really matters is back at the heart of our design processes. Rightfully claiming pride of place at the centre of all decisions regarding our websites, interfaces and systems.

How Metrics Can Make You A Better Designer - User satisfaction and acceptance should be the driving force behind your creation, not the principles and points mentioned in that project document.

Your Ego is a Bad Designer - We don’t fail at design because we lack tools, time, money or the right clients. We fail at design because we lack insight. We don’t fail at design, we fail our design.

Stop solving problems you don’t yet have - However, despite us entering a seemingly golden age of browser consistency, what I am seeing is an increasing reliance on a whole slew of polyfills, CSS frameworks and boilerplate starting points.

Can We Drop the Term UX Design Already? And Other Rants - We were blasted by a group of people suggesting that we were committing heresy by even suggesting the term doesn’t mean anything. We’ve been steadfast in our view that user experience design isn’t a discipline at all.

The Ingredients Of Effective Communication - Communication is central to web design. Communication has two parts, the message, and the delivery or package of the message. Is one more important than the other? Can communication happen if only one is present?

 

 

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