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

Sass And LESS: An Introduction To CSS Preprocessors - Today I want to look at css preprocessors in general. What they are, how they work, why you might or might not want to use one and which one might you choose. I’ll show you some of the basics of Sass and LESS too.

The HTML5 placeholder attribute is not a substitute for the label element - One of the useful things in HTML5 is the placeholder attribute that lets you specify a short hint for text input fields (textarea elements and the text states of the input element).

Should the Standard Property Be Omitted for Some CSS3 Features? - As many of us have learned, vendor prefixes are a pain in the butt to maintain, and it’s great that CSS preprocessors and client-side scripts are available to help in this regard.

All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery - the cheat sheets presented here are about CSS3 and HTML5. It is normal to show the new ones instead of the old that you are already familiar with.

What’s the Deal With :Target in CSS? - Read on to learn all about the basic functionality associated with the :target pseudo class and how you can stretch that ability to perform all kinds of crazy stuff with pure CSS.

In Depth CSS Part 4: New CSS3 Styles - In the fourth, and last, part of our In Depth CSS series, we’ll talk about several new CSS3 features – from fancy styling to mobile Webkit development.

CSS Sprites Revisited - start up Photoshop (or your CSS sprite tool of choice), put on your LESS and Sass hats, and brush up your CSS pseudo-element skills, because we’ll be mixing and matching our way to easier CSS sprite implementation.

The Current State of HTML5 Forms - This page is intended to explore those new new features and help you understand which browsers are supporting which features and to what degree. As a whole, this represents the current state of HTML5 forms.

Speed Up Web Page Loading By Deferring Javascript - Deferring JavaScript execution is an efficient approach to accelerate web page loading and improve user experience on reading. From the true experience, an economic VPS plan only speeds website up by 20% but deferring JavaScript execution helps 50% increase.

CSS Selectors Defined – In this post I’ll briefly describe all the most well-known CSS selectors along with some examples. A “selector” is the instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling.

Using HTML5 localStorage on a form - HTML5 localStorage provides us with the ability to store named key/value pairs locally within a users browser, this means that the data stored in localStorage is still there even after a user has closed the browser, deleted their cookies or turned off their machine/device.

Endless Possibilities with Photo Filters in CSS - Photo filters are all the latest rage, and now it’s coming to a browser near you! We stumbled upon this pretty cool article on webkit-filters and we gotta admit, it’s pretty powerful.

 

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

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.

Responsive & Retina Content Images using simple CSS & a spacer PNG - So, it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer PNG (generally smaller than an GIF) and background images.

Paying attention to content hierarchy across screen sizes - What are the lessons from all this? It’s that we need to pay attention to the hierarchy of our content across screen sizes, in particular small screens. This definitely applies to images but it could just as easily apply to typography too.

Colour: User Experience And Psychology - Colour plays a crucial role in User Experience. It transmits a psychological message to your users and choosing the right colours for your brand, logo or product can be vital as it helps your brand or product get easily recognised and identified with your industry.

4 Solutions for Full-Screen Background Images - Let’s look at 4 different solutions for full page background images, starting with a CSS-only solution and moving into a few different jQuery-powered solutions. All of these solutions are free, well-documented and relatively easy ..

Dive into Responsive Prototyping with Foundation - Today, we’ll take a look at how you can dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites. If you’ve avoided responsive design ..

12 Useful Articles and Tutorials for WordPress Mobile Friendly - More people are accessing your site via their mobile phones than ever. As a website owner, this trend is a sign for you to start create your website that enable a friendly mobile experience to users.

Media Query & Asset Downloading Results - A little while back, I mentioned I was doing some research for the book about how images are downloaded when media queries are involved. To help with that, I wrote up some automated tests where Javascript could ..

Responsive web design: a project-management perspective - many of the challenges with responsive design are fairly similar, regardless of project size and budget. There are, however, additional challenges to consider on large projects, which are too rarely addressed: this article will aim to address those.

Unjarring The Responsive Web - Most responsive sites are really jarring when they jump between media query sizes. Elements start jumping around and if you were reading something, your spot may or may not still be on the screen. I really wish people would take the time to improve this.

Usability Design Considerations for Web Forms - Almost every website has some sort of web form on it, and it’s often the lead method for whatever type of conversions that website strives for. For blogs, it may be a comment or contact form, for a web designer, it would ..

Retina Images - Retina Images serves different images based on the device. Only one image is downloaded by the viewer. All standard raster images (.jpg, .png, .gif & .bmp) are able to be served as high-res. Fallback to regular image if high-res image isn’t available. Fallback to regular image if JavaScript and CSS or Cookies are disabled.

How we build our Javascript - This post isn’t strictly about responsive design but hopefully it’ll give you some insight into how you can optimise your JS to help support the goals of a responsive site.

 

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

How To Design Effective Navigation Menus - There are many different kind of websites that range from simple to extremely complex. In any case, the a good design should focus on the users and their goals: Finding certain information as quickly as possible.

A Handy Guide to Proper Typography for a Successful Design - Basically, typography is the art and technique of arranging typefaces for communication purposes. In other words, typography is a simple arrangement in order to transmit a message, while good typography is the attention ..

Interesting Online Tools That You Probably Don’t Know About (33 Items) - There are certain online tools which could be useful to you but you haven’t heard of cause they’re just start-ups for the moment and haven’t started advertising their services on every single online zone so you will get the chance to see them.

25+ Fresh jQuery and CSS3 Tutorials - CSS3 and jQuery tutorials can be used for designing drop down menus, for images with 3D effect, image slideshow with the thumbnail option, for circular elements, wave display effect, images boxes with draggable feature and many more.

7 Wireframing Tools for Designers - When designing user interface, the designers usually start with making a mockup or wireframe. It can be done by manually draw the mockup in paper or simply use some tools for making mockup  or wireframe.

Collection of jQuery Drag and Drop Plugins - For a good user interface, it is a must that its user events such as fx. user dragging etc should be perfect. So in order to help you create some awesome stuff, today we have an Amazing Collection of 25 jQuery Drag And Drop Plugins

Successful Web Design: It’s All About The Details - While the tools are out there for almost anyone to build a website, the most successful designs all share a few characteristics. These sites tend to be organized well, have great content and have all the design details in order.

What’s new for designers, April 2012 - The April edition of what’s new for web designers and developers includes new web apps, jQuery plugins, blogging platforms, coding resources, productivity and business tools, responsive design resources, and some really great new fonts.

15 Things People Absolutely Hate About Your Website - So we compiled a list of the 15 most annoying things we’ve seen on websites to act as a sort of guide for what notto do when designing your website. Take a look at the worst offenders!

40 Recently Released jQuery Plugins - The 40 plugins we have for you below have been categorized into the following categories: Page Layout Plugins, Menu & Navigation Plugins, Form & Search Plugins, Slider, Gallery & Carousel Plugins, Chart & Graph Plugins, etc

Striking Web Tips - we had to deal with couple of things everyone developing websites will face sooner or later. Get ready, here are some tips and tricks how to tackle those issues with ease!

Best Resources of CSS Sprites Generator - Sprite is a technique in CSS to reduce the number of HTTP request which made for images from any website. In this technique designers combined all images which will use in website layout and make a large image and use X and Y ..

20 Tips To Increase Website Security - You loose your readers trust (as they get Malware warning from your site), your sponsors, your hard earn money (in getting back the stuff) and sometimes even the last letter of your entire data.

 

 

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

A Non-Designer’s Guide to Typefaces and Layout - Before we jump into the specifics, the most important thing you need to know when making any design choices is why. Ask yourself this: “what is my goal?” All elements of design are able to invoke different emotions in the ..

The Importance of Grid Systems - Grid systems are vitally important in graphic design. Designers should learn the various elements, experiment with them and implement them in their graphic design work. Becoming proficient with grid systems can greatly improve a graphic ..

Finding The Right Font: Exploring 11 Different Typography Types - In fact, consider typography the backbone of the brand. Everything else adds to the overall concept to create a truly unique message, but it really all starts with a strong concept and solid typography.

50+ Fresh Typography Text Effects Tutorials - Photoshop’s text and layer tools can be used to create some really awesome effects. With Photoshop text effects you can make most designs stand out and it is not that hard! Typography is defined as the art and technique ..

Study of Font Styles and Best Uses for Each - Not only are there a plethora of font famillies but there are also the font styles within each family. So, really, the question isn’t whether or not you can get a specific font – it’s where to begin!

When Typography Speaks Louder Than Words - Clever graphic designers love to use typography to explore the interaction between the look of type and what type actually says. In communicating a message, a balance has to be achieved between the visual and the verbal aspects of a design.

 

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

Beginner’s Guide to Launching a Successful Blog - Out of the 150,000 URLs created daily, there is a high chance many of them are blogs. The blogging industry has evolved a lot in the past 10 years. In 2000 blogs were rare and didn’t exist on the same scale they do now.

To Blog or Not to Blog, That is the Question - I believe that in today’s inbound marketing world, delivering quality blog content to your target market needs to be a top priority. Connecting with your target market through content will lead to more website traffic, a larger social following, ..

3 Reasons No One Comes Back to Your Blog—and How to Fix It - Your content teaches people something useful, it’s immediately applicable, and you get tons of comments and feedback, so you know it hit the spot… Yet no one comes back. Your next post goes into the black hole of the Internet, with little to no response.

12 Great Ways to Use Your Business Blog’s RSS Feed - If you have a blog on your website, then you probably have an RSS feed which gives you lots of options when it comes to distributing your content with your audience and beyond. Let’s look at the various ways you should be using your RSS feed.

Integrating Google Calendar with your website - Google Calendar is a great tool to embed in your site, and it’s incredibly easy to do using an iFrame. You can embed a live calendar for other to edit along with you, or privately edit it whilst all visitors can see your updates to events as they happen.

6 Things You Should Do to Make Google Love Your Blog - Marketing blogs frequently publish lists of tips to help WordPress users attract Google, but those tips are often time-consuming and complicated. These six tweaks take little time and deliver maximum SEO juice ..

5 Tips to Becoming a Top Blog in Your Industry - When you start thinking of your blog as a publication, then you can start calling yourself a publisher.  When you’re a publisher, your business and editorial decisions become more clear.

Secure your Facebook data from friends’ creepy apps in just 30 seconds - Online privacy is a huge issue of concern for many Internet users and Facebook, as the world’s most popular social network by some distance, is the chief platform over which many angonize over the ..

How To Design the Ultimate Blog Homepage - For blogs, a user’s first impression is key. If visitors can’t determine credibility, navigate easily or connect with the content, they are less likely to subscribe or return. The primary job of a blog is to deliver content to a distinct audience.

 

WordPress

Manage Events Like A Pro With WordPress - If you’ve ever tried working with, coding for or just thinking about anything to do with events, you know they are a total nightmare in every possible way. Repeating events, schedules, multiple days, multiple tracks, multiple ..

WordPress Blog Hacked — Now What? - My WordPress blog has been hacked; or at least I think its been hacked. What do I do now? The WordPress Exploit Scanner plugin can help detect damage so that it can be cleaned up.

How to Launch a WordPress Website without the Headache - When you choose WordPress then there are few important things to remember that would help in completing the process easier without any headache.

Quick Tip: Make Your Custom Column Sortable – We are going to demonstrate how you could add extra columns to your post, or custom post type, admin screens (or remove existing ones). In this quick tip I build on that by showing you how to make your newly created columns sortable.

Custom Post Type Helper Class - That’s why we are going to use the power of these WordPress functions to build a more powerful class, which we can use to quickly register post types, taxonomies and meta boxes.

Introducing Easy Digital Downloads: A Free WordPress Plugin for Selling Downloadable Products - If you operate a store that sells digital downloads exclusively, this plugin should be on your shortlist for consideration as a shopping cart solution

Tips to Customize and Optimize Your Blog’s Feed - When we design our blogs, we tend to forget our visitors/users who’re following us with their feed readers. In this tutorial, we’re going to learn to “hack” our blog’s feed for a better feed reading experience for our users.

A Guide to the WordPress HTTP API: The Basics – In this tutorial, we’ll learn about the WordPress HTTP API, and the different functions it offers to make HTTP requests and handle the response.

Category Functions for WordPress - To make it happen, a variety of tasty WordPress code snippets are used, including versatile theme functions that enable getting the first category link, displaying sub-categories of the current category, displaying popular posts per category, related tags, and more.

How to Use Custom Sidebars on Posts and Pages - Today I’d like to show you how to easily add custom sidebars to use within your posts and pages. It could be useful to display different widgets according to your page or post’s topic.

Automatic responsive images in WordPress - As mentioned in our first post we wanted to try out a few relatively new techniques on this site, the main one being the inclusion of Josh Emerson’s Responsive-Enhance script to serve resolution-dependent images.

Getting WordPress to play nice with responsive images - really useful techniques for making the most of, and overcoming, inherent WordPress functionality in order to produce a truly effective responsive website. If you’re thinking of producing a responsive site with ..

 

Search Engine Optimalization, Conversions, Analytics, etc.

Upset about Google killing SEO? Don’t panic, there’s a way forward - A recent post by Jonathan Houston about Google punishing sites with too much SEO motivated me to write an article about how to make sure your site doesn’t suffer. Do not wither: there is still a way forward.

New SEO Strategies and Backlink Building Tips - Recent changes to the Google search algorithms have demanded that website owners use new SEO strategies to draw traffic to their pages. The following list is a look at five ways to build quality backlinks without getting penalized by the mighty Google.

SEO Competitor Research Guide - Competitor research is a great way to find out why other sites are beating you out on the search engine result pages (SERPs). Sometimes, no matter how closely you follow standard SEO techniques, you still are not able to crack those top listings ..

7 Link Building Mistakes You Ought to Avoid - Some significant changes have been made through those updates that can affect your link-building strategy…so let’s explore those changes and others to help you maintain if not increase your rankings.

A Common Keyword Research Mistake - Don’t make the mistake of thinking you can only target keywords with a large search volume. While it is important to incorporate broad keywords into your site’s content, don’t forget to add those long tail keywords!

How to Check Which Links Can Harm Your Site’s Rankings - So far, several websites have seen ranking drops as a result of some of their linking root domains being removed from Google’s index. Those with very low PageRank values and low social shares over a period ..

 

Tutorials

25 HTML5 CSS3 Tutorials with a Hint of jQuery - You know the recipe to create a perfect modern website? You start with a dough of HTML5, then you add CSS3 sauch, in the end garnish it with a bit of jQuery and you got yourself a tasty website.

Round-up Of Advance Level Tutorials (PHP, JQUERY, MySQL) - Some informative advance level development tutorials. If you have knowledge of html this roundup will help you to create a responsive & attractive web based application by using PHP, JQuery and MySQL.

Direction-Aware Hover Effect with CSS3 and jQuery - In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.

Create Elegant Modal Window Using CSS Scale Transform - The Modal Window we want to make will animate when showing. There are two animation we want to make, zoom in and zoom out. As we know CSS has property for scaling element using transform : scale(scale value), ..

Useful Links for Learning CSS @Keyframes Animation - so now is the perfect time to get to grips with the @keyframes syntax. This post rounds up 10 articles that explain how to use this cool CSS3 feature, each with examples and demos.

LESS CSS Tutorial: Designing A Slick Menu Navigation bar - It opens new capabilities in writing CSS syntax. For instance, by applying Mixins in CSS like the way we do in a program, we can now store default styles and values that can be applied in the entire file whenever possible

10 Gorgeous CSS3 Buttons, Ready to Be Used! - One thing you need to worry is IE’s CSS3 support. CSS3 is only well-supported (good enough) in IE9, interestingly it also support vendor specific styles (-moz, -webkit and -o prefixes). So if you’re paranoid about IE7 and IE8 ..

Adobe Illustrator Tutorial: Create a Simple Map Illustration - In the following Adobe Illustrator tutorial you will learn how to create your very own simple vector map illustration.

Powering Orman’s Image Slider Controls With Nivo - Next up in the Premium Pixels session is Orman’s Image Slider Controls. We’ll take the PSD, rebuild it for the browser, then make the whole thing functional using the brilliant Nivo Slider jQuery Plugin.

Animated Content Tabs with CSS3 - So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

How to Create a CSS3 Dropdown Menu - In this tutorial we will code in pure CSS3 the Navigation Menu, we will create an unordered listwith a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.

 

Freelance, Business and Workflow Related Stuff

Three Big Mistakes that Can Make or Break Your Design Career - These concepts definitely apply to interface designers, but if you aren’t an interface designer, there’s probably a few things here you can apply to whatever field you are working in.

Freelancing is tough. Are you ready for it? – One of the most important, overlooked aspects of owning your own design business is preparation for the inevitable rainy day. What would you do if something happened and you needed to take some time off?

Working From Home: The Good, The Bad, and 6 Rules to Make it Work - There are definitely good and bad things to working from home. The important thing is to find solutions to the bad side of things. Here’s how I have found the balance to get all my Social Media work done on any given day.

Tips to Find Balance Between Personal and Paid Work Before Life Rips You Apart - I am sure all of us have a lot of work to do during our freelance workday or even during the full-time agency job. But I am also sure that most of us have side projects as well. While some can be ..

Selling Isn’t Just for Sales People - Everything we do throughout our career involves selling. In this case, it’s not about selling a product or a service; it’s about selling yourself to get hired, to be promoted, or even to get that raise.

A freelance designer’s target audience: how do you find it? - it’s your job as an entrepreneur to DEFINE your target audience, not let it define itself. Then, once you define who your target audience is, you go after them, hunt them down, and convince them you’re the perfect ..

Getting Clients - As always, the key to everything, especially getting clients, is confidence. No one wants to deposit a check into an ATM machine that looks like it just got wheeled in place yesterday and may not be there tomorrow.

Build a Successful Creative Business - This is a stark reality, but it’s the reality. You need to be prepared to operate at a loss for three years in your new business. This is one of the reasons many freelancers start out working a full time job while freelancing on the side.

How Much Time Should You Really Spend Networking with Other Freelancers? - We all know that we need to spend as much time as we can networking with prospective clients. But how much time should you spend networking with other freelancers?

How to Sell Your Design Idea – Sometimes getting others to visualize your great idea is not so simple and takes some “selling” on your part. It may even take advance (or free) mock-up work to help some of the non-visual people in the room get on the same page with your idea.

Manage Your Time to Reap Bigger Profits – A Freelancers’ Guide - Freelancers are those who work from their own comfort zone: be it home or a public café, they can work from any space of their choice. Freelancing, therefore, comes with many advantages, such as flexibility ..

Work chunky, work better - Two hours in, two hours out. In between, leave the desk. Leave the apartment. Cut grass, wash the car, drive the kids somewhere, nap. Work sessions, not work days.

 

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

Artistic Distance - As web designers, we are often confronted with the argument that the work we do isn’t “really art” because the constraints within which we most frequently work are labeled “commercial.” Yet the solutions we create, at least the successful ones, are almost always ..

How to be sure content marketing produces sales - Ignore the “experts” preaching aimless engagement. Get focused on a purpose that is the behavioral outcome of your social campaign. Is there one? Make it so or don’t make it at all.

6 Keys For Turning Your Company Into A Design Powerhouse - While design has always been fundamental to industries such as fashion and consumer electronics, it has now spread to nontraditional settings such as airlines, consumer goods, and even governments, ..

How Responsive Design Affects Online Businesses - One obvious reason for implementing responsive design is to enhance the user experience and thereby increase conversions. When a full website created for the desktop shrinks to the size of a smartphone screen, it makes ..

Not Just Pretty: Building Emotion Into Your Websites - Emotional design has become a powerful tool in creating exceptional user experiences for websites. However, emotions did not use to play such an important role on the Web. Actually, they did not use to play any ..

Five killer ways to use numerals - As with any design tool, numerals should be used as part of a conceptual whole – they connote meaning through quantity or sequence. You can use them to lead people through a list, draw users into a calendar or sequence your navigation.

 

 

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