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

HTML5: How to implement the Geolocation API - Geolocation API, or Web-GL as it is sometimes referred to, is a W3C candidate recommendation for a method of informing a website of the user’s geographical location associated with the hosting device, primarily referencing the latitude and longitude position.

12 Free and Premium CSS3 Pricing Tables - When you are designing or developing a website for a commercial purpose and want to offer a range of products or services through that website, then you have to be careful about certain factors.

Getting started with LESS - Taking your first step in any language can be a daunting task. And starting with LESS is no different. The main difficulty with LESS is getting your development environment set up to work with it correctly. In this post I am going to try and guide you through getting up and running with this brilliant CSS preprocessor.

What is SASS? - There is a lot of repetition. You may have worked on projects with 5000 lines of CSS. Not only is that a lot of code to write, but it’s also a lot of code to maintain.

Places It’s Tempting To Use Display: None; But Don’t - By applying that class to an element you’ve immediately made that content “inaccessible” by screen readers. You’ve probably known this forever, but still the poison apple sneaks into our code once in a while.

Keeping Your CSS3 Code Markup Slim - There are in-browser tools available to aid developers in the styling process but you would want to combine shortcodes with this file-size reduction to ultimately streamline the rendering process of your website.

Browser Support for CSS3 Selectors - This post will provide a comprehensive review of support for CSS3 selectors in the most troublesome browsers (guess which ones?). Each selector links to the appropriate location in the CSS3 spec.

What’s the Deal With Display: Inline-Block? - We’ve been using floats for layout pretty much since we left tables behind. It’s a quirky solution that can often cause troubles, but if you know what you’re doing, it works.

CSS Variables: Past, Present and Future Specifications - Presently the realistic option to CSS variables is SASS. If you haven’t used SASS yet I’d definitely recommend it. SASS files use the extension .scss. Here are a few things that SASS can do that you might find interesting.

CSS3 Pseudo-Classes and HTML5 Forms - HTML5 introduces client-side form validation without the need for JavaScript. When you attempt to submit a form, your browser will validate all of the fields and return an error if any of the fields is incorrect. This will happen mostly  ..

CSS3-Only Tutorials and Techniques for Your Next Design - Today we are showcasing some of best tutorials and techniques that will help you create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. All with absolutely NO JAVASCRIPT.

Replacing the -9999px hack (new image replacement) - But despite its enduring popularity, Phark has drawbacks of its own: chiefly, a performance hit caused by the need to draw a giant 9999px box offscreen. Refactored code for hiding text, which I hereby christen the Kellum Method

25 Free and Premium CSS3 Navigation & Menus - If you want to have some great looking menu in CSS then, you must go through some coding. This process can seem difficult and time consuming as well. In order to solve this issue you can try the free and premium CSS3 menus.

Another -9999px - The idea is still based on a fixed size element (that matches the dimensions of the image to be displayed instead of it’s text equivalent. Overflow:hidden reliably ensures that whatever we push outside the box is invisible.

 

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

Is There Ever A Justification For Responsive Text? - Responsive design is many things; its many little tricks and techniques constitute a wonderful approach to making websites flexible. But hiding elements on a screen in this way should not be one of them.

Pull Down for Navigation - Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so I decided to have a look and see what I could come up with using some nifty CSS and a touch of jQuery.

Future-Ready Content - Technology will change. Standards will evolve. But the need for understanding our content—its purpose, meaning, structure, relationships, and value—will remain. When we can embrace this thinking, we will unshackle our content—confident it will live on, ..

5 Quick Ways to Make Your Site More Mobile Friendly - If you’ve ignored mobile platforms in the past, it can be intimidating to finally make the jump and begin to support mobile browsing on your existing sites.

Which One: Responsive Design, Device Experiences, or RESS? - As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsive Web design, separate sites, or something in between?

The Importance of Transitions - A transition that has been designed to be slow can feel awful. When designing an application, an interface or any type of structured content, we must ensure that users understand where they have come from as they arrive at the new page or state.

How to use FlexSlider with HTML5 Boilerplate, Initializr - I had a web design project in hand at that time, so I started hunting for boilerplate themes and examples online (there weren’t many) and decided to just use the Initializr template, which is also featured in HTML5 Boilerplate.

A Responsive Design Approach for Navigation, Part 1 - This is the first in a series of articles in which we’ll explore navigation design techniques from very simple nav bar design, to complex multi-level hierarchies, search, and fuller featured navigation systems.

Using CSS Background-size Responsively - When implementing an image in the background of a website we intentionally make this larger to cover as many screen sizes as possible. It’s this idea that we can use for implementing responsive background images, but first we need to add in another trick to help achieve the right effect; and this is background-size.

 

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

All About jQuery: Fresh and Useful jQuery Plugins and Tutorials - Every designer knows that jQuery is not only a handy tool, but it is also very popular and widely implemented. Thus, they try to master their jQuery skills. If you fit into this category then this post of over 40 ..

8 Tools that Make a Webmaster’s Life Easier - there are some tools you can use to speed everything up a bit. And I’m not only talking about website maintenance tools. There are also tools for managing a publishing schedule, keyword research tools, checking if your sites are up, and other things.

So why is a landing page so important? - Landing pages with powerful design and layout principles is extremely beneficial. So I have jot down some suggestions, tips and tricks that will help you in coming up with a successful design flow, rescuing you before time from the major landing page design pitfalls.

10 Tips for Writing Awesome jQuery Plugins - Some simple tips that will help any developer write truly great plugins. There are some things that may not seem quite as obvious at first, but they are there not only to develop your jQuery plugins, but to help maintain and expand on them in the future as well.

The Elements of a Clean Web Design - Clean, simple web designs have become a popular trend. This article will cover the subject through a two-part discussion. First, we’ll talk about a few traits that clean designs tend to have in common.

Grid Based Web Design Resources - a selection of indispensable resources like layout frameworks, tutorials, books, templates and useful tools that can help you understand and implement grid based design in your projects.

 

 

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

Principles of Color and the Color Wheel - A basic color wheel features 12 colors that can be combined in a variety of ways to create a number of different effects. Colors can complement one another, or even create chaos. Colors are also divided into categories of warm and cool.

The Difference Between Print and Web Design - This article seeks to uncover the differences (and similarities), and how both print and web design has advanced in acknowledging these disparities.

12 Best Tools To Create Your Custom Fonts - Today we have gathered a roundup of best font creators. Have a look below “12 Best Tools To Create Your Custom Fonts” and choose software to create your custom font.

10 Photoshop Tips for Developers - Photoshop seems a little odd when you first use it. The interface isn’t quite standard on any OS platform and some features will confuse you initially. Persevere with it, though, and you’ll never want to use another graphics package again.

A Beginner’s Guide to Combining Multiple Fonts - In my opinion pairing fonts is one of the most difficult parts of the design process. If you have no idea where to begin, then this article will guide you through the knowledge you need for now.

Unique Tips To Shape Your Logo – Designing an attractive logo that appeals the right audience is equally important for any professional. Though there are several ways that could assist with developing the exclusive identity, settling upon the most appropriate logo may rather hold greater significance.

 

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

5 Commenting Platforms to Make Your Blog Less Boring - As bloggers, we all are aware of the importance of comments. While it is true that some blogs/websites tend to disable comments entirely, those are special instances where the websites do not essentially require comments.

10 Signs You’re Not Getting Enough Out of Your Blog - A blog can be a wonderful thing. You may feel proud of yourself for remembering to update it everyday and posting things you think your readers want to know. On closer inspection, your blog may not be living up to its potential.

6 ways to improve your blog’s design - But it is important that we realize every aspect of our identity online should be designed in a clean and intuitive way with whatever style you prefer.  This elusive aspect of web work is something we should constantly strive for. And yes, that includes ..

Everything Pinterest and Tumblr Users Need To Know About Copyright Law - Indeed, comparisons between the two sites are fairly obvious: while Tumblr is more of a blog platform and Pinterest is more of a link-sharing site, both are set up to allow users to easily share ..

 

WordPress

25 Free and Premium Barebone WordPress Themes for Easy Customizing - If you design and develop themes for WordPress, chances are you probably already know the importance of theme frameworks or skeleton themes. To put it simply, these are minimal versions of themes, ..

10 Essentials To Do List After Installing WordPress on Your Website - I’ve installed WordPress, what’s next? If you find yourself asking this question, keep on reading as we have listed out the next steps that we usually perform after WordPress installation.

5 Best WordPress Security Plugins - Irrespective of how small or big your website is, it is important that security plugins should be installed for your website. They may not be enough to provide the ultimate security for your website, but they may provide a ..

How to Insert a WordPress Photo Gallery into Your Blog - There are all sorts of photo gallery plugins and themes for WordPress, but in this post we’re going to go over the out-of-the-box default WordPress gallery.

WordPress Shortcodes: 3 Essential Tips - I wanted to give you a simple introduction to shortcodes, in addition to a few key tips that you should bear in mind when using them. Here are three main benefits of using shortcodes

WordPress Plugins to Speed Up Your Website - WordPress plugins that extend website’s functionality, enhance performance, and decrease website load time. WordPress plugins directory has thousands of various plugins, and it is quite complicated to find reliable ones.

Top 7 Free e-Commerce WordPress Plugins - Though there are some best paid tools to do this job, you can try these free plugin that works perfect with all wordpress blogs which enables all basic ecommerce functionality.

Inside The WordPress Toolbar - In this article, we’ll look at the history of the Admin Bar, when (and from where) the bar is enabled, the particular functions that WordPress’ core developers have given us, and how to make the Admin Bar more personal and useful.

 

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

How Google Analyzes the SEO Structure of any Website - Google’s overall methodology for ranking involves three separate processes: examining web pages, indexing them through SEO and eventually putting them into its SERPs (Search Engine Result Pages) in order of relevance.

Nine Best Practices For Optimized < title > Tags - search engines ascribe a huge amount of SEO value to the title tag’s content – but only if it’s well-formed, contains page-relevant text, and reflects in the limited space available what the page is about.

How to Increase Site Speed by 200% Easily - Site speed and page load times are now an important component of the Google ranking algorithm, which can affect search engine rankings of your site. So here is what all we did and you can also try to improve page load times.

The Most Effective SEO Strategy of All Time - So come what may, scholars and simpletons can once and for all agree: the most effective SEO strategy of all time is to produce relevant content.

8 Simple SEO Tricks That’ll Help You Rank Above the Fold and Increase Your CTR - But being above the fold is not just for on-page optimization. You also need to be above the fold when it comes to search engine results.

CSS, HTML And Images Can Decease Page Speed, How To Overcome Them -  every designer should make a fast loading website. In this article you will find how to clean up CSS, TML and images in order to increase your page speed.

PNG24 and PNG Optimization - Over 60% of the file size of the average web page is taken up by graphics and multimedia. So graphics optimization is an important step in optimizing web page speed. At an alarming frequency, we have seen large PNG24 and unoptimized JPEGs used on the Web.

Do you need Google Analytics but you don’t know how to set your account up? - Analytics is one of the main parts in a Digital Marketing Plan or Digital Marketing strategy. Don’t you have Analytics in your website? Don’t worry; we’ll show you this process from ..

11 Google Analytics Tricks to Use for Your Website - That is why in this article I am going to tell you some Google Analytics tricks that you should use for your website. I am going to take this one step further to help you get even more insights from Google Analytics.

How to Simplify Your SEO And Quickly Boost Your Google Traffic - Today we’re going to change that mindset by skipping the theory and demonstrating a simple, concrete tactic you can steal right now to improve your Google rankingsand leverage more traffic from search engines.

 

Tutorials

20 Useful HTML5 Tutorials, Techniques and Examples for Web Developers - HTML5 now is respectable in web designers. To develop a well balanced website HTML5 considered a main tool which frequently improves its developing technology. It helps designers to create animations also.

Super Sweet CSS 3D Text Effects With Sass and LESS - There’s not really a great way to apply a 3D effect using CSS. There’s no “text-extrude” property, though that would in fact be pretty awesome. Instead we have to fake it.

30 Useful Tutorials of Adobe Fireworks - Adobe Fireworks is the best application to work on raster based projects and to create vectors. using Adobe Fireworks is extremely easy as its tools are simpler as compared to Adobe Photoshop and Adobe Illustrator.

Preserving vertical rhythm with CSS and jQuery - Assuming you design from the content out, the first decision to effect your design has to be type related. Even by not choosing a typeface you’ve done something that impacts your site. Type is core to print and web design, and it’s complex.

18 Detailed HTML5 Website Layout Coding Tutorials - It seems there is no escape from the fact that HTML5 will be the web standard. HTML5 coding has been getting more popularity in coders so in today’s post we bring together step by step examples of web layout coding with HTML5.

40 Useful HTML5 Lessons, Tutorial for Learning HTML5 - early adapters started creating some cool stuffs wtih the cleaner HTML5/CSS3 example code. In case you wanted to be one of them but don’t know where to start, here are list of useful HTML5 tutorial, lessons for getting  you started.

Making an Impressive Product Showcase with CSS3 - impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic!

15 Detailed Responsive Web Design Tutorials - In this post I would like to share 15 useful responsive design tutorials to help you get started with responsive designing including fluid grids, fluid images and media queries.

 

Freelance, Business and Workflow Related Stuff

3 Ways to Give Yourself a Raise - Ultimately your success as a web developer or designer will depend on this one thing:  Your ability to make sufficient returns on your investments.  In other words, whether or not you are able to make enough money to support yourself, pay your bills, ..

Things I Hate about My Clients - Well, with so much hatred, it might sound like we freelancers and clients are at a war but definitely I don’t think this is the case.

Dealing with Clients: Avoiding the Seven Sins - Those of you working in various creative fields would probably agree that client relationships are sometimes just as important as the work you’re able to produce. For freelancers and studio runners, you could even say that client relations ..

How to make terms and conditions useful - There are some things we slap on our websites with no consideration whatsoever. Things that we include because we have to, rather than because they are in anyway useful.

It’s Time to Sell Your Designs at Your Favorite Rates -  In this article we will be discussing how a designer can charge his favorite rates and present his rates in such a way that the client cannot say no to you. When you go to sell your designs, you may also want to print them.

 

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

Design is Marketing - When it comes to designing for the Web, there are core actions you want users to take. You may want them to sign up, download something, buy something, subscribe or share with their friends. Each can be optimized through design that meets the user’s needs.

6 Tools Better Than An FAQs Page - You can have your website answer the question and watch the lead potentially disappear by thinking about it or YOU can personally address the question by building customer service mechanisms into your site that are more advanced than a page of “Catch All” answers.

Is It Time To Change Our CSS Practices? - I hope we all agree that as an industry we’ve accepted that sites are never going to look the same in all browsers no matter how hard we may try and we should take a more progressive enhancement approach to development.

What I Learned From Reviewing 45+ Websites (Are You Making The Same Mistakes?) - Recently I critiqued a number of websites (links at the bottom of the post) and made suggestions for improving their conversion rates. I noticed that the key problems ..

Do You Design In The Browser? - With the move toward responsive websites, designs are being pushed to the prototype stage sooner in the process. We’re designing more in the browser. Or are we? Do Photoshop comps still have a place in the design process? Depends who you ask.

 

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