Web Design and Development

theLonelyWolf

10-BestPractice.pptx

Home >Information Systems homework help >Web Design and Development

Best Practice

Some content from:

Deliver First-Class Websites 101 Essential Checklists

(Shirley Kaiser)

Learning Outcomes

learn to apply best practices in creating standards-based websites

know how to validate your code

learn how to develop sites with older/lesser devices in mind

create content and code that will help your site rank well in Web searches

Best Practice

validation – HTML, CSS, JS

progressive enhancement

search engine optimisation (SEO)

Why should you write valid code?

validation as a debugging tool

validation as a future-proof quality check

validation eases maintenance

validation helps teach good practices

validation is a sign of professionalism

http:// validator.w3.org/docs/why.html

Write valid code

#1 point: validate your HTML and CSS

https :// validator.w3.org - HTML

http:// jigsaw.w3.org/css-validator - CSS

http:// www.tawdis.net/taw3/cms/en - Accessibility

use correct doctype, meta elements, e.g. <!doctype html> <head> <meta charset="utf-8">

Encode reserved HTML characters as HTML character entities

e.g. change: Bread & butter to: Bread & butter

Character	Character Name	Entity Name	Entity Number
"	Quotation mark	"	"
&	Ampersand	&	&
<	Less-than symbol	<	<
>	Greater-than symbol	>	>

Avoid using deprecated markup

See: http:// www.codehelp.co.uk/html/deprecated.html and http:// www.w3.org/TR/REC-html40/index/attributes.html

Examples:

Elements: <center>, … and should be replaced by the logical tags and

Attributes: bgcolor, align, border…

Use Dreamweaver’s built-in tools

You can validate right in Dreamweaver.

And use it to fix problems:

Examples

change:

into:

change: <img src="images/1.gif" alt="1" border="0”>

into: <img src="images/1.gif" alt="1" style="border-style:none">

so:

find and replace - specific tag - img - with attribute - border - = - 0

action - set attribute - style="border:none"

then do the same, but remove attribute

Examples

update links that open in a new window to have a title attribute that explains this:

find (source code): target="_blank"

replace with: target="_blank" title="This link opens in a new window"

(note: if a link already has a title attribute set, this will add a second one, which is invalid. Maybe do it one-by-one.)

the same could be done to replace images' align="right/left" with style="float:right/left", but watch for duplicate attributes.

Progressive Enhancement

a development strategy for Web design that emphasises accessibility, semantic HTML markup, and external stylesheet and scripting technologies

goal is to provide a good experience to users with a range of technologies including older, less capable browsers

term coined by Steve Champeon and Nick Finck in their 2003 SXSW presentation: “Inclusive Web Design For the Future.”

Graceful Degradation

earlier strategy or mindset, replaced by progressive enhancement

create full experience first, then make changes so older browsers can still get a reasonable experience

often needs fixes or hacks for specific browsers

Progressive Enhancement

focuses first on content availability

concerned with overall accessibility and mobile browser capabilities

develop in ‘layers’:

content HTML

presentation CSS

features JavaScript

Content layer

provide the best possible content by use semantic HTML - ‘properly’

consider (and test!) what your site would be like if this was all a browser (or robot) could perceive

It’s all about the Web standards pillar of separation

Outer layers

add CSS, test…

add unobtrusive JavaScript, test…

test early, with each ‘progressive’ layer, to ensure the best experience

users who can’t run JavaScript can still experience the site well

older browsers without full CSS support, still get the content properly

Progressive Enhancement for CSS

use multiple style sheets files, e.g. break into:

typographic

layout

colour

then in layout.css, use code like

@import 'screen.css' screen;

to import another file with more advanced CSS – this will be ignored by older browsers that don’t understand the @import command

Progressive Enhancement for CSS

consider using conditional comments to handle old browser versions that need specific fixes, e.g.

<!--[if lte IE 7]>

<![endif]-->

Or use selectors older browsers will ignore, e.g.

/* <= IE 6 */

body {

…

}

/* IE 7+, others */

body[id=main] {

…

}

Progressive Enhancement for JavaScript

use unobtrusive JavaScript

put all scripts in external files, not embedded

test for JS support before using it, e.g.

if(document.getElementById) {

scriptUsingGetElementById();

}

Progressive Enhancement for JavaScript

if you’re using JS to set styles, separate them by using JS to set class names, not property values, e.g.

use:

el.className = 'highlighted';

not:

el.style.backgroundColor = '#ffcfcf';

Progressive Enhancement for JavaScript

example: sortable content table – you could use AJAX (XMLHttpRequest) to get the data to begin with and to do the sorting, but…

with JS off, the content doesn’t exist at all

so, provide the initial content in HTML and use AJAX to change the data

with JS off, the content exists, it’s just not sortable

Example – jQuery Fade In Effect

fade in is done in JS, but the CSS is unfaded… without JS, the object is visible with JS, it starts invisible and fades in

var startButton = $('#startButton'); startButton.css('display', 'none'); startButton.fadeIn('slow');

the second line of code could be done in CSS, but then it would not be visible if JS didn’t run.

Search Engine Optimisation

SEO is a big and ever-changing topic!

SEO should be an integral part of a website project

clients want their sites to be found – achieve goal

search engines do not automatically find new sites

they need to be submitted to be indexed

but only submit when they’re ready

e.g. https:// www.google.com/webmasters/tools/submit-url

also, submit to directories like Yahoo! and DMOZ

Search Engine Optimisation

plan the site with SEO in mind

ensure that every page includes text and links that will help boost your search engine rankings

target key phrases rather than single keywords

it’s much harder to be highly ranked for broad, generic search terms than specific phrases

e.g. don’t aim for “accomodation” but maybe “backpacker accomodation near the beach”

Search Engine Optimisation

ensure that every page includes text and links that will help boost your search engine rankings

create keyphrase-rich text content, especially for your home page

Write text that includes your keyphrases and variations of them

Include them especially in <title> and headings

Provide Search Result Descriptions

use <meta name="description"> elements on pages to provide content to be displayed in search engine results

most search engines don’t use these description or keywords meta elements as much as they used to.

Get Popular

search engines place high importance on a site’s popularity and the text used to link to the site

highly ranked websites that link to yours will boost your own site’s ranking

provide ongoing, link-worthy content

ask other website owners to consider linking to your website or exchanging links

make a good site and promote it well

organic popularity is the best strategy

Stay On Top

SEO is not a one-time effort

build any maintenance work into the contract

use analytics software to review keyphrases, rankings, and listings status

use the results of keyphrase analysis to add content to your website that visitors seek

test different strategies to find what works best

and then do more of it

Summary

apply best practices in creating standards-based websites

care about doing things the ‘right’ way

appreciate the need for and know how to validate your code

design and develop your sites with older/lesser devices in mind

create content and code that will help your site rank well in Web searches

test early and often, in a variety of situations