HTMLcut blog

About PSD to HTML Conversion and More

207 Articles on Effective Web Design – Winter 2011-2012

Effective Web Design - Winter 2011-2012This is the next seasonal round-up of web design articles and posts written by the design community and retweeted on @htmlcut during the winter 2011-2012.

This time among the most interesting sections are “Usability and User Experience”, “Forms”, “E-Commerce”, “Mobile Websites and Responsive Web Design”, “Trends” and “Opinions”. Frankly, all sections are instructive and informative and include lots of useful examples, guides and tips, so we strongly recommend to look through all of them.

We’ll be glad if this round-up is helpful to you :).

Web Design Principles and Basics

1). The Elements of a Clean Web Design
http://sixrevisions.com/web_design/elements-clean-web-design/
by Phil Zelnar: “We’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design.”

2). Mood Boarding Methods for Web Designers
http://www.onextrapixel.com/2012/02/10/mood-boarding-methods-for-web-designers/
by Stephanie Hamilton: “There are steps in the design process to implement to cut down on the unknown and this is usually in the form of a mood board.”

3). Redefining Hick’s Law
http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/
by Jason Gross: “Traditionally, the law is used to encourage designers to limit options in navigation, lists and interactive options. We need to more deeply investigate what Hick’s Law can do for Web design.”

4). Ten Laws to Design By
http://3.7designs.co/blog/2010/07/ten-laws-to-design-by/
by Ross Johnson: “Hick’s Law; Pareto Principal; Rule of Thirds; Proximity; Feedback; Fitts’ Law; Golden Ratio; Occam’s Razor; Fibonacci Sequence; Mental Models.”

5). Essential Principles for Creating Minimalist Web Design
http://designmodo.com/minimalist-web-design/
by Neeru Pallen

6). Minimalist Web Design: How Minimal is Too Minimal?
http://sixrevisions.com/web_design/minimalist-how-minimal/
by Delwin Campbell

7). How to Make the Best out of the Fold
http://www.1stwebdesigner.com/design/best-out-of-the-fold/
by Christian Vasile

8). A Fun Approach To Creating More Successful Websites
http://www.smashingmagazine.com/2012/02/24/a-fun-approach-to-creating-more-successful-websites/
by Jeremy Girard: “We’ll take a look at how adding a bit of ‘fun’ into the mix can help us produce more engaging, and hopefully more successful, websites.”

9). A Secret Weapon of Successful Designers: Predictability
http://www.graphicdesignblender.com/a-secret-weapon-of-successful-designers-predictability
by Karol K.

10). How To Create Visual Tension in Your Designs
http://www.vanseodesign.com/web-design/visual-tension/
by Steven Bradley

11). The Proxority Principle in Web Design
http://sixrevisions.com/web_design/proxority-principle/
by Alexander Dawson: “We’re going to examine a basic technique that could help you improve your general content flow, and, for lack of a better term, I’m going to call that technique the proxority principle (a portmanteau word that combines “proximity” and “priority”).”

12). The Difference Between Art and Design
http://www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design/
by John O’Nolan

Website Layout

1). Tips on Designing Layouts Focused around Content
http://speckyboy.com/2011/11/21/tips-on-designing-layouts-focused-around-content/
by Jake Rocheleau

2). Measuring and sizing UIs, 2011-style
http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style/
by Harry Roberts: “For years we used pixels to lay out web pages. Then… we were dabbling with ems to make our pages elastic. Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages.”

Psychology and Web Design

1). The Psychologist’s View of UX Design
http://uxmag.com/articles/the-psychologists-view-of-ux-design
by Susan Weinschenk

2). The Models We Use
http://www.uie.com/brainsparks/2012/01/09/the-models-we-use/
by Jared Spool : “Models like this help us know how to design better. They tell us why the same patterns keep forming before us and give us hints to take advantage of their predictive behaviors.”

Colors in Web Design

1). The Psychology Of Color In Design
http://www.instantshift.com/2012/01/30/the-psychology-of-color-in-design/
by Speider Schneider

2). Mind-Bending Facts About Colour Perception
http://www.1stwebdesigner.com/design/facts-about-color-perception/
by Costin Găman

3). How Colors Affect Our Purchases [Infographic]
http://www.bitrebels.com/design/how-colors-affect-our-purchases-infographic/
by Richard Darell

4). 25 Examples of Perfect Color Combinations in Web Design
http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/
by Gisele Muller

5). Creating Color Schemes for Web Design
http://www.practicalecommerce.com/articles/3273-Creating-Color-Schemes-for-Web-Design
by Drew Coffin

6). ColRD: Create and share color inspiration with the world
http://colrd.com

Usability and User Experience

1). 15 Free Ebooks about User Experience and Interface Design
http://www.paulolyslager.com/free-ebooks-about-user-experience-interface-design/
by Paul Olyslager

2). Persuasion in Design
http://uxmag.com/articles/persuasion-in-design
by Elisa del Galdo: “Persuasive design applies Psychological Principles of influence, decision-making in a consumer context, engagement strategy, and social psychology to every stage of the design process, and it identifies potential barriers and emotional triggers to elicit the desired actions.”

3). Fact vs. Fiction: What Usability is Not
http://www.uxbooth.com/blog/fact-vs-fiction-what-usability-is-not/
by Vishal Mehta

4). Stop Designing Pages And Start Designing Flows
http://uxdesign.smashingmagazine.com/2012/01/04/stop-designing-pages-start-designing-flows/
by Morgan Brown: “…we’ll look in depth at a common flow for e-commerce websites (the customer acquisition funnel), as well as provide tips on optimizing it to create a complete customer experience.”

5). Usability Rules for Content Sites
http://speckyboy.com/2012/02/12/usability-rules-for-content-sites/
by Ada Ivanova

6). Collaging: Getting Answers To The Questions You Don’t Know To Ask
http://uxdesign.smashingmagazine.com/2012/02/06/collaging-getting-answers-questions-you-dont-know-ask/
by Kyle Soucy: “Collaging is a great method for learning more about your end users.”

7). Lean UX: Getting Out Of The Deliverables Business
http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
by Jeff Gothelf: “Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.”

8). Website Usability 101 For SEO Professionals
http://searchengineland.com/website-usability-101-for-seo-professionals-108558
by Shari Thurow: “…many people believe that website usability is simply making a website easy to use. Easy to use for whom? The developers? Website owners? Web searchers?”

9). Seven UX Best Practices of Community Design
http://uxmag.com/articles/seven-ux-best-practices-of-community-design
by Kristin Zibell

10). Addictive UX: Why Pinterest Is So Dang Amazing
http://designshack.net/articles/business-articles/addictive-ux-why-pinterest-is-so-dang-amazing/
by Joshua Johnson

11). What Makes Someone Leave A Website? [Infographic]
http://blog.kissmetrics.com/leave-a-website/
by admin: “Itэs important to design your site so that user frustration is kept to a minimum, thereby maximizing customer retention. Below are some examples of what not to do when designing your website.”

12). Effective Use of Color and Graphics in Applications for Children, Part II: Kids 7 to 14 Years of Age
http://www.uxmatters.com/mt/archives/2011/12/effective-use-of-color-and-graphics-in-applications-for-children-part-ii-kids-7-to-14-years-of-age.php
by Catalina Naranjo-Bock

Accessibility

1). What is Web Accessibility?
http://thinkvitamin.com/user-science/accessibility/what-is-web-accessibility/
by Nick Pettit

2). Inclusive Design
http://uxdesign.smashingmagazine.com/2012/01/12/inclusive-design/
by Faruk Ateş: “… equally accessible to everyone, and equally empowering no matter what the user’s skill level or familiarity. When these two aspects are combined, the product gets the best of both worlds: it is accessible to more people, without being compromised for advanced users.”

3). Usability Tips and Tools for the Visually Impaired on the Web
http://www.1stwebdesigner.com/design/usability-tips-tools-visually-impaired/
by Jamal

4). Let’s talk and teach, not fight, about accessibility
http://www.mardahl.dk/2011/12/30/lets-talk-and-teach-not-fight-about-accessibility/
by Karen Mardahl

Cross Cultural Web Design

1). Notes on Designing Websites for the Asian Market
http://www.sitepoint.com/notes-on-designing-websites-for-the-asian-market/
by Bruce Lawson

2). Avoid Translation Mistakes When Designing for Foreign Markets
http://speckyboy.com/2012/02/28/avoid-translation-mistakes-when-designing-for-foreign-markets/
by Christian Arno

Redesign

1). Clear Indications That It’s Time To Redesign
http://uxdesign.smashingmagazine.com/2011/12/08/clear-indications-time-to-redesign/
by Jeff Gothelf

2). The New Redesign Rules of the Web
http://www.noupe.com/design/the-new-redesign-rules-of-the-web.html
by Robert Bowen

3). Website Redesigning: Lessons that your competitors can teach you
http://www.underworldmagazines.com/website-redesigning-lessons-that-your-competitors-can-teach-you/
by Alyssa Clarke

4). Redesigning Ourselves: How We Made Our Agency More User Friendly
http://www.uxmatters.com/mt/archives/2011/12/redesigning-ourselves-how-we-made-our-agency-more-user-friendly.php
by Ollie Campbell

5). 30 Minute Redesign #76: Suruha Freespirit
http://blogs.fanextra.com/articles/30-minute-redesign-76-suruha-freespirit
by Tom: “Today I’m going to be redesigning Suruha Freespirit, the personal design blog of Su Hall… I’ve spoken with Su a lot in the past year, so it’s a real honor to get a chance to redesign her blog.”

6). 15 Good Examples of Website Redesign
http://designmodo.com/website-redesign/
by Andrian

Content and Copywriting

1). How to Create a Unique Selling Point for Your Home Page
http://uxmovement.com/content/how-to-create-a-unique-selling-point-for-your-home-page/
by anthony

2). How to Give Online Shoppers Confidence in Your Website
http://smallbiztrends.com/2011/12/online-shoppers-confidence-website.html
by Anita Campbell

3). How to Craft a Privacy Policy for Your Website
http://www.socialmediaexaminer.com/how-to-craft-a-privacy-policy-for-your-website/
by Sara Hawkins

4). Can You Write a Better Headline Than This? Not Using Old Headline Formulas You Can’t
http://blog.kissmetrics.com/how-to-write-headlines/
by Bnonn: “Learning to write great headlines is more important than mastering every other copywriting trick combined. The SHINE headline formula.”

5). Copywriting: How to Write Useful (Yet Intriguing) Headlines
http://baymard.com/blog/copywriting-useful-yet-intriguing-headlines
by Christian Holst: “Provide context, then spark interest.”

6). How to Write Hard Hitting Headlines That Work
http://inspirationfeed.com/articles/blogging/how-to-write-hard-hitting-headlines-that-work/
by admin

7). 20 Tips on How to Write for the Web
http://www.webdesignerdepot.com/2009/08/20-tips-on-how-to-write-for-the-web/
by Angela West: “These are tips based on my own experience and education as a writer, and particularly as a writer specializing in the web: Overuse of punctuation; But, And, or Yet; Serial comma; Apostrophe use, etc.”

8). 8 Brilliant Examples Of Social Proof On The Web
http://blog.crazyegg.com/2012/02/02/examples-social-proof-on-web/
by Demian Farnworth

9). Oh, Idioms: Overused, Amusing and Often Confusing
http://www.onextrapixel.com/2012/01/09/oh-idioms-overused-amusing-and-often-confusing/
by Rebecca Garland

10). Content Quantity Diminishes Quality [Research]
http://blog.hubspot.com/blog/tabid/6307/bid/29823/content-quantity-diminishes-quality-research
by Pamela Vaughan: “Coupling a high quality item with a low quality item diminishes the perception of both items’ overall quality. How to consistently create high-quality content.”

11). Content Is More Than Copy
http://content-science.com/expertise/content-insights/content-is-more-than-copy
by Colleen Jones

12). A 5-Minute Guide to More Persuasive Copywriting
http://www.copyblogger.com/copywriting-reader/
by James Chartrand

13). How To Spice Up Your Resource Boxes For Better Conversion
http://www.1stwebdesigner.com/inspiration/make-awesome-resource-boxes/
by Daniel Smith

14). Most Annoying Business Jargon
http://www.forbes.com/pictures/ekij45gdh/most-annoying-business-jargon/

15). Corporate Jargon That Needs To Go
http://www.huffingtonpost.com/2011/12/08/corporate-jargon-that-needs-to-go_n_1137616.html
by Alicia Ciccone: “Outside the Box; Low-hanging fruit; Synergy, etc.”

16). 31 Fluffy Buzzwords Marketers Overuse and Abuse
http://blog.hubspot.com/blog/tabid/6307/bid/31068/31-Fluffy-Buzzwords-Marketers-Overuse-and-Abuse.aspx
by Rebecca Corliss

17). The Rise Of The “Creative” Class
http://techcrunch.com/2011/12/14/creative-class/
by Erick Schonfeld: “LinkedIn has put out its annual list of top buzzwords (over)used on members’ professional profiles: ‘Creative,’ ‘Organizational’ and ‘Effective’ are leaders in the USA. COMMENTS.”

Copyright

1). Content Scrapers – How to Find Out Who is Stealing Your Content & What to Do About It
http://blog.kissmetrics.com/content-scrapers/
by Kristi Hines

2). Thoughts On Using Copyrighted Images
http://www.vanseodesign.com/blogging/copyrighted-images/
by Steven Bradley

Typography

1). 6 Questions You Should Ask Yourself When Choosing Fonts
http://tympanus.net/codrops/2011/12/01/6-questions-you-should-ask-yourself-when-choosing-fonts/
by Patrick Cox

2). Establish a Mood with Typography
http://tympanus.net/codrops/2012/02/19/establish-a-mood-with-typography/
by Carrie Cousins

3). The Psychology of Fonts
http://www.onextrapixel.com/2011/12/13/the-psychology-of-fonts/
by Emily Matthews

4). Secret Symphony: The Ultimate Guide to Readable Web Typography
http://www.pearsonified.com/2011/12/golden-ratio-typography.php
by Chris Pearson: “By employing Golden Ratio Typography, you’ll ensure that your site has a golden symphony that will appeal to everyone.”

5). How to Use Script Fonts in Design Projects
http://designmodo.com/script-fonts/
by Tara Hornor

6). 40 Best Typeface Combinations in Web Design
http://smashinghub.com/40-best-typeface-combinations-in-web-design.htm
by admin

7). Text Designs That Should Be Banned
http://www.topdesignmag.com/text-designs-that-should-be-banned/
by Bogdan: “What do you think? Is there any font that you hate it so much that you want to see it vanished from the face of the Earth?”

8). The Politics of Typography
http://www.instantshift.com/2011/12/02/the-politics-of-typography/
by Nathan Francis: “Graphic designers will already appreciate the important role of typography in delivering a message, and that throughout the ages the character and form of typography has often reflected the historical and political spirit of the epoch in which it was created.”

9). Fun Helvetica Posters
http://www.graphicmania.net/fun-helvetica-posters/
by Sonia Tracy

10). 60 Absolutely Stunning Typography Projects
http://designshack.net/articles/typography/60-absolutely-stunning-typography-projects/
by Joshua Johnson

Navigation and Menus

1). How to Design the Best Navigation Bar for Your Website
http://mashable.com/2011/12/08/design-navigation-bar/
by Daniel Alves: “…people cannot find the information they seek on a website about 60% of the time. …many users often find navigation usability extremely frustrating, citing annoying hover errors and inconsistencies. …40% of users do not return to a site when their first visit is negative.”

2). Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
by Brad Frost: “Here’s some of the more popular techniques for handling navigation in responsive designs.”

3). 47 Websites with Unusual Navigation
http://www.onextrapixel.com/2011/12/27/47-websites-with-unusual-navigation/
by Stelian Subotin: “We have carefully gathered and handpicked a big set of websites whose navigation bars are not simple, plain, or the ones you see a lot on the internet. No, the following websites were designed with the modern design principles in mind, by making the whole website a new ‘browsing adventure’, not just some parts of it.”

4). Faceted Overload: Simplifying the Sidebar Navigation
http://uxmovement.com/navigation/faceted-overload-simplifying-the-sidebar-navigation/
by anthony

5). 31 Super-Unique and Functional Website Navigation Menus
http://spyrestudios.com/31-super-unique-and-functional-website-navigation-menus/
by Jake Rocheleau

6). 12 Unique Navigation Menu Designs For Your Inspiration
http://www.script-tutorials.com/12-unique-navigation-menu-designs-for-your-inspiration/
by admin

Landing Page and Conversion Rate

1). How To Make Your Landing Page Stand Out
http://www.lifehacker.com.au/2012/02/how-to-make-your-landing-page-stand-out/
by Adam Dachis: “Earlier this week we asked you how you make your personal landing page stand out amongst the crowd and you wrote in with great ideas and examples. Here are some of the best and the processes behind them.”

2). 5 Unbreakable Rules of Landing Page Design
http://www.sitepoint.com/5-unbreakable-rules-of-landing-page-design/
by Zach Ball

3). 5 Awesome Landing Page Lessons From Real Life Examples
http://blog.hubspot.com/blog/tabid/6307/bid/30561/5-Awesome-Landing-Page-Lessons-From-Real-Life-Examples.aspx
by Corey Eridon: “What is right and what can be improved in examples.”

4). Showcase Of Well Executed Landing Pages
http://designresourcebox.com/showcase-of-well-executed-landing-pages/
by admin

5). Showcase of Landing Page Design
http://vandelaydesign.com/blog/galleries/landing-page-design/
by admin: “…more than 20 examples of well-designed landing pages.”

6). Landing Page Design Gallery – Inspiration, examples & helpful tips
http://www.landing-page-gallery.com
“A gallery dedicated to landing page design.”

Call to Action

1). 10 Crimes a Web Designer can Commit on Call to Action Pages
http://www.1stwebdesigner.com/design/worst-call-to-action-examples/
by Jenna Scaglione

2). 6 Factors Everyone Should Know About Designing Call To Action Buttons
http://blog.crazyegg.com/2011/12/12/designing-call-to-action-buttons/
by Stephanie Hamilton

3). Call to Action Buttons Best Practices Guide
http://uxmovement.com/buttons/call-to-action-buttons-best-practices-guide/
by anthony

4). 15 Tips in Making an Effective Call to Action
http://naldzgraphics.net/tips/call-to-action-tips/
by Marvi Ocampo

5). 40 Showcase of Convincing Call to Action Buttons
http://www.webdesignburn.com/2012/02/01/40-showcase-of-convincing-call-to-action-buttons/
by Jameel

6). Showcase Of Call To Action Buttons In Web Design
http://designresourcebox.com/showcase-of-call-to-action-buttons-in-web-design/
by admin

Forms

1). Guide to Building Semantic Web Forms
http://dzineblog.com/2012/01/guide-to-building-semantic-web-forms.html
by Jake Rocheleau (@jakerocheleau)

2). How to Design an Awful Looking Sign-Up Form, 10 Step Guide
http://www.webdesignshock.com/how-to-design-an-awful-looking-sign-up-form-10-step-guide/
by Alex Black: “…this post will, count one by one the bad practices when designing a sign-up form, if maybe this way the web designers will learn their lesson and finally up–date their sign-up forms.”

3). Web Login, the definitive guide
http://www.webdesignshock.com/web-login/
by admin: “Good practices, Bad practices, Tools and resources.”

4). Why Rounded Corners are Easier on the Eyes
http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/
by anthony: “Easier to process; We’re conditioned; Make information easier to follow; Rounded corners point inward towards the center of the rectangle.”

5). 10 Rules to Follow for Popups and Modal Windows
http://speckyboy.com/2011/12/16/10-rules-to-follow-for-popups-and-modal-window/
by Ada Ivanova

6). Usability Design for Online Web Forms
http://webdesignledger.com/tips/usability-design-for-online-web-forms
by Jake Rocheleau

7). Why Your Form Buttons Should Never Say Submit
http://uxmovement.com/forms/why-your-form-buttons-should-never-say-submit/
by anthony

8). Principles for Successful Button Design
http://webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/
by Pete Orme

9). All About Buttons: Inspiration, PSDs for Download, CSS Generators and Frameworks
http://www.onextrapixel.com/2012/02/16/all-about-buttons-inspiration-psds-for-download-css-generators-and-frameworks/
by Stéphanie Walter

10). 28 Brilliant Form Layouts in User Interface Design
http://spyrestudios.com/28-brilliant-form-layouts-in-user-interface-design/
by Jake Rocheleau: “Professional designers have come up with trendy solutions to even the most complex forms. Gathering data from your visitors can be very difficult at times. But starting with an easy form template can grease the wheels for more conversions.”

11). 40 Contact Forms of All Time For Designer Inspiration
http://smashinghub.com/40-contact-forms-of-all-time-for-designer-inspiration.htm
by Lief

12). 25 Amazingly Creative Contact Forms
http://webexpedition18.com/articles/creative-contact-forms/
by Laura Moisei

13). 40+ Creative Contact Forms That Will Inspire You
http://www.1stwebdesigner.com/inspiration/creative-contact-forms/
by Jameel Khan

14). 80+ Creative Modern Web Forms And Contact Designs
http://www.denzomag.com/2011/12/80-creative-modern-web-forms-and-contact-designs/
by Dennis

15). Showcase of Beautiful Search Box UI Designs
http://www.hongkiat.com/blog/beautiful-website-search-box-ui-design/
by Salman Saeed: “We showcase some beautiful search boxes with promising features we’ve come to know.”

16). Ui Parade
http://www.uiparade.com/
“Ui Parade is all about showcasing user interface design that is crafted by some of the worlds most talented ui designers.”

17). 50 Impressive UI Design From Dribbble
http://acrisdesign.com/2011/12/50-impressive-ui-design-from-dribbble/
by Prakash

Footers and Headers

1). Designing Engaging Header Images: Think Outside the Box
http://designshack.net/articles/layouts/designing-engaging-header-images-think-outside-the-box/
by Joshua Johnson

2). Developing a Responsive Website: The Footer
http://www.developerdrive.com/2012/02/developing-a-responsive-website-the-footer/
by Scott Stanton

3). The Science of Designing a Footer
http://www.designzzz.com/science-designing-footer/
by Tayyab

4). 50+ Outstanding Header Designs for Inspiration
http://bloomwebdesign.net/myblog/2012/02/13/50-outstanding-header-designs-for-inspiration/
by Ainsley Bevis

5). 30 Super Oversized Footers in Modern Web Layouts
http://designm.ag/inspiration/30-super-oversized-footers-in-modern-web-layouts/
by Jake Rocheleau

6). Showcase of Interactive Website Footers to Enhance User Experience
http://www.designzzz.com/website-footers-enhance-user-experience-design/
by Jawad

7). 23 Standout eCommerce Store Footers
http://webexpedition18.com/articles/ecommerce-store-footers/
by John Taylor

Tips and Recommendations

1). Parallax Scrolling: Tools, Articles and Tutorials
http://www.splashnology.com/article/parallax-scrolling-tools-articles-and-tutorials/
by AndrewG

2). The top 25 browser tools for web designers and developers
http://www.netmagazine.com/features/top-25-browser-tools-web-designers-and-developers
by Nicklas Persson and Chris Murphy: “Gathering inspiration; Design and build; Testing and feedback; Browser extensions (Colorzilla, etc.); Debugging tools ; Bookmarklets (WhatFont).”

3). Why Big Pictures are Effective as Website Backgrounds
http://naldzgraphics.net/design-2/big-pictures-website-backgrounds/
by Kareen Liez

4). Why External Links Should Open in New Tabs
http://uxmovement.com/navigation/why-external-links-should-open-in-new-tabs/
by anthony

5). Six key principles to design a 404 page
http://conceptdezain.com/blog/2012/01/10/six-key-principles-to-design-a-404-page/
by Lief

6). Best practices for creating government websites
http://www.webdesignerdepot.com/2012/02/best-practices-for-creating-government-websites/
by Justin Hubbard

7). Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
http://www.caniuse.com

E-Commerce Websites

1). 20 of the Best E-Commerce Platforms
http://webdesignfuse.com/20-of-the-best-e-commerce-platforms/
by admin

2). 6 Elements Of A Trustworthy E-Commerce Web Design
http://blog.crazyegg.com/2011/12/20/trustworthy-ecommerce-web-desig/
by Stephanie Hamilton: “Guarantees; Search; Reviews; Well-Written Product Detail Pages; Clear Checkout Process; Transparency About Additional Costs.”

3). 7 Tactics for Better Product Detail Page Design
http://developer.practicalecommerce.com/articles/3296-7-Tactics-for-Better-Product-Detail-Page-Design-
by Armando Roggio: “Excellent Photography; Clear Checkout Path; Reviews; Flexible Product Descriptions; Room for Logistics; Save and Share Options; Mobile Ready.”

4). No Guidance, No Interaction, No Sale: Improving Internet Shopping Usability
http://cre8pc.com/2012/01/11/no-guidance-no-interaction-no-sale-improving-internet-shopping-usability/
by Kim Berg

5). Using ‘Quick Views’ to Increase Conversions
http://www.practicalecommerce.com/articles/3310-Using-Quick-Views-to-Increase-Conversions
by Armando Roggio: “Quick view enables visitors to view product details – on a category page, a cart, or any other page – without a page refresh. The product details are launched in a modal (i.e. pop-up) window, which opens on the page the visitor is on, and typically displays a truncated set of product details. ”

6). Fake Reviews, a Despicable Practice?
http://www.practicalecommerce.com/articles/3330-Fake-Reviews-a-Despicable-Practice-
by Armando Roggio: “Sometimes the line separating an excellent marketing idea from a despicable or even illegal business practice is not perfectly clear. Ecommerce marketers, even well-meaning ones, may be contributing to widespread advertising fraud without even realizing it. ”

7). Using WordPress for Ecommerce, Parts 1 – 14
http://developer.practicalecommerce.com/articles/3289-Using-WordPress-for-Ecommerce-Part-One-Defining-the-Project
by Armando Roggio

8). 25 Useful Magento eCommerce Themes
http://www.designspectre.com/themes/magento-ecommerce-themes/
by Koby

9). 20 Beautifully Designed Online Stores Built on Shopify
http://www.onextrapixel.com/2011/12/21/20-beautifully-designed-online-stores-built-on-shopify/
by Kris Holt

10). 25 Beautiful Ecommerce Websites
http://vandelaydesign.com/blog/galleries/beautiful-ecommerce-websites/
by admin

11). 10 Innovative Ecommerce Sites
http://www.practicalecommerce.com/articles/3374-10-Innovative-Ecommerce-Sites
by Armando Roggio

Content Management Systems (CMS)

1). Should We Always Deploy Content Management Systems?
http://sixrevisions.com/project-management/always-deploy-cms/
by Maria Malidaki: “Owners: of Static Websites; Who Don’t Want to Be Empowered; of Websites with a Shelf Life; Who Rely on a Web Professional’s Expertise.”

2). Good Old Static HTML Sites Aren’t Dead Yet. Should They Be?
http://speckyboy.com/2012/02/22/good-old-static-html-sites-arent-dead-yet-should-they-be/
by Ada Ivanova

3). Web designers, what to look for in a CMS
http://www.webdesignerdepot.com/2012/01/web-designers-what-to-look-for-in-a-cms/
by Tyler Herman: “I don’t want to mention any names here or tell you what to use. Instead, I’m going give you some important points to consider, so that you can make an educated decision on your own.”

4). A Comprehensive Checklist To Creating The Perfect WordPress Website
http://wp.smashingmagazine.com/2011/12/14/15-step-checklist-creating-perfect-wordpress-website/
by Danny Cooper

5). Five top tips for building responsive WordPress sites
http://www.netmagazine.com/features/five-top-tips-building-responsive-wordpress-sites
by Jesse Friedman: “Jesse Friedman explains how you can integrate responsive web design with WordPress and goes over both the advantages and challenges of responsive theming.”

6). WordPress Functions.php Snippets
http://www.wpfunction.me
“WPFunction.Me lets you quickly build all the functionality you need for your next WordPress project.”

7). Secure Your WordPress Against User-Agents and Bots
http://wp.tutsplus.com/tutorials/secure-your-wordpress-against-user-agents-and-bots/
by Bilal Shaheen

8). 5 Commenting Platforms to Make Your Blog Less Boring
http://www.1stwebdesigner.com/design/commenting-platforms/
by Sufyan bin Uzayr

Mobile Websites and Responsive Web Design

1). Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
by Anthony T

2). Designing for touch
http://www.netmagazine.com/features/designing-touch
by Josh Clark: “Interaction designer Josh Clark explains what you need to keep in mind when designing for mobile touchscreens and compares finger-friendly touch interfaces for iPhone, iPad and Android.”

3). Tablet Tidbits: How To Make Your Website Tablet-Friendly
http://www.1stwebdesigner.com/design/make-website-tablet-friendly/
by Daniel Smith

4). Responsive Web Design: Standard or Feature?
http://www.paper-leaf.com/blog/2011/12/responsive-web-design-standard-or-feature/
by Jeff

5). Seven lessons learned from responsive web design
http://www.netmagazine.com/features/seven-lessons-learned-responsive-web-design
by Vince Allen: “Vince Allen… gives the background on why responsive web design is the right focus for web development.”

6). Building a Responsive, Future-Friendly Web for Everyone
http://www.webmonkey.com/2012/01/building-a-responsive-future-friendly-web-for-everyone/
by Scott Gilbertson: “Basics, Further Reading, Techniques.”

7). Adaptive Images for Responsive Designs
http://24ways.org/2011/adaptive-images-for-responsive-designs
by Matt Wilcox

8). Responsive Web Design: Overflow Image with vertical centering
http://solemone.de/code/responsive-web-design-overflow-image-with-vertical-centering/
by admin

9). Responsive design in the corporate world
http://www.webdesignerdepot.com/2012/01/responsive-design-in-the-corporate-world/
by Brent Walbolt

10). Is Responsive Web Design Working? Showcase of 30 Sites That Prove it Does!
http://www.flashuser.net/web-design/responsive-web-design-showcase-of-30-sites.html
by Alice

11). 29 Simple yet Intuitive Mobile Web Designs
http://designm.ag/inspiration/29-simple-yet-intuitive-mobile-web-designs/
by Jake Rocheleau

12). Inspiration and Resources for Responsive Web Design
http://www.artfans.info/inspiration-and-resources-for-responsive-web-design/
by fandy

Website Technical Aspects

1). .htaccess Files for the Rest of Us
http://net.tutsplus.com/articles/news/htaccess-files-for-the-rest-of-us/
by Dan Wellman: “.htaccess files are used to configure Apache, as well a range of other web servers. In this article, we’ll review what they are, and how you can use them in your projects.”

2). 10 useful htaccess tricks to improve your website
http://www.designer-daily.com/10-useful-htaccess-tricks-to-improve-your-website-22247
by Mirko

3). How To Increase Website Page Speed
http://www.web3mantra.com/2012/02/27/css-html-and-images-can-decease-page-speed-how-to-overcome-them/
by w3m

4). Building a High Performance Website
http://www.sitepoint.com/building-a-high-performance-website/
by Phil Stanhope: “…project managers must first have a solid grasp of factors that affect website performance, and analyze how these factors are affecting the site in question. This, coupled with an understanding of available site optimization techniques, will help project managers make the most well informed site performance decisions.”

5). Command Line Basics
http://thinkvitamin.com/code/command-line-basics/
by Jason Seifer: “We’re going to be focusing on the Mac side of things, but a lot of the concepts in here will apply to all command line programs as well.”

6). SEO Tutorial: How to change your website’s host without affecting your Rankings
http://www.webseoanalytics.com/blog/seo-tutorial-how-to-change-your-website-host-without-affecting-your-rankings/
by Vasilis Vryniotis

7). Understanding Domain Names: Why and When?
http://www.onextrapixel.com/2012/01/30/understanding-domain-names-why-and-when/
by Alexander Dawson

8). 11 Tools For Finding a Perfect Domain Name
http://www.cssreflex.com/2011/12/tools-finding-perfect-domain.html/
by Abdullah

Freelance

1). A Dozen Tricks Used By Clients To Manipulate Freelancers
http://www.onextrapixel.com/2012/02/13/a-dozen-tricks-used-by-clients-to-manipulate-freelancers/
by Aidan Huang

2). 7 Common Objections Freelancers Face, Now Answered
http://freelancefolder.com/7-common-objections-freelancers-face-now-answered/
by Laura Spencer

3). 10 Awful Client Cliches That Make Every Designer Cringe
http://designshack.net/articles/business-articles/10-awful-client-cliches-that-make-every-designer-cringe/
by Joshua Johnson

4). Why RFPs Are Never Good
http://www.amberweinberg.com/why-rfps-are-never-good/
by Amber Weinberg

5). Web Design: Say No to Spec
www.onextrapixel.com/2012/01/16/web-design-say-no-to-spec/
by Stephanie Hamilton

6). How to Stay Alert & Refreshed: 6 Ways
http://workawesome.com/productivity/stay-alert/
by Yo Noguchi

7). How to convince your clients of the importance of white space
http://www.designer-daily.com/how-to-convince-your-clients-of-the-importance-of-white-space-22971
by Mirko

Trends

1). New Year’s Roundup of Web Design Trends 2011 and Predictions 2012
http://www.htmlcut.com/blog/web-design-trends-2011-predictions-2012.html

1). 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them)
http://designshack.net/articles/graphics/5-former-design-trends-that-arent-cool-anymore-so-stop-using-them/
by Joshua Johnson: “Bad practices and what to do instead.”

2). What else does HTML5 need to defeat flash? (Part 2)
http://speckyboy.com/2012/01/20/what-else-does-html5-need-to-defeat-flash-part-2/
by Viki Hoo

3). Smashing Special: WordPress Theme Trends For 2012
http://wp.smashingmagazine.com/2012/02/08/wordpress-theme-design-and-development-trends-for-2012/
by Siobhan McKeown

4). An Event Apart: The Future of CSS
http://www.lukew.com/ff/entry.asp?1495
by Luke Wroblewski

5). Guided Tour Through Web Design History
http://www.1stwebdesigner.com/design/web-design-history-tour/
by Christian Vasile

6). Browser Trends February 2012: Chrome 16 Obliterates IE8
http://www.sitepoint.com/browser-trends-february-2012/
by Craig Buckler

7). The Best SEO Practices and Tips 2012
http://www.iblogzone.com/2012/01/best-seo-practices-tips-2012.html
by DiTesco: “Best on-page SEO practices.”

8). 2012 Dev Predictions From a Gartner Analyst: Rise of Ruby, PaaS vs. SaaS, More
http://adtmag.com/blogs/watersworks/2012/01/2012-predictions-from-gartner-analysti.aspx
by John K. Waters

Opinions

1). An Important Time for Design
http://www.alistapart.com/articles/an-important-time-for-design/
by Cameron Koczon: “It’s becoming increasingly difficult to ignore the fact that design has a massive role to play in the evolution of the web and the next generation of web products.”

2). The separation of structure, presentation and behavior is dead
http://thinkvitamin.com/design/the-separation-of-structure-presentation-and-behavior-is-dead/
by Kevin Dees

3). A winter of discontent in the web design world?
http://christianheilmann.com/2011/12/21/a-winter-of-discontent-in-the-web-design-world/
by Christian Heilmann

4). I can’t design in the browser
http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/
by Sarah Parmenter

5). Benefits and Pitfalls of Using Code Frameworks
http://speckyboy.com/2012/01/18/benefits-and-pitfalls-of-using-code-frameworks/
by Jake Rocheleau

6). Inspiration vs. Imitation
http://www.jessicahische.is/obsessedwiththeinternet/andbeingresponsivelyinspired/inspiration-vs-imitation-2
by Jessica Hische: “They tell me my work was an inspiration… I feel all warm and fuzzy inside for a moment…until I click on their link and realize that much of what they intend to publish is nearly a direct tracing of my work.”

7). The instant web
http://www.netmagazine.com/opinions/instant-web
by Luis Freitas: “Digital marketing strategist Luis Freitas ponders on the next step the web is going to take and discusses the semantic web, the instant web and Web 3.0.”

8). Why HTML5 is not the choice for enterprise mobility
http://www.netmagazine.com/opinions/why-html5-not-choice-enterprise-mobility
by David Akka: “David Akka, UK MD of Magic Software, explores the buzz around HTML5 and why it may not yet be the right choice for enterprise developers.”

9). Mobile Content Strategy: Is Less Always More?
http://www.cmswire.com/cms/customer-experience/mobile-content-strategy-is-less-always-more-014432.php
by Martin Rapavy: “Being concise doesn’t mean that the content shouldn’t make sense and actually become useless.”

10). CALL FOR ACTION: THE OPEN WEB NEEDS YOU *NOW*
http://www.glazman.org/weblog/dotclear/index.php?post/2012/02/09/CALL-FOR-ACTION:-THE-OPEN-WEB-NEEDS-YOU-NOW
by glazou: “I am asking all the Web Authors community to stop designing web sites for WebKit only.”

11). What’s All The Fuss About Vendor Prefixes?
http://www.vanseodesign.com/css/vendor-prefixes-issue/
by Steven Bradley: “The issue. Additional Resources – Here then are some of the articles I’ve collected these past couple of weeks.”

12). Lea Verou on the future of CSS and more
http://www.netmagazine.com/interviews/lea-verou-future-css-and-more
by Tanya Combrinck: “Front-end code pirate Lea Verou answers your questions on her new project, common coding mistakes and exciting upcoming CSS features.”

Inpiration and Creativity

1). Examples of Fresh Effects in Web Design
http://tympanus.net/codrops/2012/01/05/examples-of-fresh-effects-in-web-design/
by Mary Lou: “Be it a whole new and experimental way of navigating through the website or just a tiny surprising hover effect – fresh effects can spice up your design and bring some life to it.”

2). Common Sense in Web Design? Sadly Not For Everyone
http://www.topdesignmag.com/common-sense-in-web-design-sadly-not-for-everyone/
by Bogdan: “If you are the owner of one of more of these sites…, then take my words as a critic point of view and hire someone to remake it. Fast.”

3). Showcase Of 45 Websites Using The Parallax Scrolling Effect
http://designresourcebox.com/showcase-of-45-websites-using-the-parallax-scrolling-effect/
by admin

4). A Collection Of Vintage And Retro Websites For Inspiration
http://designresourcebox.com/a-collection-of-vintage-and-retro-websites-for-inspiration/
by admin

5). Circles in Modern Web Design
http://www.splashnology.com/article/circles-in-modern-web-design/4387/
by AndrewG

6). Web design Ideas and Tips in Using Circles
http://naldzgraphics.net/tips/web-design-using-circles/
by Ebrian Acebedo

7). Showcase of Websites With Video Background
http://designbeep.com/2011/12/13/showcase-of-websites-with-video-background/
by Arshad Cini

8). 25 Examples of Super Wide Website Designs
http://line25.com/articles/25-examples-of-super-wide-website-designs
by Chris Spooner

9). 60+ Fresh Examples of Modern Single-Page-Website Designs
http://www.instantshift.com/2012/01/23/60-fresh-examples-of-modern-single-page-website-designs/
by Anders Ross

10). Awesome Single Page Website Designs
http://creativedesignmagazine.com/awesome-single-page-website-designs.html
by Loveish Kalsi

11). 30 Beautiful One Page Websites For Inspiration
http://www.bestfreewebresources.com/2012/01/30-beautiful-one-page-websites-for-inspiration.html
by BBL

12). One-Page Web Designs: The New Poster?
http://www.howinteractivedesign.com/inspiration/one-page-web-design-new-poster
by Patrick McNeil

13). 25 Outstanding Minimalist Website Designs
http://vandelaydesign.com/blog/galleries/minimal-website-designs/
by admin

14). 34 Beautiful Blog Designs
http://spyrestudios.com/34-beautiful-blog-designs/
by Brant Wilson

15). 2012 Creative and Impressive Blue Website
http://littleboxofdesign.com/?p=2282
by admin

16). 200 best 404 error page designs for inspiration
http://www.webdesignshock.com/404-error-page-designs/
by admin

17). 30 Brand New Examples of Using People in Web Design
http://www.webdesignfact.com/2012/01/examples-of-using-people-in-web-design.html
by admin

 
Check out also the great articles about Effective web design and its examples in “Related articles” (see links below).

 

Comments (6)

  1. Pingback: PSD to HTML Conversion » 207 Articles on Effective Web Design – Winter 2011-2012

  2. Pingback: Fast, Easy Web Design! » Blog Archive » Making Your Web Design Mobile​​Friendly in Minutes With …

  3. Pingback: 207 Articles on Effective WebDesign – Winter 2011-2012 – PSD to HTML Blog » Web Design

  4. this is effective web design for all website.

    Web Design Company

  5. this is very good

    Web Design Company

  6. This blog would be very much helpful to those who have stepped in the web designing field.A well explained information on effective web design.

    Viteb