Tweet Parade (no.35 Aug/Sep 2012)

It’s Saturday and by now you know what that means .. it’s time for a new roundup with last week’s best articles and tutorials found on the interwebs. It’s all about web design, graphic design, branding, 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. These hand-picked articles and tutorials 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.

An Easy Guide To HSL Color In CSS3 - The CSS3 HSL color method is well-supported in modern browsers but somewhat neglected by coders, partly due to the fact that HSL is quite different from alternative CSS color models

Semantic Grid Class Naming With Placeholder Selectors in Sass 3.2 - CSS frameworks are known for taking a club to the idea of semantic HTML. This is such a problem that developers everywhere have entirely sworn off the idea of grid-based frameworks solely on the principle that it leads to non-semantic class names.

HTML5 autofocus Attribute - HTML5 threw a whole bunch of awesomeness at us. Another simple functionality HTML now allows us is auto-focusing on elements upon page load; this is accomplished using the autofocus attribute.

Essential JavaScript:the top five script loaders - The theory is that script loaders, when loading in multiple scripts through the use of <script> tags, block the page loading; a page can only render itself once all the JS scripts have been loaded.

Practical Tips For Using LESS - The goal of this tutorial is to expand on the knowledge from the previous article and give you some practical tips on how to utilize all the great things about LESS.

Stick your landings! position: sticky lands in WebKit - position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent

CSS Sprite Sheets: Best Practices, Tools and Helpful Applications - Using CSS sprites will improve your web pages’ performance and keep things more organized. Let’s take a look at some best practices and some helpful tools for your sprite-making workflow.

 

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

The Ultimate Guide for Utilizing Adaptive - Adaptive Images is a technique created as a simple, streamlined way to make sure images appear properly on any sized device. Tablets, smartphones, smaller-than-average monitors—Adaptive Images detects what ..

How do you pick responsive images breakpoints? - For a few months now, I’ve been puzzling over the question of how to pick responsive images breakpoints. It has become a koan to me—no more answerable than the sound of one hand clapping.

Responsive HTML5 video - There are a couple of ways of approaching this, although none of them are perfect. The great debate about adaptive images continues, and is also appropriate here, as having something similar for both video and audio files would be ideal.

Is Responsive Design Right For Your Content Marketing Strategy? - Content prioritization is the first step in a user-centric approach to responsive design. Break your web content into core elements or building blocks. To prioritize, ask yourself, ..

Responsive Email Newsletter Design: Increase Mobile Readership - In order to develop a good solution for portable devices, it is a good idea to start mocking up two layouts right from the beginning, one for desktop and one for mobile.

Find the right words for your mobile… first - Mobile connections will increase from 6billion today to 12billion in 2016 – just four years away. It’s not hard to grasp the importance of providing users with a solid mobile experience. So why is Mobile First so difficult to sell?

Master CSS pixels forRetina displays - Resolutions are increasing as screen sizes, in many places, shrink. Ultra-high pixel density displays, smartphones and tablets provide a new environment in which to foster fresh techniques.

Responsive Web Above The Fold - For the last couple years we’ve all been resizing our monitor widths like giddy accordion players to better understand RWD. To get started with vertical RWD is a simple matter of addressing heights.

Complex navigation patterns for responsive design -  I urge you: use mobile as an excuse to revisit your navigation. Look at your analytics. What are your experience’s key sections? Where are people spending most of their time?

Responsive Design case study - This post aims to outline the entire project processes and act as an informal case-study for the construction of a large-scale responsive website. The South Tees site contains over 1,000 pages and while Responsive Design is not a new technique, documented examples of client sites on this scale are few and far between.

Where print fits in responsive web design - Print layouts are limiting. There isn’t much you can do in the sense of advanced layouts, even floats can cause problems. For print it’s a matter of reducing the visual noise, extracting the content and determining useful supplementary information.

How to Design for the Retina Display - The only problem is, this adds yet another problem for designers and developers. When we look at our crisp graphics on a normal screen, they look fine, but on the Retina Display, they appear to be blurry.

Beyond Wireframing: The Real-Life UX Design Process - We recognize different research methods, the prototyping stage, as well as the process of documenting techniques in our rich methodological environment. The question you probably often ask yourself, though, is how it all works in practice?

10 Responsive Navigation Solutions and Tutorials - As responsive design rapidly increases in popularity, we felt we would take a look at some of the varied solutions and techniques that are being adopted for managing the navigation/menu on smaller screened devices.

The Ten Commandments of a Great Mobile User Experience - In order for us to design for mobile we need to understand the new fundamentals and principles of mobile design and have a strong contextual foundation before laying down the first pixel.

How to use Google AdSense Ads on Responsive Websites - If you been using Google AdSense Ads on your responsive website, you may have noticed that, unlike your content, the Google ads have a fixed width and they will not shrink or expand based on the device size.

15 things you can (and should) do to make your site faster for mobile users - There are a number of fundamental and advanced tactics that you can use to take on these challenges and win. I’m going to give an overview of each one here, ..

Media Query splitting - Later I shifted to “Mobile first” where you start out with the Mobile styles and overwrite them for Desktop sizes. But on a recent project I’ve started using a different approach bysplitting the styles instead of overwriting them.

 

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

Simple Web Design Tips for Social Media Icons - In order to increase the base of your ‘fans’ and ‘followers’, high importance must be given to the design and the positioning of social media icons, on the pages of your website.

How to Reduce and Optimize PNG Images - If you just take the picture you snapped with the 8 megapixel camera in your new iPhone and upload it to your site, it may look great, but the file size will be gigantic.

Effective design principles for web designers: Repetition - Repetition typically shows up on websites as repeated visual elements that appear throughout the pages on the site. Elements that can be repeated with effectiveness are colors, shapes, textures, fonts, typography, and on.

Mathematics and Web Design - Someone once said that mathematics is one of the most beautiful sciences in the entire world, as it represents order and symmetry. Today, we know that mathematic calculations represent important pathways through which we ..

Creating Effective Web Design for Your Visitors - Websites can have many requirements. The purpose of your web page—that is, what you want to accomplish with your web page—is important to identify before any work is started.

Create Killer Landing Pages to Convert Web Traffic into Paying Customers - Anyone who is trying to sell a product or service online needs to include creating optimized landing pages as a key strategy in converting web traffic into paying customers.

Create wireframesthat work for you - In this article, we’ll discuss thumbnails, wireframes, and grayboxes. We’ll see how they fit into our workflow and what purpose they serve. The article should serve as an introduction to the wireframing process, and an overview of the key decisions it involves.

10 Best Open Source Tools for Web Developers - There are thousands of great open source applications and picking the best among them is really hard since so many people have their own personal favorites.

Why It’s Important to Sketch Before You Wireframe - It’s impossible to go from a simple idea in your head to immediately building it out without hashing out the details in between. Sketching out your idea before you build is necessary for every designer to do.

The ultimate freelanceweb design tools - We asked a number of leading designers to provide us with their favourites, so you can ensure your survival toolkit is the equivalent of a super-powered laser-armed jetpack, rather than a digital abacus.

The mistakes killing your conversion rate - You probably pride yourself on being a great web designer, right? But did you know that some elements of your website designs might actually be lowering the conversion rate and revenue of your website without you knowing it?

jQuery plugins for awesome web typography - Typography is a very important part of a website design. But it is also often neglected. In this article, I have compiled the most awesome jQuery plugin to take total control of your site typography.

Redesigning Your Website With Simplicity - Simplicity always triumphs not only with the creator but also with your website readers. Simplicity points towards what exactly you wan your visitor to do. No matter the business, here are some things to keep in mind during the design process.

20 Fresh CSS Generators for UI Elements and Animations - Here comes the online generator, which can easily display the designated preview based on CSS code and save you ahead of time. There are many almighty generators or specific ones that cover all features of CSS3 like border, radius, etc.

Parallax Scrolling Scripts and Plugins - To help you choose a JavaScript or jQuery library or plugin for doing this sort of thing, in this post I’ve put together a list of plugins and scripts to choose from.

Three reasons your portfolio website sucks - It was designed to bring in new clients, get you picked up on design blogs, win the respect of your peers, prove to your ex-boss that you do have what it takes afterall, and impress your Mum. And yet it still sucks.

50 Free web elements in CSS3 - All these 50 web elements are free and serve best for describing presentation semantics. Using this you can improve the look and structure of your website with better effects and elements.

The Key Components of a User-Friendly Website Navigation - The navigation of your website is a key component that directly impacts you from a business and marketing perspective. After all, a navigation is often what stands between ..

Beautify CSS Form: Examples, Tools and Solutions - How can you style a form without building one? With the following tools we collected, a desired form could be built within seconds. And lastly, some solutions are provided for a few of the examples on the top.

15 Ways To Optimize Your Website’s Landing Pages - A landing page is a page on your website where you want visitors to complete a specific transaction, such as donating money or joining an email list.

 

 

 

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

10 Photoshop Quick Tips to Improve Your Workflow - we are bringing you 10 quick tips that will hopefully speed up some of those tedious Photoshop tasks. All of these tips are image-related, as working with images is not necessarily the favorite thing for ..

45 Fresh And Useful Adobe Illustrator Tutorials - Some fresh Adobe Illustrator tutorials that will help you in learning the tool. Adobe Illustrator is a wonderful and very powerful tool that has been extensively used in the designing industry.

Adobe Illustrator Tutorial: Create a Set of Sleek Web Ribbons - In the following Adobe Illustrator tutorial you will learn how to create a set of sleek web ribbons. We’ll start with two simple shapes and some basic masking techniques.

20 Photoshop secrets to improve your skills - Photoshop CS6 is an amazing bit of software that many designers use on a daily basis. It’s such a flexible bit of kit that you could spend a week learning new features, and still have only scratched the surface of what’s possible.

This clearly isn’t an Infographic… - There many people across a range of industry types, most notably marketing and design, being lazy in their approach towards creating infographics – drawing readers in with colourful graphics, which really show nothing and confuse us even more.

Font-a-bulous! A Beginner’s Guide to Making Your Own Fonts – Don’t worry if you’re not the most technologically-capable person in the world. This step-by-step tutorial will make everything quick, clear, and easy.

A New Collection of Illustrator Text Effect Tutorials - An attractive and impressive text has the potential to do wonders to your ordinary text. A text effect is able to enhance the appearance of a simple and dull written text and helps it to be a lot more influential and appealing.

 

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

How to Bake Content Strategy into Your Web Design Process - Content was an outstanding bottleneck for most of our projects. Gathering content from clients is difficult enough, but even more troublesome is managing the infrastructure, ..

Creating A Content Marketing Strategy For Your Website - Content marketing is becoming an increasingly significant element of online marketing strategies. We’re all familiar with the saying “content is king.”

The Do’s and Don’ts of Blogging for Your Business - If the idea of blogging still seems like unfamiliar territory to your company or the idea of starting a blog fills you with caution and skepticism, then you are not alone. Luckily, when it comes to blogging, ..

 

WordPress

Quick Tip: Hierarchical Custom Post Types Not Working for You? - One feature of custom post types that I have had a very hard time figuring out is hierarchical post types. A hierarchical post type is a post type with a parent and one or more children.

Adding a Set of Responsive Grid Shortcodes to Your WordPress Site - Today we’ll be taking a basic custom grid created with CSS and integrating it into WordPress via shortcodes. I presume all you readers have a basic understanding of CSS so I won’t be ..

Fall of man? No! Fall of WordPress hackers? Yes! - WordPress team keeps on fixing security loopholes in the software and enhancing its functionality on the regular basis, and you can update the latest version by using the automatic update feature or ..

How to Include and Require Files and Templates in WordPress - In this article, we’ll survey the four ways that PHP offers to include files, guidelines for when to use each, and we’ll review WordPress’ features for including files.

Top 10 WordPress Security Myths - WordPress Security is about as sexy as cleaning your house. And as a serious blogger, you already know that securing your site properly is not a trivial task.

How to Edit and Customize Your WordPress Admin Sidebar Menu - I recently discovered a plugin that can make managing your admin sidebar an absolute cinch. Creating an Admin Sidebar that YOU Want.

Professional WordPress Development: Strategies - In this three article series, we’re going to look at exactly what those are and how they apply in our project work. First, we’ll start with strategies.

Automate WordPress Installation and Development WorkFlow - Do you work on multiple sites at a time? Then no doubt you would love to improve your speed and your overall development workflow.

Making a Theme With Bones: Getting Started - Bones is a completely free starter theme (not a framework) built with the latest best practices. It serves as an excellent base to build a WordPress theme.

 

Search Engine Optimalization, Conversions, Analytics, etc.

Planning a Website Redesign so You Don’t Lose Your SEO - Here are five things site owners need to do during a website redesign to ensure they don’t lose or waste their SEO.

The Ultimate Guide to Speed Up Your Website - A website can be well designed but if it is not fast enough, it is of no use. Today, in this article, we have decided to jot down some tips and techniques to reduce the website loading time as much as possible.

Everything You Need to Know About Google Panda - Like it or not, Google has a huge influence on the world of Internet marketing. A good ranking on their SERP leads to visitors. However SEO tactics are constantly scrutinized and changes can suddenly impact what sites are well ranked.

What to Do if You Have Bad Inbound Links - Unfortunately we have very little control over who links to our website or how they link to it and not all links are created equal. At one point, webmasters were mostly concerned with the quantity of links to their site, but now the focus is on quality.

SEO, HTML and Web Site Architecture - However, even the most experienced designers and developers can make simple mistakes that can cost their site thousands of views and (potentially) uncounted revenues.

Why fast websites are kings of the digital hill - The way we access the internet is shifting fast. This change is good: It has dragged me and many other designers back to desktops creaking under the weight of conservative ideas that need cleaning out.

March of the Penguins, Which Led to a Friendly Panda and Finally a Recovery - April of 2012 was a rough month for SEO. We had three updates all within nine days: Panda on the 19th, Penguin 1.0 on the 24th, and then a Panda refresh on the 27th.

SEO for startups - Good quality SEO tactics that play by the rules (known as white-hat) are the safest bet for the long term. It may be tempting at times to engage in black-hat tactics – certainly the arguments presented by the black-hats can be seductive – yet you are ..

CSS Benefits in Search Engine Optimization (SEO) - In this article we have outlined some very useful and interesting about the fact that how CSS aids you in your SEO practices and help you improve your impact.

 

Tutorials

Creating a CSS3 Responsive Menu - This tutorial aims to provide step by step instructions to enable you to create a responsive navigation menu that adapts to varying screen sizes, with the help of CSS media queries.

Multiple Area Charts with D3.js - In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.

40 Free Dropdown menus in HTML5 and CSS3 - Here is a list of amazing free dropdown menus in HTML 5 and CSS 3 through which you can get inspired and create your own dropdown menus.~

Creating Slopy Elements with CSS3 - Web development guru Manoela Ilic shares a cool CSS3 tutorial on creating slopy, skewed elements for your design. It’s inspired by different designs that use angled shapes, diagonal lines and other non-straight elements.

50 Beginner tutorials for HTML5 - Explore this gallery of 50 beginner tutorials for HTML5, understand the techniques to use it and get started with using HTML5 towards web content development.

Responsive Menu with CSS3 Tutorial - In this tutorial, we’ll create a responsive menu with new feature of css3 (media queries) to alter the design and layout of a website navigation menu to fit different screen sizes.

 

Freelance, Business and Workflow Related Stuff

10 Reasons Why Web Projects Fail - Today every project uses some sort of Content Management System framework. Instead of painting a canvas in the old days of HTML, we are building software applications that need to follow more traditional development approaches.

Passive Income Strategies For Web Designers - Finding ways to earn passive income is a growing concern among many freelance designers. I’ve always loved client work, but I have to admit that the pressure of juggling multiple bosses and constant ..

Is It Better To Be A Generalist Or A Specialist? - Is it better to be a specialist or a generalist when furthering your web design career? It’s a question that often gets discussed with varied opinions.

15 Effective Productivity Tools For Designer and Developers - today we have a collection of “15 Effective Productivity Tools”. The tools in this list include latest web apps, cool color resources, teamwork tools, JavaScript and ..

Getting clients to pay: 10 tips for freelancers - I’m going to share with you some of the harsh lessons I learned. And while they took place within the world of web design, they apply equally to any creative endeavour where clients and pricing are involved…

Tips for Building Trust with Your Clients - Trust is an important component of any relationship. When it comes to freelance work, trust can encourage a client to want to work with you again.

10 Ways Freelance Web Developers can Stand Out From the Crowd - With so many web development agencies and other freelancers around, it can be hard to differentiate yourself. But making yourself stand out from the crowd is a huge ..

Looking beyond web design - Competition within the web design industry is fiercer than ever, with more and more designers emerging every day. The need to stay one step ahead and offer something different represents a significant challenge to the industry.

 

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

Good Job Apple, You Fucked the World - What I’m appalled by is that it is now illegal for more than two people to come up with the same idea. The things that Apple has highlighted are not inventions. It’s simply solutions to common problems.

Were You Born A Designer? - In my research, I’ve come up short in finding sources that strictly refute my personal opinion: designing is a talent a person is born with that must be further cultivated through education.

Intuitive Web Design: How to Make Your Website Intuitive to Use - The easier your website it is to use, the more people use it. An essential part of “easy to use” is intuitive. Intuitive design means that when a user sees it, they know exactly what to do.

Stating the Obvious - In short, stating the obvious too often gets a bad rap. But when the first priority of user interface design is clarity, often the most important thing we can do is to state the obvious.

Startups Shouldn’t Follow Trends - And if you’re into being part of mainstream trends, you should be reminded of at least one other: most startups fail. In my opinion, you’re thus better off figuring things out in your own way and failing / succeeding on terms that actually make sense (compared to those dictated by trends).

How Secure Are You Online: The Checklist – Think you do enough to secure your passwords, browsing, and networking? Prove it. Not all computer security is about tin foil hats and anonymous browsing. Everyone who uses a computer has a horse in the security race.

 

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