Website Design Best Practices

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

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

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

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

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

Help users to scan your page  Use the inverted pyramid writing style

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

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

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

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

MVC Image Source:

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

PHP Frameworks  Zend   Symfony   Cake PHP 

Java Web MVC Frameworks  Used to develop JSPs (Java Server Pages) and JSF (Java Server Faces)  Struts   Spring Web Flow  Spring Web MVC 

ASP.NET MVC Framework  ASP.NET MVC 

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 instead of  Create a sitemap in xml format  Have a robots.txt file

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!

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

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)

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

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