This 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
• Website Layout
• Psychology, Web Design and Manipulation
• Colors in Web Design
• Usability and User Experience
• Cross Cultural Web Design
• Redesign
• HTML5 and Semantics
• Content and Copywriting
• Copyright
• Typography
• Navigation and Menus
• Landing Page and Conversion Rate
• Call to Action
• Forms
• Footers and Headers
• Tips and Recommendations
• E-Commerce Websites
• Mobile Websites
• Accessibility
• Cross-browser Compatibility
• Website Technical Aspects
• Trends
• Inpiration and Creativity

Web Design Principles and Basics

1). 45+ Free Lessons In Graphic Design Theory
http://www.noupe.com/design/45-free-lessons-in-graphic-design-theory.html
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
http://www.instantshift.com/2011/09/19/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
http://tympanus.net/codrops/2011/09/30/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?
http://webdesign.tutsplus.com/articles/design-theory/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
http://designmodo.com/principles-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
http://webdesign.tutsplus.com/articles/general/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
http://webdesign.tutsplus.com/articles/design-theory/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
http://uxdesign.smashingmagazine.com/2011/10/13/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
http://tympanus.net/codrops/2011/10/13/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
http://www.webdesignerdepot.com/2011/10/asymmetrical-balance-in-web-design/
by Patrick McNeil (@designmeltdown)

11). Communication, Mood and Meaning: Lines in Web Design
http://tympanus.net/codrops/2011/11/17/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?
http://designmodo.com/design-body-language-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
http://www.vanseodesign.com/web-design/grid-type-examples/
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?
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-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
http://www.netmagazine.com/features/five-killer-ways-break-grid
by Matthew Smith

4). Web Design Using Grids: Tools and Inspiration
http://www.1stwebdesigner.com/design/web-design-grids-tools/
by Rochester Oliveira (@roch_br): “Exaples of grid-based websites. Tools: 960.gs, 1140px – cssGrid.net, Golden Grid, BootStrap, YAML.de, BlueTrip.org, ElasticCSS.com, YUI 2 – Grids CSS, 1 Line CSS Grid.”

Psychology, Web Design and Manipulation

1). Dark Patterns: Deception vs. Honesty in UI Design
http://www.alistapart.com/articles/dark-patterns-deception-vs.-honesty-in-ui-design/
by Harry Brignull (@harrybr): “DarkPatterns.org: 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
http://www.instantshift.com/2011/11/16/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
http://www.practicalecommerce.com/articles/3166-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
http://www.1stwebdesigner.com/design/improve-website-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
http://naldzgraphics.net/tips/best-brand-color-identity-tips/
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
http://webdesignledger.com/inspiration/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
http://naldzgraphics.net/tips/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
http://sixrevisions.com/web_design/overview-user-experience-webdesigners/
by Amir Khella (@amirkhella): “What is UX? Integrating UX into Your Design Process.”

2). The Role Of Design In The Kingdom Of Content
http://uxdesign.smashingmagazine.com/2011/10/24/role-design-kingdom-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
http://www.userfocus.co.uk/resources/guidelines.html
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
http://www.nickfinck.com/blog/entry/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
http://mashable.com/2011/09/30/website-usability-tools/
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
http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-tools/
by Cameron Chapman (@cameron_chapman): “Free And Freemium Tools. Premium Tools.”

7). 14 Guidelines For Web Site Tabs Usability
http://usabilitygeek.com/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
http://uxdesign.smashingmagazine.com/2011/11/01/improving-customer-experience-meet-problem-users/
by Laura Klein (@lauraklein): “Improving Customer Behavior. Idiots, Drama Queens and Scammers: How to Turn Them Into Geniuses.”

9). The Perfect Paragraph
http://uxdesign.smashingmagazine.com/2011/11/29/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
http://www.uie.com/brainsparks/2011/11/04/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
http://www.flashxml.net/blog/make-your-website-text-easy-to-read.html
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
http://uxmovement.com/content/why-headlines-attract-more-user-attention-than-images/
by anthony

Cross Cultural Web Design

1). Construct a Framework for a Cross-Cultural Design
http://www.instantshift.com/2011/10/13/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
http://www.uxmatters.com/mt/archives/2011/10/the-rise-of-cross-channel-ux-design.php
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
http://www.onextrapixel.com/2011/10/19/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
http://conceptdezain.com/blog/2011/11/21/cross-cultural-usability-in-web-design/
by Daniela Baker

5). Mastering User Attention With Feng-Gui
http://designshack.net/articles/design-shack/mastering-user-attention-with-feng-gui/
by Joshua Johnson (@secondfret): “Predicting User Eye Movements. You’re an Unreliable Source. Testing Methods. Meet Feng-Gui.”

Redesign

1). The Data-Pixel Approach To Improving User Experience
http://uxdesign.smashingmagazine.com/2011/11/15/data-pixel-approach-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
http://www.instantshift.com/2011/09/21/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
http://www.attackofdesign.com/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”
http://blog.easy-designs.net/archives/2011/10/12/from-mobile-friendly-to-mobile-first/
by Aaron Gustafson (@AaronGustafson): “An example of website redesign – Solutions and Results.”

HTML5 and Semantics

1). HTML5 Semantics
http://coding.smashingmagazine.com/2011/11/18/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. Schema.org. Do Semantics Matter Anyway?”

2). Pursuing Semantic Value
http://coding.smashingmagazine.com/2011/11/12/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
http://christianheilmann.com/2011/11/16/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
http://webstandardssherpa.com/reviews/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
http://freelancefolder.com/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)
http://uxdesign.smashingmagazine.com/2011/10/11/introducing-6-1-model-for-effective-copywriting/
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
http://designshack.net/articles/business-articles/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
http://blog.hubspot.com/blog/tabid/6307/bid/26705/13-Awesome-Headlines-for-Business-Blogging-Success.aspx
by Kipp Bodnar

6). Readability: Who Are You Writing For?
http://www.onextrapixel.com/2011/10/10/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
http://webstandardssherpa.com/reviews/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
http://uxdesign.smashingmagazine.com/2011/11/17/fluidity-content-design-learning-where-wild-things/
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
http://www.onextrapixel.com/2011/11/22/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
http://www.1stwebdesigner.com/inspiration/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
http://bokardo.com/archives/interface-design-is-copywriting/
by Joshua Porter (@bokardo): “An interesting point of view and EXAMPLES.”

Copyright

1). How to Fight Plagiarism – Tips and Tools
http://www.1stwebdesigner.com/design/fight-plagiarism-tips-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
http://www.1stwebdesigner.com/design/copyright-laws-understanding-basics/
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
http://www.socialmediaexaminer.com/copyright-fair-use-and-how-it-works-for-online-images/
by Sara Hawkins (@saving4someday)

Typography

1). Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students
http://www.thinkingwithtype.com
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
http://machoarts.com/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)
http://www.techi.com/2011/11/a-dummys-guide-to-typefaces/
by JD Rucker: “Typeface vs. fonts. Top 5 overused and abused.”

4). The Popularity of Helvetica Font
http://machoarts.com/the-popularity-of-helvetica-font
by Elaine Hirsch

5). First Look: An Update Of Verdana And Georgia For The iPad Age
http://www.fastcodesign.com/1665374/first-look-matthew-carter-updates-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
http://www.onextrapixel.com/2011/09/08/45-creative-examples-of-large-typography-in-web-design/
by Siva Kumar (@pokkisam)

7). History of Font Design and Some Font Editing Tools
http://pelfusion.com/tools/history-of-font-design-and-some-font-editing-tools/
by admin (@pelfusion)

8). 4 Ways To Identify a Web Font On a Website
http://skyje.com/2011/10/web-font/
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
http://webdesignfan.com/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
http://www.webdesignerdepot.com/2011/11/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
http://blog.hubspot.com/blog/tabid/6307/bid/26714/6-Considerations-for-Simple-Website-Navigation-Design-And-Free-Ebook.aspx
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
http://uxmovement.com/navigation/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
http://www.webdesignerdepot.com/2011/11/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
http://econsultancy.com/uk/blog/7734-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
http://designshack.net/articles/navigation/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
http://www.webdesignfact.com/2011/09/websites-with-unusual-navigation.html
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
http://www.awwwards.com/40-websites-with-fixed-navigation.html
by Awwwards Team (@thecssawards)

Landing Page and Conversion Rate

1). A Showcase of Landing Pages Designed for Conversion
http://webdesignledger.com/inspiration/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
http://www.1stwebdesigner.com/design/techniques-create-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
http://www.webdesignerdepot.com/2011/10/dos-and-donts-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
http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx
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
http://blog.hubspot.com/blog/tabid/6307/bid/27556/How-to-Diagnose-and-Heal-a-Poorly-Converting-Landing-Page.aspx
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
http://www.underworldmagazines.com/variables-to-test-when-a-landing-page-isnt-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
http://searchengineland.com/5-tips-to-improve-conversions-for-b2b-sites-100721
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
http://conversionxl.com/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
http://www.crazyleafdesign.com/blog/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
http://blog.hubspot.com/blog/tabid/6307/bid/28721/10-Best-Practices-to-Optimize-the-Language-of-Your-Calls-to-Action.aspx
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
http://www.onextrapixel.com/2011/11/28/the-ultimate-showcase-of-convincing-call-to-action-buttons/
by Jameel Khan (@webdesigncore)

3). Simple yet Big Significance of a Call to Action
http://naldzgraphics.net/design-2/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.”

Forms

1). An Extensive Guide To Web Form Usability
http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-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
http://designbeep.com/2011/11/02/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
http://designinstruct.com/visual-inspiration/web-design-inspiration/sign-up-forms/
by Jacob Gube (@sixrevisions)

4). Top 10 Places to Put an Opt-In Form
http://www.1stwebdesigner.com/design/10-opt-in-form-places/
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
http://www.land-of-web.com/inspiration/web-design/web-design-inspiration-contact-forms.html
by admin (@Nataly_Birch)

6). 7 Form Tactics That Drive Users Crazy
http://blog.kissmetrics.com/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
http://iwebask.com/blog/2011/09/20/60-best-wordpress-footer-design/
by vivek: For Inspiration.

2). 12 Creative and Cute Website Footer Designs
http://smashingwall.com/inspiration/12-creative-and-cute-website-footer-designs/
by Aldo

3). 30+ Creative Footer Designs
http://www.bestfreewebresources.com/2011/09/30-creative-footer-designs.html
by BBL (@bestfreewebres)

4). 30 Inspiring Website Footer Designs
http://www.flashuser.net/web-design/inspiring-website-footer-designs.html
by Alice

5). Web Design Inspiration : Artistic Footer
http://www.land-of-web.com/inspiration/web-design/web-design-inspiration-artistic-footer.html
by admin (@Nataly_Birch)

6). 30 Examples of Creative Website Headers Inspired by Plants
http://www.tripwiremagazine.com/2011/10/website-headers.html
by Sonny Day

Tips and Recommendations

1). 9 Inspirational Website Effects Deconstructed
http://www.1stwebdesigner.com/design/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
http://naldzgraphics.net/tips/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)
http://webdesign.tutsplus.com/articles/roundups/7-ways-to-avoid-scary-web-design/
by Ian Yates

4). Useful Tips for Designing a Professional Website
http://desizntech.info/2011/10/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
http://www.inspiremonkey.com/2011/11/types-of-image-files- 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
http://designshack.net/articles/layouts/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
http://www.hongkiat.com/blog/html-lists-styling/
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
http://www.1stwebdesigner.com/design/labyrinth-effect-in-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
http://www.vanseodesign.com/web-design/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
http://www.onextrapixel.com/2011/11/30/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
http://uxdesign.smashingmagazine.com/2011/09/15/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
http://uxdesign.smashingmagazine.com/2011/09/22/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
http://www.onextrapixel.com/2011/01/24/increasing-conversion-with-web-design/
Mobile Apps: Design for Mobile Conversion. Part 2
http://www.onextrapixel.com/2011/01/25/mobile-apps-design-for-mobile-conversion/
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
http://mashable.com/2011/10/02/website-sales-conversions/
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?
http://webhostingreview.info/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
http://www.useit.com/alertbox/ecommerce.html
by Jakob Nielsen: “Bad Content Kill Sales. Loyalty = Business”

9). 20+ Examples of Product Display in Web Design
http://designmodo.com/product-display-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
http://designm.ag/design/38-beautiful-ecommerce-websites/
by Brant Wilson

11). 5 Best Practices of Facebook eCommerce Stores
http://blog.hubspot.com/blog/tabid/6307/bid/25111/5-Best-Practices-of-Facebook-eCommerce-Stores.aspx
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
http://www.webdesignerdepot.com/2011/10/30-e-commerce-sites-worth-seeing/
by Kendra Gaines (@kgainez)

Mobile Websites

1). Mobile web content adaptation techniques
http://mobiforge.com/starting/story/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
http://blog.crazyegg.com/2011/11/14/responsive-web-design-elements/
by Brian Schwartz (@creativereason): “Navigation, Columns, Calls to action, Branding, Padding and White Space.”

3). Techniques in responsive web design
http://www.webdesignerdepot.com/2011/11/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
http://www.elated.com/articles/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!
http://www.webdesignshock.com/responsive-design-problems/
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
http://www.1stwebdesigner.com/design/best-approach-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
http://www.netmagazine.com/features/ethan-marcottes-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
http://designmodo.com/responsive-design-examples/
by Adrian (@designmodo): “Some pros and cons of responsive web designing. Examples.”

9). A case study in responsive design
http://boagworld.com/dev/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
http://webdesignledger.com/resources/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
http://designwoop.com/2011/10/20-useful-tools-for-responsive-web-design/
by David Martin (@webadelic)

12). The Simple Awesomeness Of Mobile Web Design – 37 Examples
http://www.designyourway.net/blog/inspiration/the-simple-awesomeness-of-mobile-web-design-37-examples/
by admin (@boogiesbc)

Accessibility

1). Accessibility: What’s Your Markup Saying to You?
http://webdesign.tutsplus.com/articles/general/accessibility-whats-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
http://conceptdezain.com/blog/2011/11/30/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?
http://www.htmlcut.com/blog/cross-browser-psd-to-html-conversion.html
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
http://webdesign.tutsplus.com/articles/industry-trends/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
http://www.catswhocode.com/blog/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
http://www.onextrapixel.com/2011/11/03/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
http://www.webdeveloperjuice.com/2011/11/16/how-to-create-an-xml-sitemap-file-for-your-static-website/
by Lior Levin

4). Everything You Need To Know About DNS
http://www.1stwebdesigner.com/design/everything-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.”

Trends

1). Website Design Ideas and Trends of 2011
http://naldzgraphics.net/tips/website-design-ideas-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
http://designmodo.com/trends-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
http://www.netmagazine.com/features/five-web-design-clich-s-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
http://designfestival.com/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
http://tympanus.net/codrops/2011/10/05/mobile-the-webs-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
http://dzineblog.com/2011/09/30-best-examples-of-new-web-interface-design.html
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
http://blueblots.com/web-design-2/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!
http://www.noupe.com/opinion-column/flash-isnt-dead-yet.html
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
http://www.eweek.com/c/a/Application-Development/HTML-5-vs-Flash-Choosing-the-Right-Tool-451764/
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
http://designrfix.com/web-design/facts-html5-flash-usage-real-world
by Elaine Lee: “Browser Supported Aspect. Video Codec Supported Aspect. See also the Comment.”

11). Mobile apps must die!
http://www.netmagazine.com/node/1446
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)
http://vitamintalent.com/vitabites/a-brief-history-of-web-standards
by admin (@vitamintalent) …and some interesting predictions.

Inpiration and Creativity

1). Focusing on Good Design, Not (Just) Good Decoration
http://www.noupe.com/design/focusing-on-good-design-not-just-good-decoration.html
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
http://speckyboy.com/2011/09/29/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
http://www.awwwards.com/50-impressive-fullscreen-websites-for-your-inspiration.html
by Awwwards_Ale

4). 23 Websites with Full-Screen Photo Backgrounds
http://designm.ag/inspiration/23-websites-with-full-screen-photo-backgrounds/
by Jake Rocheleau (@jakerocheleau)

5). 35+ Fresh Single Page Web design
http://www.web3mantra.com/2011/10/14/35-fresh-single-page-web-design/
by w3m (@web3mantra)

6). How Pencil Drawings can Enhance Web Designs
http://naldzgraphics.net/design-2/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
http://designm.ag/design/showcase-of-hand-drawn-web-designs/
by Brant Wilson

8). 33 Unique Eye Catching 404 Error Pages
http://spyrestudios.com/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
http://blueblots.com/inspiration/about-me-page-design/
by Johnna Eudese Ward

10). Examples of Testimonials in Web Design
http://vandelaydesign.com/blog/galleries/testimonials/
by admin (@vandelaydesign)

11). 23 Examples of Screenshots in Web Design
http://webdesignledger.com/inspiration/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
http://tympanus.net/codrops/2011/11/30/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
http://designresourcebox.com/the-beautiful-symbiosis-between-design-and-inspirational-quotes/
by admin (@boogiesbc): “The ‘earth’ without ‘art’ is just ‘eh’.”

14). Fancy Scrolling Sites
http://css-tricks.com/14311-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).