25 Resources for Best Practices in Client Side Web Development [2013]

The web is growing faster than ever before and bringing in new challenges with mobile and tablet devices (reaching billions). These resources will help you with some of the best practices and guidelines for building a sleek and fast cross-platform user experience.

Web Design

The following list of links will help you in getting the web design right.

1. http://designmodo.com/style-guides - A style guide tells the story of your design solution. This post will help you create one.

2. http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013 - A very thorough guide on typography with case studies. A must read.

3.http://www.sitepoint.com/series/css-architectures - A five post series on CSS architectures.

4. http://www.nngroup.com/articles/designing-effective-carousels - The title says it all – ‘Create a fanciful amusement, not a houseful of horrors’.

5. http://thenextweb.com/dd/2013/08/21/six-tips-from-apple-on-how-to-create-better-app-icons/ - Some great tips on creating better app icons for ios

6. http://designmodo.com/create-single-page-website - As the title suggests single page website design with examples.

7. http://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design - A quick set of tips to get tablet-ready. 

8. http://www.mobify.com/blog/designing-for-ios-7 - This post covers design practices highlighting the changes from previous ios version.

9. http://mashable.com/2013/08/08/responsive-design-best-practices - Covers key guidelines for responsive e-commerce website design in a nice info-graphic.

User Experience

A great user experience is a must for any startup to be successful. These posts will help you in getting it right.

1. http://uxmag.com/articles/the-psychologists-view-of-ux-design - A must read post on ux design principles derived from psychology.

2. http://uxdesign.smashingmagazine.com/2013/05/21/recommendations-mobile-commerce-websites/ - A very insightful article on optimizing user experience for mobile commerce.

3. http://designmodo.com/ux-sign-up-form - Are your signup forms not converting? Get your signup forms right with these guidelines.

4. http://designmodo.com/ux-form-validation - More on validation of forms.

5. http://www.webdesignerdepot.com/2013/03/best-practices-for-creating-app-sites - Some quick tips on app landing pages.

6. http://designmodo.com/404-error-pages-examples - Don’t lose your customers on error pages. This post includes several good examples with the ideology behind them.

7. http://uxdesign.smashingmagazine.com/2013/03/14/designing-a-better-mobile-checkout-process/ - Nail the mobile checkout experience with these guidelines.

8. http://thenextweb.com/dd/2013/08/17/13-ux-design-practices-startups-shouldnt-overlook - Some good advice from successful entrepreneurs.

Web Performance

Faster website leads to higher conversions, engagement and lower bounce rates. Use these links to make your website feel more snappier.

1. http://www.stevesouders.com/blog/2013/03/26/mobile-waterfalls - Wouldn’t it be nice to have waterfall chart like seen in chrome dev tools for mobile as well.

2. http://alistapart.com/article/improving-ux-through-front-end-performance - Some great tips on coding for performance.

3. http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html - Great example on how to use user timings with webpagetest.org.

4. https://speakerdeck.com/keithpitt/keith-and-marios-guide-to-fast-websites and https://speakerdeck.com/patrickhamann - Amazing step-by-step guide on optimizing performance with real example.

5. http://speckyboy.com/2013/09/11/responsive-design-is-not-about-screen-sizes-any-more - Some interesting stats on performance, followed by challenges in high performance responsive design and ways to approach it.

6. http://www.html5rocks.com/en/tutorials/speed/img-compression - A definitive guide to image compression and optimization.

7. http://bbinto.wordpress.com/2013/08/03/grunt-your-way-through-frontend-performance-optimization - Using Grunt? This is a must read for combining and minifying css/js for performance.

8. http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study - Using too many images, heavy animation, this post will help you make your website experience less “janky”.


Did I miss something? Leave your suggestions in comments to help improve the list.