HTMLcut blog

About PSD to HTML Conversion and More

Effective Website Design – 160+ Articles of Autumn 2011

Effective Website Design - 160 Articles of Autumn 2011This post continues the roundup “Designing Effective Websites – 80 Articles of Summer 2011″ and presents articles retweeted at @htmlcut this autumn. Autumn 2011 was very rich in great web design articles and inspiration collections, so we have decided to gather as many as possible of them.

As usual, you’ll find a lot of interesting information on web design principles, usability and user experience, content writing, designing e-commerce websites and effective call-to-action, and many other questions. This time there is a great deal of articles on development for mobile devices, responsive web design, as well as on redesign techniques and cross-cultural websites. One more novelty is that we’ve added several controversial articles, in particular, about HTML semantics. Hope you’ll enjoy this roundup.

Please note: Most of the articles contain lists of useful additional resources. Don’t forget to check them out too.

Web Design Principles and Basics

1). 45+ Free Lessons In Graphic Design Theory
by Cameron Chapman (@cameron_chapman): “Considering how many designers are self-taught, either in whole or in part, the importance of a solid foundation in graphic design theory is often overlooked… More than 45 recent lessons in graphic design theory: general theories, theories about user experience and usability, typographic theory, layout and grid theory, and color theory.”

2). The Close Relationship Between Gestalt Principles and Design
by Ester Liquori: “Importance of the Psychology Approach. What is the Gestalt Theory – The whole is greater than the sum of the parts. Perception. The Gestalt Six Rules: Proximity, Similarity, Closure, Common Fate, Law of Prägnanz alias Figure Ground Relationship, Good Continuation. Gestalt Principles and Visual Identities – Examples. Laws Combinations. Gestalt Rules and Web Design.”

3). Developing Emphasis in Web Design
by Patrick Cox (@pcridesagain): “Dominance and Subordination. Create a Focal Point: Proportion; Contrast – Color, Shape, Size; Physical Relationship – Isolation, Proximity, Similarity, Eye Direction (Continuance). Mind Control.”

4). How Clean is Your Web Design?
by Shaun Cronin (@shaun_cronin): “Clean design is not minimal design. Pixel Perfect Details. Spacing. Alignment. Typography. Color.”

5). Principles of Clean Web Design
by Corina Ciripitca: “A clean, minimalistic web design, where content is what stands out. Tips: Less is more. Focus on your content. The holy white space. Use graphics with a strong impact. Unique wireframes work best. Don’t forget about usability. About colors and contrast.”

6). An Overview of Defensive Design
by Alexander Dawson (@AlexDawsonUK): “The process of cleaning sites and ensuring that they’re as user-friendly as possible is referred to as defensive design. Server Outages, Missing Resources, Unsupported Technology – How to mitigate. Sustainable Layouts: Responsive Flexibility, Cross-Browser Support, Accessibility Needs. Reducing Input Errors: Intelligent Feedback, On-Page Assistants, Delayed Correction. Recommendations.”

7). Understanding Visual Hierarchy in Web Design
by Brandon Jones: “…Understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer. Hierarchists Toolbox: Size, Color, Contrast, Alignment, Repetition, Proximity, Density and Whitespace, Style and Texture. Failed Hierarchy. Especially Relevant to Web Designers. Exercise to Test Visual Hierarchy.”

8). Design With Dissonance
by Tad Fry (@tadfry): “Dissonance. Why Should You Use Dissonance? Writing With Dissonance: Essay by Paul Scrivens and by Whitney Hess. Project Built On Dissonance. More Dissonance: Adobe, A Book Apart, 37signals, Blinksale. Where To Start?”

9). Architecture in Web Design: Applying Vitruvius’ Principles
by Patrick Cox (@pcridesagain): “Marcus Vitruvius Pollio: Firmatis – be durable; Utilitas – be functional; Venustatis – be beautiful.”

10). Asymmetrical balance in web design
by Patrick McNeil (@designmeltdown)

11). Communication, Mood and Meaning: Lines in Web Design
by Patrick Cox (@pcridesagain): “Communication Line Types. Meaning and Mood. Examples of Lines in Web Design.”

12). Why is Design the Body Language of the Web?
by Corina Ciripitca: “Body language and web design – do they have something in common? Deliver your most important message fast. Inverted Pyramid of Design. Eye contact is important. Focus only on what needs attention.”

Website Layout

1). 22 Examples Of Different Grid Types On The Web
by Steven Bradley (@vangogh): “Manuscript grid, Column grid, Modular grid, and Hierarchical grid – Website examples of each grid type.”

2). Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
by Kayla Knight (@KaylaMaeKnight): “Difference Between Fixed And Fluid Layouts. Fixed Design. Cons Of Fixed Design. Fluid Design. Elastic Design: Pros, Cons, Examples. Which Is Right For Your Website? Further Resources.”

3). Five killer ways to break the grid
by Matthew Smith

4). Web Design Using Grids: Tools and Inspiration
by Rochester Oliveira (@roch_br): “Exaples of grid-based websites. Tools:, 1140px –, Golden Grid, BootStrap,,,, YUI 2 – Grids CSS, 1 Line CSS Grid.”

Psychology, Web Design and Manipulation

1). Dark Patterns: Deception vs. Honesty in UI Design
by Harry Brignull (@harrybr): “ A pattern library with the specific goal of naming and shaming deceptive user interfaces. Table: Psychological Insight – Applied Honestly (benefits users) – Applied Deceptively (benefits business). Forced Continuity: rolling over from free to paid plans. Weaning a business from dark patterns.”

Colors in Web Design

1). How to Correctly Handle the Colors of Your Website
by Daniel Pintilie: “Classifications. Meanings. Color schemes. Why are Colors so Important: 1. Colors have manipulative powers; 2. Colors may attract or run away visitors; 3. These may emphasize your message; 4. Colors are the soul of marketing.”

2). Color Psychology and Online Marketing
by Drew Coffin: “Colors in E-COMMERCE. Color and Culture. Color meaning: Red and others. Color Variations and Combinations. Color and Brand Identity. ”

3). A Guide To Improve Your Website’s Readability Through Colors
by Tsveti: “Color Brightness and Color Difference Determine Readability: Formulas and tools to calculate them. AAA tests. The Golden Classics. The Intricacies of Dark Background. Tricky Colors That Fit Nowhere.”

4). Tips in Choosing Colors for Brand Identity
by Kareen Liez: “Color psychology: Social media sites use blue for it shows friendliness. Red for a flower company – gives a positive meaning. Reflect the right emotion – for a bit complex business opt for colors like maroon. Impact to consumers – Sale and free signs are red to tell it is urgent; Orange invites to do some action. Types of buyers and colors.”

5). 27 Examples of Color Usage in Web Design
by Gisele Muller (@gismullr): “In these examples you’ll notice some using color to highlight and draw attention to specific elements, while others use larger amounts of color to set the over all tone of the site.”

6). Effective Use of Color Psychology in Web Design
by Marvi Ocampo: “Some EXAMPLES of how color psychology is being used in websites. Try to see if the color could help relay their message.”

Usability and User Experience

1). Quick Overview of User Experience for Web Designers
by Amir Khella (@amirkhella): “What is UX? Integrating UX into Your Design Process.”

2). The Role Of Design In The Kingdom Of Content
by Jason Gross (@JasonAGross): “3 parts of a website: Introduction, Consumption and Reaction. A good impression, enabling smooth and meaningful consumption, and encouraging engagement with the content. All 3 of these areas are opportunities to drive a user experience that is in harmony with our content. Excellent EXAMPLES and analysis.”

3). 247 web usability guidelines
by David Travis (@userfocus): “Home page usability; Task orientation; Navigation and information architecture; Forms and data entry; Trust and credibility; Writing and content quality; Page layout and visual design; Search usability; Help, feedback and error tolerance. Excel workbook to download.”

4). Gifts for User Experience Geeks 2011
by Nick Finck: “This list is a collection of items I have come across over the last year that would make the ideal gifts for UX geeks like Information Architects, Usability Specialists, Interaction Designers, and even Web Designers.”

5). 22 Essential Tools for Testing Your Website’s Usability
by Jacob Gube (@sixrevisions): “6 crucial factors that affect usability. For each, you’ll be provided with some tips, tools and ideas on how you can measure these usability factors. 1. User Task Analysis. 2. Readability. 3. Site Navigability. 4. Accessibility: Cross-Browser/Cross-Platform Compatibility, Semantic HTML Markup, Color Choice, Use of HTML Accessibility Features. 5. Website Speed. 6. User Experience. TOOLS.”

6). Comprehensive Review Of Usability And User Experience Testing Tools
by Cameron Chapman (@cameron_chapman): “Free And Freemium Tools. Premium Tools.”

7). 14 Guidelines For Web Site Tabs Usability
by Justin Mifsud (@justinmifsud): “Why tabs are good for usability. Usability Guidelines for tabs.”

8). Idiots, Drama Queens and Scammers: Improving Customer Service with UX
by Laura Klein (@lauraklein): “Improving Customer Behavior. Idiots, Drama Queens and Scammers: How to Turn Them Into Geniuses.”

9). The Perfect Paragraph
by Heydon Pickering: “What Is The Perfect Paragraph? Setting Your Paragraphs: Typeface; Font Size and Measure – 16 pixels is a clear standard, measure between 45 and 75 characters; Leading and Vertical Rhythm; Word Spacing and Justification; Styling Contextually.”

10). Clutter
by Jared Spool: “Clutter is what happens when we fill a page with things the user doesn’t care about. Replace the useless stuff with links, copy, and content the users really want, and the page suddenly becomes uncluttered.”

11). Make Your Website Text Easy to Read
by admin (@FlashXMLnet): “Avoid colour schemes with low contrast; Avoid the light text on dark background; Do not make the text too small; Small chunks of text; Use left-aligned; Images should support your text.”

12). Why Headlines Attract More User Attention Than Images
by anthony

Cross Cultural Web Design

1). Construct a Framework for a Cross-Cultural Design
by Ester Liquori: “Basic Cross-cultural Design Patterns: Language, Symbols, Images, Colors, Navigation and way of reading. How It Contribute to Increase Sells. Spotting out different cultural habits. How to Compare Results. The framework construction: How people act, What they do, What they say, How they feel, The color associated to this feeling, Images and symbols recurrences in similar situations. A quick example: Rent Car Services. To sum up. Resources.”

2). The Rise of Cross-Channel UX Design
by Tyler Tate (@tylertate): “Welcome to the new cross-channel, multiplatform, transmedia information age. 87% (of clients) want a similar way to access products and services… whether online, in the store, on their mobile phone, or using a self-service device.”

3). East Asian Cultural Perception in UX / Interface Design
by Kendra Schaefer (@kendraschaefer): “Visualizing the Progression of Time. Language Orientation. Historical Periods in Design: In Asia, There was no Retro. Lost in Translation: Visual Cultural Indicators. The Good News: Basic emotions. What Does all This Mean for Your Design Decisions?”

4). Cross Cultural Usability in Web Design
by Daniela Baker

5). Mastering User Attention With Feng-Gui
by Joshua Johnson (@secondfret): “Predicting User Eye Movements. You’re an Unreliable Source. Testing Methods. Meet Feng-Gui.”


1). The Data-Pixel Approach To Improving User Experience
by Rian van der Merwe (@rianvdm): “Redesign Through Realignment. Edward Tufte And The Data-Ink Ratio. Principle 1: Above All Else, Show the Data. Principle 2: Erase Non-Data Pixels, Within Reason. Principle 3: Erase Redundant Data-Pixels, Within Reason. Principle 4: Maximize the Data-Pixel Ratio, Within Reason. Principle 5: Revise and Edit.”

2). 15+ Inspirational Examples of Website Redesign
by Mohammad Moradi: “By comparing redesigned websites to their earlier incarnations, we become informed about new technologies, design trends and other things that emerged in the time between the two designs and the impact of these things on Web design.”

3). How to Redesign
by Sacha Greif (@SachaGreif): “Unsolicited redesigns are when a designer takes it upon themselves to redesign a site for free without having been asked by the company. I recently did a quick Quora redesign myself, and it prompted me to explore this topic.” ALSO DON’T forget to follow the articles mentioned there.

4). From “Mobile Friendly” to “Mobile First”
by Aaron Gustafson (@AaronGustafson): “An example of website redesign – Solutions and Results.”

HTML5 and Semantics

1). HTML5 Semantics
by Bruce Lawson: “Semantic markup is not ‘nice to have,’ but is rather a cornerstone of Web development, because it is what enhances accessibility, searchability, internationalization and interoperability. Some Elements Are Gone. Some Elements Have Been Redefined. New Semantics. Internationalization. Structural Semantics. Interactive Semantics. Do We Have The Right Semantics? When, Where, Who? Microdata. Do Semantics Matter Anyway?”

2). Pursuing Semantic Value
by Jeremy Keith (@adactio): “A reaction on Divya Manian’s Our Pointless Pursuit Of Semantic Value. See also COMMENTS.”

3). Lynx would not be impressed – on semantics and HTML
by Christian Heilmann (@codepo8): “Lately there has been a lot of discussion about markup, and especially the new HTML5 elements. The lack of understanding of the value of semantic markup to me is just a symptom of a change that is happening. Build it quickly, make it work. Write less, achieve more. If you can’t see it, why do it? The big book of ARIA. So what about HTML and semantics? Bigger fish to fry.”

Content and Copywriting

1). Crafting Intentional Content
by Stephanie Hay: “Goals first. The right language in the right place. Anticipating elements that can prevent engagement. Identifying your target audience’s values. Prioritizing key messages. Choosing conversions over traffic. Removing the distraction: The KISS Principle. Pitfalls to Avoid. Things to Do. Resources.”

2). 5 Ways to Build a Better Website
by Lexi Rodrigo (@lexirodrigo): “A Copywriting Approach. 1. Begin with Proper Preparation. 2. Make It About Them. 3. Go Beyond the Features. 4. Address Their 3Ps: pain, problem, and predicament. 5. Have a Call to Action. On Your Way To Better Copy.”

3). Introducing The 6 + 1 Model For Effective Copywriting (Better Than AIDA)
by Danny Iny (@DannyIny): “What Was Missing in AIDA? Context is a critical component – Without it, action likely won’t result, even if you call for it. A Better Model: 6 + 1. 1 – Context. 2 – Attention. 3 – Desire. 4 – The Gap. 5 – Solution. 6 – Call to Action. +1 – Credibility: Showing that you understand their reality intimately, Appeal to common sense, Social proof (how many people have taken the action), Demonstrate your expertise (education and experience), Apply risk-reversal (with guarantees and warranties).”

4). The Ten Commandments of Writing Copy That Wins Clients
by Joshua Johnson (@designshack): “1. Humbleness is a Virtue, But It Won’t Pay the Mortgage. 2. Be Honest, Just Shut Up. 3. Be Professional. 4. Say What You Do and Keep It Simple. 5. Communicate Passion. 6. Find Your Unique Selling Proposition. 7. Everyone Loves a Catchy Headline. 8. The Proof Is In the Work. 9. It’s Not All About You. 10. Seal the Deal.”

5). 13 Awesome Headlines for Business Blogging Success
by Kipp Bodnar

6). Readability: Who Are You Writing For?
by Andrew Clarke: “Readability is how well your text can be understood on first reading. Readability is a factor in usability – ‘use the simplest language possible’. Sentence Length. Sentence Structure. English 101: What is a Sentence? Incorrect capitalisation. Quotes. My absolute current pet hate. Oxymora. Word complexity – Antidisestablishmentarianism. Document structure. Measures of readability. Fog Index. A practical EXAMPLE. What else affects readability? Conclusive tips.”

7). Designing for Content: Creating a Message Hierarchy
by Stephanie Hay: “Storytelling through immersive experiences. Making the writing happen: 1). Capture goals – a spreadsheet with 3 columns: Message a user reads; Business purpose for that user message; Underlying business outcome expected from that message. 2). Write potential primary messages. 3). Edit or eliminate redundant messages, end up with 3-5 of them. 4). Prioritize the messages hierarchically. Validate the hierarchy. Keep the messages a priority. Pitfalls to Avoid. Things to Do. Resources.”

8). Fluidity Of Content And Design: Learning From Where The Wild Things Are
by Sarah Bauer: “The post explains 4 strategies for improving fluidity of content and design with examples of websites use these strategies. 1) With Graphics As Your Witness: if businesses use promotional language, they create cognitive burdens on their users – Instead, use design to convey self-promotion. 2) Tighten Up: Segmentation, prioritization and clear labeling. 3) Check The Narrative Voice 4) Be Mindful Of The User Experience.”

9). Using Abbreviations in Copywriting
by Rebecca Garland (@internetauthor): “For Example: ‘i.e.’ and ‘e.g.’. Punctuation with Abbreviations. Incomplete Lists. Using Abbreviations in Text. Common Mistakes with Abbreviations.”

10). A Brush With The Elegant Ampersand
by Salman Siddiqui (@salmanhere): “History. How to Draw Ampersand? Usage of Ampersand and Important Rules. Ampersand for Webmasters. Showcase.”

11). Interface Design is Copywriting
by Joshua Porter (@bokardo): “An interesting point of view and EXAMPLES.”


1). How to Fight Plagiarism – Tips and Tools
by Rean John Uehara (@ueharataichou): “What Plagiarism is. How do you Fight Plagiarism? – Passive, Aggressive. Things that are commonly stolen: Articles, Bandwidth via hotlinking, Design, Idea, Music – How to Deal with them. TOOLS and Services.”

2). Understanding the Basics of Copyright Laws
by Rachel Arandilla (@rachelarandilla): “Copyright in a Nutshell. Q&A – Copyright on the Web. Important Terminologies. Copyright Laws: Expiration, Penalties. If you’re a victim of plagiarism.”

3). Copyright Fair Use and How it Works for Online Images
by Sara Hawkins (@saving4someday)


1). Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students
by Ellen Lupton: “Type is the foundation of print and web design. Everything you need to know about thinking with type, you will find here. This richly detailed update to the classic text belongs on the shelf of every designer, writer, editor, publisher, and client. -Jefferey Zeldman-”

2). Serif vs. Sans-Serif in Web Design: The basics of online typography
by Timothy Martinez Jr.: “The basics of serifs and sans-serifs. Why should I care about serifs? Serif vs. Sans-Serif: what’s better? Size matters. Mix, match and experiment.”

3). A dummy’s guide to typefaces (INFOGRAPHICS)
by JD Rucker: “Typeface vs. fonts. Top 5 overused and abused.”

4). The Popularity of Helvetica Font
by Elaine Hirsch

5). First Look: An Update Of Verdana And Georgia For The iPad Age
by Suzanne LaBarre (@suzannelabarre): “An exclusive interview with the legendary Matthew Carter, the man who designed two of the world’s most ubiquitous fonts, on updating his classic works for a new era.”

6). 45 Creative Examples of Large Typography In Web Design
by Siva Kumar (@pokkisam)

7). History of Font Design and Some Font Editing Tools
by admin (@pelfusion)

8). 4 Ways To Identify a Web Font On a Website
by Lior Levin: “Identifying a font on the Web can be a tricky matter… Here are 4 tools to make the identification of fonts easy and effective.”

9). 10 Typography Tools for CSS
by Sonia Mansfield (@psprint): “A collection of excellent typography-related, CSS-compatible applications for you to use in your own work.”

10). Options for @font-face implementation
by Cameron Chapman (@cameron_chapman): “Legalities associated with font embedding. Options for embedding. Google Web Fonts API. Font Services. When to use @font-face. Awesome webfont combos.”

Navigation and Menus

1). 6 Considerations for Simple Website Navigation Design
by Pamela Vaughan: “More than three-quarters of respondents said that the most important element in website design is ease in finding information. 1. Simple primary navigation (and near the top); 2. Breadcrumbs; 3. Search box near the top; 4. No more than 3 levels deep; 5. Links within the page copy; 6. Avoid use of complicated JavaScript and Flash.”

2). Innovative Navigation Techniques to Save You Header Space
by anthony: “Elastic Search Bar. Unified Login/Sign Up Button. Nav Bar Logo. Hover Bar. Dropdown Logo Menu. Flyout Ribbon. Fisheye Menu.”

3). Navigation patterns for ten common types of websites
by Cameron Chapman (@cameron_chapman): “All sites: tabbed navigation, header navigation, footer navigation. 1. Blogs. 2. News sites. 3. E-commerce sites. 4. Informational and reference sites. 5. Corporate sites. 6. Community or social network sites. 7. Event sites. 8. Review sites. 9. Personal sites. 10. Galleries.”

4). 25 e-commerce mega menus dissected
by Matt Clarke (@TechPad): “A round-up of some of the things online retailers are currently doing with their horizontal navigation. MEGA MENU tips: Use headings; Use columns; Show your best sellers; Keep it short; Add a border or shadow; Test it in a range of browsers; Consider going full width; Promote your USPs; Get the timing right; Vary menu size if you need to; Focus on granularity.”

5). The Ins and Outs of Dynamic Navigation Menus
by Jake Rocheleau (@jakerocheleau): “Plan a Webpage Outline. Attaching Sub-Menus. Ajax Tabs. If You Go Big, Go Fancy. Ruling HTML5 Standards.”

6). 40 Websites Having Unusual yet Attractive Navigation
by admin (@webdesignfact): “Designing website navigation is an art in itself, and designers become better at it with experience.”

7). 40 Websites with fixed navigation
by Awwwards Team (@thecssawards)

Landing Page and Conversion Rate

1). A Showcase of Landing Pages Designed for Conversion
by Alex Black: “Several beautifully designed landing pages that all appear to have been built with one particular goal in mind – increasing conversions. All landing pages are thoroughly analyzed.”

2). 8 Techniques To Create An Irresistible Landing Page
by Christian Vasile (@christianvasile): “1. Embrace or avoid the fold. 2. You need a clear call to action. 3. Use infographics. 4. No other links (but you can have a Privacy Policy link which should open in a separate tab). 5. Offer something for free: free always works, as well as ‘No obligation’, ‘No charge’, ‘No credit card required’, ‘No commitment required’ and many others. 6. Where to sign up – When use Call-to-Action buttons and when forms. 7. Focus on security too. 8. Closely follow the progress. LIST of RESOURCES.”

3). Do’s and don’ts of call to action pages
by Cameron Chapman (@cameron_chapman): “1) Make it intuitive to use. 2) Only necessary graphics: A logo and image of the product + those that directly illustrate benefits or features. 3) Minimize navigation options. 4) Use modal windows. 5) Don’t use red for call-to-action buttons. 6) Don’t let call-to-action button get lost. 7) Include info visitors really need: well-organized and scannable copy. 8). Don’t ask for too much info. 9) Don’t ask for too much commitment: Consider neutral phrasing – ‘See plans and pricing’ or ‘Learn more’ vs ‘Buy now’ or ‘Sign up'; Using 2-3 steps can be more effective. 10) Keep it simple. 11) Don’t let links break. 12) Direct to the best options. 13) Make the value clear. 14) Don’t forget to test. 15) More Examples.”

4). The Button Color A/B Test: Red Beats Green
by Josh Porter: “At different times in the last two years, I’ve heard green, pink, red, orange, and even light blue as THE ONE COLOR that works best. We chose to test were green and red. The result: The red button outperformed the green button by 21%.”

5). How to Diagnose and Heal a Poorly Converting Landing Page
by Pamela Vaughan: “1. Make Sure Your Messaging Aligns. 2. Make Sure You’re Clearly Communicating the Necessary Action. 3. Remove Site Navigation and Competing Calls-to-Action. 4. Test Form Lengths. 5. Offer Security.”

6). Variables to Test When a Landing Page Isn’t Working
by Ruben Corbo: “A/B testing. The big takeaway for A/B testing is to change one thing at a time. Where apply: 1. Headlines; 2. Call to Action; 3. Trust Signals; 4. Visual Elements; 5. Pricing. Google Optimizer is a great free tool.”

7). 5 Tips To Improve Conversions For B2B Sites
by Abraham Nord: “1. Implement Clean, Clear Landing Pages 2. Focus On Visitor Benefits 3. Offer Choices: Providing 2 offers increased leads by 63% over a single call-to-action 4. Ensure Promises are Accurate 5. Create Demand and Urgency: An example of a time sensitive call-to-action increased lead volume by 46%.”

8). How Images Can Boost Your Conversion Rate
by Peep Laja (@peeplaja): “High quality images. Alternate and detailed views. Context. Zoom. Avoid cheesy stock photos (if you’re using shiny people and suits shaking hands, you’re stupid and you think your customers are too). Draw attention to products – eyetracking studies. Men are pervs, women are gold diggers. Try 360 rotating images. Product images in site search window. Human photos on a landing page increase sales and conversions – It needs to be the right face. Facebook ads. Images on blog posts.”

9). How to Move Users Around Your Web Pages With Visual Aids
by Michael: “The Theory of Visual Aids. Setting Up a Visual Path Test. The Results. By simply changing the top image we significantly altered the click distribution and performance – Eye Direction.”

Call to Action

1). 10 Best Practices to Optimize the Language of Your Calls-to-Action
by Magdalena Georgieva: “Some best practices for writing a compelling call-to-action: 1) Convey Value 2) Create Urgency – emphasize seasonality, special discounts, or even use adverbs like ‘now’ and ‘today’ 3) Make it Personal 4) Include Testimonials 5) Include Numbers 6) Turn it Into a Bonus 7) Make it Newsworthy 8.) Be Confident in Your Language 9) Ask Questions 10) Be Subtle. Free ebook ‘An Introduction to Effective Calls-to-Action’.”

2). The Ultimate Showcase of Convincing Call to Action Buttons
by Jameel Khan (@webdesigncore)

3). Simple yet Big Significance of a Call to Action
by Marvi Ocampo: “Other things that make a call to action important: 1. Attracts attention 2. Tells the next step 4. Helps further a relationship 5. Gives clients 6. Shows how effective is your site 7. Encourages to read 8. Gives more income 9. Gives more subscribers 10. Encourage to participate.”


1). An Extensive Guide To Web Form Usability
by Justin Mifsud (@justinmifsud): “Why Web Form Usability Is Important. The Six Components Of Web Forms: Labels, Input Fields, Actions, Help, Messages, Validation. Tackling Usability via Three Aspects of Forms: Relationship, Conversation, Appearance. Alignment of labels: top vs left vs right. Resources.”

2). Showcase of Beautifully Designed Contact Forms for Inspiration
by Arshad Cini (@designbeep): “Simply the best.”

3). 30 Examples of Sign-Up Web Forms for Design Inspiration
by Jacob Gube (@sixrevisions)

4). Top 10 Places to Put an Opt-In Form
by Eugene (@EugeneFarber): “1. Above the Header 2. Inside the Header 3. A Feature Box 4. Top of Sidebar 5. In the Middle of Your Post 6. End of a Single Post 7. The Footer 8. A Lightbox Pop-up 9. Signatures (Email, Forum, Etc) 10. Social Media Pages (Facebook, Twitter).”

5). Web Design Inspiration : Contact Forms
by admin (@Nataly_Birch)

6). 7 Form Tactics That Drive Users Crazy
by admin (@kissmetrics)

See also “77 Web Development Articles Retweeted at @htmlcut”
Effective Web Design, articles #2, #4 and #5

Footers and Headers

1). 60 Best WordPress Footer Design
by vivek: For Inspiration.

2). 12 Creative and Cute Website Footer Designs
by Aldo

3). 30+ Creative Footer Designs
by BBL (@bestfreewebres)

4). 30 Inspiring Website Footer Designs
by Alice

5). Web Design Inspiration : Artistic Footer
by admin (@Nataly_Birch)

6). 30 Examples of Creative Website Headers Inspired by Plants
by Sonny Day

Tips and Recommendations

1). 9 Inspirational Website Effects Deconstructed
by Ruben D’Oliveira (@rubendoliveira): “1. Parallax Effect 2. Mouse Drag 3. Sliding Panel 4. Konami Code 5. Hover Effect 6. Loading Page 7. Scrollbar 8. Mouse Wheel 9. Slide Navigation.”

2). Tips in Using Character Designs for Web Design
by Kareen Liez: “1. Use hand drawn style vector illustration 2. Use a detailed character 3. Make an easily recognized character 4. Use it in simple websites 5. Use it to fill empty spaces 6. Use it to show what the site is about 7. Use a character with minimal design 8. Use weird characters 9. Use different angles of the character 10. Use many characters.”

3). 7 Ways to Avoid Scary Web Design (INFOGRAPHICS)
by Ian Yates

4). Useful Tips for Designing a Professional Website
by admin: “Visual Aspect. Easy Navigation. Loading Time. Make it Engaging. A lot of additional RESOURCES.”

5). Types of Image Files and How to Properly Use Them and-how-to-properly-use-them/
by Daniel (@DesignArticles): “GIF, PNG, TIFF, JPEG: Where to use and Where not to use.”

6). How to Design a Tour Page: Examples and Best Practices
by Joshua Johnson (@secondfret): “It’s Harder Than It Looks. Content Organization. Strong Content Presentation. Mozilla Rethinks the Tour Page. An Organized Mess. Show the Process (in 3 simple steps).”

7). Brilliant Use of HTML Lists in Web Design
by Jake Rocheleau (@jakerocheleau): “Listing Elements. Application: Navigation, Software Features, Blog Categories and Tags, Footer Columns with Definition Lists, Tasks and To-dos, Dribbble Players List, Horizontal Breadcrumbs. More Beautiful List-Based UI.”

8). The Labyrinth Effect In Good Looking Designs
by Ruben D’Oliveira (@rubendoliveira): “When design is a sky-rocket but you don’t know where to look first, it’s a clear indicator that it suffers from a labyrinth of information that makes the user feel lost and overwhelmed. Examples. How to avoid: White-space, Balance, Imagery, Minimalism.”

E-Commerce Websites

1). How To Design the AIDA Sales Process
by Steven Bradley (@vangogh): “Designing the AIDA Sales Process: Attention – Attract the attention of the customer; Interest – Create interest through a demonstration of benefits; Desire – Convice customers they want and desire your solution; Action; Retention. Additional Thoughts and Resources.”

2). Selling Online: Design, Development, and Business Considerations
by Kayla Knight (@KaylaMaeKnight): “Web and UI Design: Strong Images, Focus on Categories, Calls to Action, Easy-to-Find Shopping Cart. Development: An Integrated Shopping Cart, Trustworthy Payment Gateways, Organized Site Structure & Search. Business Tactics: Marketing is #1, Worry About Shipping, A Great Customer Experience, Build Trust and Be Credible.”

3). Improving The Online Shopping Experience, Part 1: Getting Customers To Your Products
by Lyndon Cerejo: “Ways to reduce the drop in the purchase funnel. 1) Promote Your Online Presence 2) Instill Confidence In Customers: Professional-looking website, Security, Business practices (privacy, security, return policies), Visible contact info, Third-party certification (trust certificates, security badges, accreditation, ratings) 3) Effective search 4) Further READING.”

4). Improving The Online Shopping Experience, Part 2: Guiding Customers Through The Buying Process
by Lyndon Cerejo: “1) Enable The Customer to Decide: Product name, Images, Video, Pricing and availability, Description, Customer ratings and reviews, Suggestions of related products, Contact information, Add to cart. 2) Reduce Shopping-Cart Abandonment: Always visible and accessible, … 3) Keep Registration Short and Optional. 4) Streamline Check-Out: Relevant recommendations, Minimize distractions, Progress indicator, Choice of payment methods, Policies in context, Order summary, Call to Order, Confirmation, Create an account. 5) Further READING.”

5). Increasing Conversion with Web Design. Part 1
Mobile Apps: Design for Mobile Conversion. Part 2
by Sarah Lynn (@shicksdesign): “Sense of urgency. AddToCart Button Placement. A/B Testing. Show off products. Engaging Landing Pages: Short and direct copy, A powerful call to action, Answers about the main purpose of the product, Value vs. selling (don’t hit your customer with cheesy sales slogans), Promotion or discount – it performs best when there is a purpose, A comparison chart. Checkout Design: Reduced Header & Footer, Easy Condensed Checkout, Multi-Page vs. Single Page Checkout. Checkout as a Guest. The Key is to Simplify. Safe & Secure to Shop. Customer Reviews. Site Performance. 10 Examples of Successful Ecommerce Designs.”
Part 2: “Mobile Usability: Navigation, Text Input. Placement of Key Elements. Mobile Audiences. Types of Mobile Applications. Customization. E-commerce Mobile App Design Examples.”

6). Top 10 Reasons Your Website Is Losing Sales
by Erica Swallow: “Pricing, Product descriptions, Stock information, Site functionality, Shipping information, Images, Discounts, Navigation, Video, Website speed.”

7). How to Use Images Effectively in E-Commerce Websites?
by admin: “Highlight innovation. Trigger emotional response. Show features. Sell a lifestyle. Don’t use clichéd stock images. Show the product during use. Show details. And other tips.”

8). E-Commerce Usability
by Jakob Nielsen: “Bad Content Kill Sales. Loyalty = Business”

9). 20+ Examples of Product Display in Web Design
by Adrian (@designmodo): “E-commerce web designers have a bigger job to do in comparison with the average web designer. They must create design that attracts visitors and also ensure that it’s highly user-friendly for visitors to browse and buy.”

10). 38 Beautiful Ecommerce Websites
by Brant Wilson

11). 5 Best Practices of Facebook eCommerce Stores
by Mike Ewing: “1. Be Interactive – Starbucks 2. Offer Incentives – Best Buy 3. Understand Trends – Old Spice 4. Optimize Your Layout – Liverpool Football Club 5. Become Lady Gaga, Or Keep Things Enticing.”

12). 30 e-commerce sites worth seeing
by Kendra Gaines (@kgainez)

Mobile Websites

1). Mobile web content adaptation techniques
by Ronan (@xbs): “Evolution of content adaptation. Responsive Design. Mobile-First Responsive Design. Progressive Enhancement. Server-side Adaptation. Hybrid Approach. Recommended reading. Recommended Following.”

2). 5 Key Responsive Web Design Elements
by Brian Schwartz (@creativereason): “Navigation, Columns, Calls to action, Branding, Padding and White Space.”

3). Techniques in responsive web design
by Chris Converse (@chrisconverse): “Creating different images. Assign images to HTML elements. Reposition the global navigation. Large screen CSS as default for older browsers.”

4). Responsive Web Design Demystified
by Matt Doyle: “Responsive design in a nutshell. Responsive or adaptive? Example of a non-responsive layout. Making the layout responsive: Understanding media queries, Adapting to viewports 1000, 700, 480 pixels wide or less. Dealing with mobile devices: the viewport meta tag. Responsive design RESOURCES.”

5). 11 reasons why Responsive Design isn’t that cool!
by admin (@WebDesignShock): “1. Image Resizing 2. Resizing images forces CPU and memory (3 bytes/pixel) 3. Mobile devices download non-viewable data 4. Mobile speed vs. Desktop speed 5. Hiding background images is a bad idea 6. More code, more to update 7. CSS media queries will not remove unnecessary code 8. CSS media query is a bad choice for multiple devices 9. “Great mobile products are created, never ported” 10. Mobile needs are different from desktop needs 11. Better create a mobile website than a responsive one. Examples and comparison. Lots of statistics and other info.”

6). Best Approach to Mobile Website Design
by Christian Vasile (@christianvasile): “A user-centered approach. On-going cycle: Analyze the situation, Understand the users and their needs, Prioritize the features, Design the website (Smaller screens, Simplify the navigation, Prioritize info, Minimize user input, Keep the usage low), Review, testing and refining. Examples.”

7). Ethan Marcotte’s 20 favourite responsive sites
by Ethan Marcotte: “Ethan Marcotte, the father of responsive web design, has compiled a whole folder of responsive sites, each as flexible and foxy as the last. Here he rounds up 20 of his favourites.”

8). Responsive Web Design: 50 Examples and Best Practices
by Adrian (@designmodo): “Some pros and cons of responsive web designing. Examples.”

9). A case study in responsive design
by Dan Sheerman (@sheerman): “A few lessons learnt from a real project. Why build from mobile up. Paul did it wrong, don’t copy him: stylesheets in the wrong order. Plan from the start, but… Dealing with navigation. Dealing with content. Testing and browser quirks.”

10). Responsive Web Design Templates and Frameworks
by Henry Jones: “A collection of Responsive Web Design Templates and Frameworks.”

11). 20 Useful Tools for Responsive Web Design
by David Martin (@webadelic)

12). The Simple Awesomeness Of Mobile Web Design – 37 Examples
by admin (@boogiesbc)


1). Accessibility: What’s Your Markup Saying to You?
by Ian Yates: “The Web Standards Model: structure, presentation, and behavior. Assistive Technologies (AT). Semantics. Have You Ever Used a Screen Reader? Examples. Example Markup. Improved Accessibility. How Does a Screen Reader See It? Help in the Form of WIA-ARIA.”

2). Usability vs. Accessibility
by Lief: “Usability: Efficiency, Learnability, Memorability, Satisfaction. Accessibility.”

Cross-browser Compatibility

1). Cross-Browser PSD to HTML Conversion – How Compatible Should It Be With the Advent of Mobile Web?
by htmlcut (@htmlcut): “Browser Market Share Statistics. Browser Support of HTML5 and CSS3. Desktop vs. Mobile. Mobile Browser Market Share. Responsive Web Design vs. Mobile Versions. HTML5 and the Mobile Web. Most Popular Mobile Operating Systems and Screen Resolutions. Which Browsers to Mention Ordering PSD to HTML Conversion.”

2). Browser Report: November 2011
by Shaun Cronin (@shaun_cronin): “Latest Versions and Updates. Browser Usage. CSS3 Support. HTML5 Support. HTML5 Audio and Video. HTML5 Forms. Form Validation. Mobile Browsers.”

Website Technical Aspects

1). 10+ .htaccess snippets to optimize your website
by Jean-Baptiste Jung (@catswhocode): “Force trailing slash. Prevent hotlinking images (save bandwidth). Redirect mobile devices. Force download of a specific filetype. Cross Domain Font embedding for Firefox. Speed up your site. Stop spam. Redirect different feeds to a single format. Configure a website for HTML5 videos. Log PHP errors. Run PHP inside JavaScript files.”

2). Unleashing .htaccess for WordPress
by Salman Siddiqui (@salmanhere): “What is .htaccess? .htaccess and Apache. Why not edit httpd.conf directly? Securing the .htaccess. Protecting wp-config.php. Hide Directories. Blocking IP Addresses. Deny Access to Spam-Bot Comments. Only your IP accesses wp-admin Folder. Hotlinking Disabled. Redirect to Maintenance Page. Improve Blog Speed. Removing /year/month/day/ and /category/ from Permalinks.”

3). How to Create an XML Sitemap File For Your Static Website
by Lior Levin

4). Everything You Need To Know About DNS
by Salman Siddiqui (@salmanhere): “What is DNS? A basic flow of request on the Internet. What is ’48 hours delay’? How and when does caching occur? What is TTL? Other types of DNS lookups. Other usage of DNS.”


1). Website Design Ideas and Trends of 2011
by Kareen Liez: “1. Use HTML5 and CSS3 2. Creative usage of typography 3. Use of 3D effect 4. Use of large background image 5. Links to social media 6. Single page layout design 7. Use of attractive custom illustrations 8. Use introductions 9. Websites for mobile 10. Websites with grid layouts.”

2). The Latest Trends in Web Design
by Corina Ciripitca: “Big typography, small typography. Images and Photo Backgrounds. Social network buttons. Hand drawn web design. One Page Layout. Compatible for touchscreen devices. HTML 5 and CSS3. Animation and 3D.”

3). Five web design clichés to never use again
by Keith Butters: “1. The page curl 2. The book metaphor 3. Doors 4. The 45˚ arrow 5. The million sharing options.”

4). Top Minimalist Website Designs: Trends and Examples
by Tara Hornor: “Text-​​Based Navigation Bar. The Grid. Minimal Color Treatment. More Graphics, Less Text. Hyper-​​Minimalist Designs.”

5). Mobile: The Web’s New Minimalist Movement
by Patrick Cox (@pcridesagain): “The primary focus of minimalism is the purpose and presenting that purpose in a clear meaningful way without dumbing it down.”

6). 30 Best Examples of New Web Interface Design
by Jake Rocheleau (@jakerocheleau): “30 amazing examples of new web interfaces and how you can jump ahead of the curve in your own designs.” Some are REALLY impressive.

7). 30 Catchy and Beautiful Slider Effects in Web Design
by Ebrian Acebedo (@Ebrian262): “It has been a trend now to represent the key information of a website in a slide show presentation. Slider effects first became popular in corporate home pages for showing important info about the company and the services that they are offering.”

8). Flash Isn’t Dead Yet!
by Kendra Gaines (@kgainez): “Designers are looking towards different technology such as JavaScript, Ajax, Silverlight, HTML5 and CSS3. However, dismissing the use of Flash is extremely premature. Flash Site Examples. See also the Comments!”

9). Application Development: HTML5 vs. Flash: Choosing the Right Tool
by Darryl K. Taft: “When to Use HTML 5 Over Flash. When to Use Flash Over HTML5. When to Go Native.”

10). Facts About HTML5 & Flash Usage in the Real World
by Elaine Lee: “Browser Supported Aspect. Video Codec Supported Aspect. See also the Comment.”

11). Mobile apps must die!
by Scott Jenson: “Too much trouble. The UX golden rule: Value > Pain. For native apps, pain is >> 0. And it can get worse. Just-in-time interaction. Discovery service. Going forward.”

12). A Brief History of Web Standards (INFOGRAPHICS)
by admin (@vitamintalent) …and some interesting predictions.

Inpiration and Creativity

1). Focusing on Good Design, Not (Just) Good Decoration
by Kendra Gaines (@kgainez): “A list of some sites that we think have a decent balance of design and decoration.”

2). Breaking the Norm: Unusual and Creative Web Layouts
by Jameel Khan: “A selection of sites that… break convention and the result is that they have built some amazingly creative layouts which, in most cases anyway, are a little unusual as well.”

3). 50 Impressive Fullscreen Websites for Your Inspiration
by Awwwards_Ale

4). 23 Websites with Full-Screen Photo Backgrounds
by Jake Rocheleau (@jakerocheleau)

5). 35+ Fresh Single Page Web design
by w3m (@web3mantra)

6). How Pencil Drawings can Enhance Web Designs
by Ebrian Acebedo: “1. Gives a touch of informality to a serious site. 2. Appropriate for children’s website. 3. Gives a frivolous impact. 4. Makes the site look playful yet still informative. 5. May look good even in a gray color scheme. 6.Creates a light-hearted footer. 7. Makes a bit perky header. 8. Minimal usage still gives a good visual appeal. 9. Creates a unique design. 10. Makes your design look more artistic.”

7). Showcase Of Hand-Drawn Web Designs
by Brant Wilson

8). 33 Unique Eye Catching 404 Error Pages
by Jake Rocheleau (@jakerocheleau) – One of the best 404 page collections.

9). 29 Beautiful About Me Page Designs
by Johnna Eudese Ward

10). Examples of Testimonials in Web Design
by admin (@vandelaydesign)

11). 23 Examples of Screenshots in Web Design
by Gisele Muller (@gismullr): “It’s a good idea to show potential customers what they’re getting in the form of screenshots. And if your product is good looking enough, you might just want to put them front and center, making them the focal point of the home page.”

12). Inspiring Examples of Symbol and Metaphor Use in Web Design
by Mary Lou (@crnacura): “Symbolic graphics and metaphorical pictures are a very interesting approach to convey a message of a website. They can help engage with the user and make him understand the meaning and purpose of a product or service almost instantly.”

13). The Beautiful Symbiosis Between Design And Inspirational Quotes
by admin (@boogiesbc): “The ‘earth’ without ‘art’ is just ‘eh’.”

14). Fancy Scrolling Sites
by Chris Coyier (@chriscoyier): “By ‘fancy things’ I mean something happens when scrolling down besides the site scrolling down. Elements might move around in unexpected ways or change their size/shape/color/content in some way.”

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


Comments (13)

  1. Pingback: Effective Website Design – 160 Articles of Autumn 2011 – PSD to HTML Blog |

  2. Pingback: PSD to HTML Conversion » Effective Website Design – 160+ Articles of Autumn 2011

  3. Love your blog!

    Lila Gedye

  4. What liberating knowledge. Give me liberty or give me death.


  5. Good post dude.. As the terminator says.. il be back!

    Judson Cordy

  6. Awesome post man, maintain up the good function.

    Jerrell Kowald

  7. Pingback: webdesign | Pearltrees

  8. Good post dude.. As the terminator says.. il be back!

    Keith Milota

  9. Thank you for good site. Very helpful.


  10. It is highly helpful for me. Huge thumbs up for this site post!

    edible fruit bouquet

  11. Awesomeness ensues, you rock!!!


  12. Just want to say hi and awesome site, keep up the good work,
    Best Regards


  13. Keep working, impressive job!

    Antone Welton