Tweet-Parade (no.5 Jan-Feb 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, etc.

More or LESS? - LESS and other CSS preprocessors are tools which, through the use of things like variables, mixins and operations, weave programmatic principals and logic into otherwise static CSS. Think of it as supercharged CSS.

Learn to Program - rather than wasting time debating HTML tag use, developers should focus on learning how to program. I think this is great advice. So to that end, I’ve compiled a roundup of sources where beginners can expand their skills past HTML and CSS.

The Brand New CSS4 Selectors Specification - Yeah, the CSS4 specification is already in the early stages of being written (for selectors, anyway). I must stress just how work in progress this is, in the sense that some of this stuff might not make the final cut, while more stuff may be added.

CSS3 & jQuery folder tabs - this time I will show you how to create folder tabs using nothing more than pure CSS3.

How to Put Your CSS3 on :target - CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets. Consider a page URL such as http://mysite.com/page#mytarget; an element with the id “mytarget” can have matching :target styles applied.

How to create animated tooltips with CSS3 - In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after.

From jQuery to JavaScript: A Reference - Whether we like it or not, more and more developers are being introduced to the world of JavaScript through jQuery first. In many ways, these newcomers are the lucky ones. They have access to a plethora of new JavaScript APIs, ..

Quick Tip: Perfectly Positioned Plusses - This Quick Tip is aimed at those of you who have an understanding of CSS, have more-or-less figured out what positioning is about, and are looking for the perfect excuse to put it to use ..

* { box-sizing: border-box } FTW - I have a recommendation for your CSS going forward * { -moz-box-sizing: border-box; box-sizing: border-box; } This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box

CSS3 For The Real World - The chances are you’ve seen some of the amazing things that have been done in CSS3. Unfortunately, most of them aren’t practical for you, or your clients. Below is a carefully-curated list of real-world examples and snippets of CSS3 that can be safely used to enhance any piece of work you create.

Git For Designers (Part 1) - Wouldn’t it be nice if you could take a snapshot of your site now, do your experiment, and not have to worry about whether you mess things up? That’s exactly what version control is for!

Learn about LESS and why it rocks so hard - LESS=The dynamic stylesheet language. LESS extends the standard CSS syntax. This means that you can create a LESS stylesheet using regular CSS, and just add LESS code to the stylesheet as and when you need it.

Float Mania: Explanation of How CSS Property Float Works - As previously I was asked for several times: “why float is displayed wrong?”, I decided to write this note, which would explain typical situations a beginning coder runs into, and when someone asks me again ..

 

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

5 Signs of a Great User Experience - In short, Path has a great user experience. That isn’t the deciding factor on whether a tech product takes off. Ultimately it comes down to how many people use it and that’s particularly important for a social app like Path.

Developing a Responsive Website: The Homepage Portfolio Slider – We are going to continue on with our designing a responsive website tutorial where we have already learned about the background images, the site’s navigation and the content. This week we’re going to work on adding a little more content to our homepage.

Build It With The User in Mind: How to Design User Flow - A major factor affecting your conversions is user flow. It’s the path a user follows through your website interface to complete a task (make a reservation, purchase a product, subscribe to something).

Seven lessons learned from responsive web design - Rather than anticipate our users’ preferences, we developed a responsive site that adapts and feels natural on a wide range of web-connected devices. Responsive web design was central to our development strategy, but it ..

Responsive Web Design – Three key technical features are at the heart of responsive web design: Media queries and media query listeners, A flexible grid-based layout that uses relative sizing and Flexible images and media, through dynamic resizing or CSS. Truly responsive web design requires all three features to be implemented.

jQuery Mobile – What You Need to Know - jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.

Responsive Images: How they Almost Worked and What We Need - It’s our job, as designers and developers, to pick apart even the seemingly most simple tasks to find ways to improve them. When Ethan Marcotte coined “responsive web design,” he said that a responsive website is made up of three things: a flexible grid, flexible images and media, and media queries.

Improve Your Website’s Usability in 7 Easy Steps - A user is not a technical aristocrat as a web designer or a developer is and is basically looking for a swift, simple and sorted and effective way run across the web site. One of the conundrums that a designer faces is to strike a ..

Total (Memory) Recall - Usability Expert Jakob Neilsen suggests we design for ‘Recognition over recall’. In his article Ten Usability Heuristics he warns “the user should not have to remember information from one part of the dialogue to another.”

Leaving Old Internet Explorer Behind – Using media queries to make a clean break from legacy browsers. The styles that make up the mobile version of its layout, which I’ll call the Narrow Layout from now on, are not inside a media query, while the styles that make up the wider versions are.

Using max-width on images can make them disappear in IE8 - It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

8 tips for a sane IA - One of the hardest parts of a website project is to work out where everything goes. Once you’ve got a handle on what is going to be included (often via a content audit of a current site) it is best to create a structure by working with the low-level, granular content items.

Essential considerations for crafting quality media queries - Learn what you need to know to set up media queries that maximize efficiency and robustness for your particular project. There are pros and cons to making your media queries embedded versus external, ..

Molten leading (or, fluid line-height) - When a responsive composition meets a viewport, there are different ways to fill space. What interests me most here is a fundamental triadic relationship in typesetting — that of a text’s font size, line height, and line length.

 

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

How to Properly Redesign a Website - Redesigning a website happens very often on the internet today. It can be thanks to the new technologies that appear one after another (and every one of us wants to stay in fashion) or because the rules change from month to month.

Simple Responsive Design Test Page - This bookmarklet lets you see how a page looks within different screen sizes. The bookmarklet lets you run it on any page (regardless of filename) and saves you the step of having to add the test page to each folder. (FF + Chrome).

50+ Best jQuery Carousel Roundup - There are many excellent free jQuery Carousel plugins available and it makes it difficult to choose. This article has been created specifically to help you get started using jQuery Carousels but you may also want to check out some jQuery sliders.

Learn to Program - rather than wasting time debating HTML tag use, developers should focus on learning how to program. I think this is great advice. So to that end, I’ve compiled a roundup of sources where beginners can expand their skills past HTML and CSS.

The Future Of Screen Typography Is In Your Hands - Tablets, Nooks and Kindles make buying a book or magazine for the screen almost unavoidable. With smartphones, we carry our reading material with us and enjoy instant Web access, enabling the reading experience to flow ..

The Handpicked jQuery Plugins Repository - One of the greatest things about jQuery is the ever-expanding userbase. In the past it was common for libraries to have a small following, with only a handful of plugins and widgets made by advocates of the library.

20 Tools to Check Your Web Site’s Performance - The crucial factor in the successful performance of the website is its speed. One cannot negate the fact that the internet users are impatient and looking for instant gratification. Thus if your website is not quick loading and dull in ..

Essential Principles for Creating Minimalist Web Design - Today minimalism is one of the most widely used design principles and can be conveyed through various art and design related fields, from movie posters, fashion, print adverts, games, business cards and brochures.

Developing for old browsers is (almost) a thing of the past - It used to be one of the biggest pains of web development. Juggling different browser versions and wasting endless hours coming up with workarounds and hacks. Thankfully, those troubles are now largely optional for ..

Zocial - A semantic set of CSS buttons (no images used) that are beautified with @font-face icons. There are buttons for 40+ services including Facebook, Twitter, Google+, PayPal, LinkedIn and much more.

 

 

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

Colour Combination Makes a Better Impact in Logo Designing - A big part of many company’s brand identity is the logo. It’s like the face of your company. You need one that’s good looking and instantly recognizable. To that end, colour can make a big impact on not just how ..

8 Typography Design Elements To Consider for Print & Web Design - Typography is a fundamental principle of good design. Whether you’re designing for print or the web, good typography helps balance the visual structure of your design between the content and the visuals.

The Psychology Of Color In Design - Color is light and light is energy. Scientists have found that actual physiological changes take place in human beings when they are exposed to certain colors. Colors can stimulate, excite, depress, tranquilize, increase appetite and create a  ..

6 Free PDF eBooks on Typography - As typography is becoming essential part of designs, so now it’s important to learn more about typography skills too. Web is full of free content to learn typography, but here i am listing 6 free PDF ebooks which should help you power up your typography skills.

Working with Guide Tool in Illustrator - You must be familiar with Guide Tool in Illustrator. But have you consider yourself using this feature optimally to speed up productivity, to help organize and accurate place your illustrations, and be more precise when creating artwork in Illustrator?

Create a custom lettered logo in Illustrator - Learn how to slice and dice shapes to create a logo form that is simple yet recognisable and, most importantly, ready for print. This tutorial will only skim the surface of possibilities but these foundational methods can unlock infinite ..

 

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

7 Splendid Techniques to Encourage Comments on Your Blog - One of the best ways to gauge the health of your blog readership is to check out how many comments you have for your posts. More comments mean that your readers are actively engaged in what you have to say.

8 Things Your Blog Readers Want More Than Good Content - Content is king! You already know that’s true, but is it everything? Could you keep on pumping out great content and still build an audience of loyal readers?

10 Tools for Increasing Traffic to Your Blog - With so many people having so much to say, traffic to a blog may be a tricky thing to grasp and hold on to. Do no despair: there are ways – and most of them do not even require that much time or effort.

5 Blog Redesign Mistakes That Kill SEO - SEO, when done right, never interferes with web design, but sometimes redesigning a site can unknowingly interfere with search engine optimization. This is why teamwork among SEOs, designers, marketers and developers is critical ..

15 Amazing Twitter Tools for Increased Productivity - Twitter provides designers with the ability to communicate and network in a way that can be really productive for business. However, spending too much time or not having a specific purpose with social media can become a major drain on your time.

 

WordPress

WordPress tip: Use shortcodes in theme files - Many people asked me if it is possible to use WordPress shortcodes in theme files. Yes, it is – Follow this simple recipe to get started!

Daily Tip: How To Store Multiple Autosaves - The autosave feature is entirely separate to any drafts that you save via the Save Draft button. Theoretically, you can save as many drafts as you like. However, each subsequent autosave overwrites the previous one.

Best of WordPress Anti-Spam Plugins and Why You Need None to Fight Spam - Today, while skipping rope I was pondering (my level of concentration increases when I skip rope) the reason behind the availability of innumerable anti-spam WordPress plugins. Did the ..

Free Blank WordPress Responsive Themes & Theme Frameworks - We have looked at responsive WordPress themes in the past and that post proved really popular – the web design world is buzzing at the moment with this new method we can use to serve up different versions ..

15 Essential Free SEO WordPress Plugins - An excellent search engine optimization is very essential for running an online business and the on-web page contents offers you more benefits. These are powerful components which yields best optimum results.