TEC 319Website 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

http://mashable.com/2011/09/12/website-usability-tips/

Help users to scan your page Use the inverted pyramid writing

style

http://mashable.com/2011/09/12/website-usability-tips/

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: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

Javascript Frameworks

jQuery YUI – Yahoo User Interface Library Prototype Dojo MooTools

PHP Frameworks

Zend http://www.zend.com/en/

Symfony http://www.symfony-project.org/

Cake PHP http://cakephp.org/

Java Web MVC Frameworks

Used to develop JSPs (Java Server Pages) and JSF (Java Server Faces)

Struts http://struts.apache.org/

Spring Web Flow Spring Web MVC http://www.springsource.org/go-webflow

2

ASP.NET MVC Framework

ASP.NET MVC http://www.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 (<h1>, <h2> 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

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 JMeter can be used for backend services

stress tests 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 traffic

Continuously improve content based on trends and user feedback