1. Website Design Best Practices

2. Topics  Navigation  Readability  Portability  Frameworks for Web Design  Model View Architecture MVC  SEO  Performance Issues  Security  Testing  Deployment and Maintenance

3. Navigation  Have clear and simple navigation  Where am I?  Where have I been?  Where can I go to next?  Must be readily obvious on the page  Include a breadcrumb trail of links to allow users to choose a destination  Provide a sitemap at global level to give users a snapshot of the organization of your site

4. Readability  Keep paragraph text to a reasonable length  Paragraphs should have a heading  They should be terse and to the point  Do not span text across the width of the entire screen  Display paragraphs in narrow columns which make for better readability on a web screen  Too many images may be a distraction. Use images sparingly and include those which only add value to your content

5. Text and Typography  Text should be easy and pleasant to read  Use of good contrast for text (e.g. blue text on a red background will probably not work well)  Content should be easy to understand and skimmable (studies show that we only read 28% of text on a web page)  Use headings to break up long blocks of text  Bulleted lists work best to convey information

6. Nielsen Study  We read in an F-Shaped pattern  Swipe our eyes from left to right and continue down the page  We skip a lot of text in between http://mashable.com/2011/09/12/website-usability-tips/

7. Help users to scan your page  Use the inverted pyramid writing style http://mashable.com/2011/09/12/website-usability-tips/

8. Portability  Design your site to be cross browser compatible  If possible your site should be mobile friendly (achieved with targeted css or provide alternative site for mobile or devices with smaller form factors).  This can be done with user-agent detection  If using javascript, utilize a cross- browser/platform library such as jQuery to give your scripts a higher probability of being cross platform

9. Portability  Ensure your site is functional at an acceptable level if javascript is turned off (progressive enhancement)  Use CSS to style your pages to separate design specific styling from markup  Site is more maintainable since you can easily redesign the look and feel of the site in the future  Adhere to Standards  Ensure that your markup is well formed to prevent rendering issues on various browsers

10. Frameworks for Web Design  Always use a framework for large projects  Do not reinvent the wheel  Use methods that have been tried and tested  Apply MVC (Model View Controller) architecture so your applications will  Scale better  Be easier to maintain  Have separation of concerns  Can be unit tested more easily

11. MVC  Model  Manages and processes data from application data source (database, LDAP, flat file, web service etc)  View  Presents information to user in a specific format (HTML 5, PDF, XML, JSON, SOAP)  Controller  Processes client requests and handles communication between model and view

12. MVC Image Source: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controllerhttp://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

13. Javascript Frameworks  jQuery jQuery  YUI – Yahoo User Interface Library YUI  Prototype Prototype  Dojo Dojo  MooTools MooTools

14. PHP Frameworks  Zend  http://www.zend.com/en/ http://www.zend.com/en/  Symfony  http://www.symfony-project.org/ http://www.symfony-project.org/  Cake PHP  http://cakephp.org/ http://cakephp.org/

15. Java Web MVC Frameworks  Used to develop JSPs (Java Server Pages) and JSF (Java Server Faces)  Struts  http://struts.apache.org/ http://struts.apache.org/  Spring Web Flow  Spring Web MVC  http://www.springsource.org/go-webflow2 http://www.springsource.org/go-webflow2

16. ASP.NET MVC Framework  ASP.NET MVC  http://www.asp.net/mvc http://www.asp.net/mvc

17. Search Engine Optimization SEO  You should design your site from the ground up with SEO in mind  Techniques  Use heading tags for relevant content (, etc)  Make effective use of meta keywords and description tags  Use friendly urls  eg http://www.yoursite.com/products/books/fiction instead of http://www.yoursite.com?category=products&subcategory=123&lcatListingId=56 http://www.yoursite.com/products/books/fiction http://www.yoursite.com?category=products&subcategory=123&lcatListingId=56  Create a sitemap in xml format  Have a robots.txt file

18. SEO  Add alt tags to images  Have a blog as search engine crawlers like updated content  Have reputable sites link to you  Cross link your site  Avoid flash based website design if possible  Ensure your code is well formed  Update your site content!

19. Performance Issues  Minify javascript and css for production  Limit results of queries and lazy load pages  Index key fields on database tables  Consolidate javascript into one file  Use HTML5 instead of images and backgrounds for styling  Use JSON instead of XML for AJAX calls  It is leaner and has a smaller payload on the wire  Easier to work with json in javascript

20. Security  SQL Injection  Cross site scripting  Use SSL certificates for parts of the site that collect sensitive information  For eCommerce use third party vendor for processing payments to protect against credit card theft (e.g. PayPal)

21. Testing  For web apps unit test application logic  Selenium can be used to test functional and user interface sequence logic Selenium  JMeter can be used for backend services stress tests JMeter  Have different development environments  Development testing  Integration testing  Acceptance testing  Production

22. Deployment and Maintenance  Any code that is deployed should be minified  Changes and deployments should be locked down and versioned in version control  Website content should be updated regularly to help SEO  Install Google Analytics to see trends and analyze site trafficGoogle Analytics  Continuously improve content based on trends and user feedback