HTML Web Development Principles

Welcome to Educator.com.0000

This lesson is going to be on some principles of web development--sort of high-level things0002

that you need to keep in mind for when you are developing and planning a website--0008

and when you are in the individual coding, how you are going to encode so that the site0013

is going to come across to all your users in a way that really works well,0019

no matter what sort of browser they are using, or who they are, or even if they are not necessarily users,0025

but spiders or web crawlers or some other sort of an application.0031

The cardinal goal of web development is interoperability.0038

You want your website to work in every context that it possibly can.0047

The principle is that your website should operate across lots of different user agents, platforms, devices--everything.0053

That is kind of the point of the Internet.0060

When Tim Berners-Lee thought of it, back in the early 90's, this was one of the things that he had in mind:0062

just having a document that would open in any computer.0068

You wouldn't need a particular computer; you wouldn't need a particular program.0073

There can be multiple web browsers; there can be multiple user agents.0077

So, this is sort of the guiding thing that everything else is based on.0081

And if you do design your websites to be interoperable, then what this does is:0086

it will prevent the Internet from fragmenting into different, incompatible browsers and devices.0090

And eventually, what will happen if this fragmentation occurs is: you don't have one Web anymore.0096

You have to have multiple Webs, depending on which application you are coding for and things like that.0104

That is exactly what happened in the 90's.0109

You may have, if you have been on the Internet in the 90's, seen things like this,0113

that say, "This website is best viewed in Internet Explorer" or "Netscape, and please download" Netscape or Internet Explorer,0116

because if you don't have Netscape, and I am coding for Netscape, then it is going to look wrong; or it is not going to work at all.0124

And some web developers even put in code that blocked content from the browser that they didn't code for.0131

And it sort of fragmented the Web, and it caused a lot of pain for Web developers and users.0140

The idea is that the same code should work for all devices.0148

One Internet, one code, one website--you don't have to duplicate things: that is the goal; that is interoperability.0152

And this is possible now, since 2000: all major browsers will support the standards that the w3c recommendations have put forward-- especially HTML 4.01.0161

And now, HTML5 is rolling along, as well.0173

So, this is possible now; and it means that you need to code according to the standards, and with all these other design principles in mind.0176

If you have a website, it is clear, of course, that it is going to work on your computer and in the browser that you use.0188

That is just obvious, because you are going to be developing it, and that is going to be what comes naturally.0194

You are going to get it to look right in the browser you are using on your computer.0199

But you need to also check a lot of these other things.0202

It needs to also work in all the other browsers that you can install on your computer.0205

This is just the basic, easiest thing: if you have a PC, you can install Safari, Firefox,0210

Internet Explorer, Chrome--as many browsers as possible--Opera...and check it in all of them, and older versions, as well.0216

You also want to make sure that your website looks good and works in other screen resolutions.0226

Older users may have smaller screen resolutions, 800x600 or even smaller.0232

Some users have very, very large screen resolutions; websites can look funny like that.0237

And you also have to keep in mind that mobile devices may have very tiny screen resolutions.0242

It needs to work in other operating systems; so you will want to check that if you can;0248

and of course, in other browsers in other operating systems; and in different Internet speeds.0251

You don't want people who have very slow computers to be completely unable to access your website,0259

because it is so graphics-intensive, so you need to keep in mind bandwidth.0263

And then, you have to keep in mind other types of devices.0268

You may be thinking of the basic desktop computer, PC, or Mac, or Linux.0271

But then, if you are not keeping in mind smartphones, ebook readers, things like webTV (which isn't really around anymore,0276

but there is a chance that there may be new devices that are similar to it)...there are tablet devices; there are old things0282

that aren't around anymore like webTV; and then future devices that haven't even come around yet;0292

if you code your website according to a standard, it should be future-compatible, and it should work with future devices.0298

The point is that you need to be thinking in terms of interoperability--not just what looks good on what you can test;0305

but you need to make it look good on everything that you could possibly imagine.0312

And you don't want to be coding hacks and things like this that are going to cause it to break0315

in future devices that you don't know about, old devices you don't know about, or even current devices that you don't know about.0320

And then, of course, there are different types of user agents.0326

There is not just browsers that are going to be using your website.0328

There are screen readers for the blind (for example), web crawlers and other robots (like Google crawlers, spiders...),0331

special mobile device browsers for Android, or even older phones that aren't quite as fancy, and then text-only browsers.0339

Lynx is a famous example of that.0347

You have to keep all of this stuff in mind.0349

The next major principle is backwards compatibility; and there are a couple of different aspects of this.0354

Your website, of course, should be backwards compatible with older browsers.0360

Your code, in terms of code, should be compatible with older technology.0366

And of course, the importance of the technology decreases as it gets older, and as its user base decreases.0372

Something like Internet Explorer 2 probably doesn't matter if your website works in it,0379

because nobody is going to be using that--very, very few people are going to be using that.0384

And if they did, they probably are used to it having broken websites.0388

But you can't think about it just in terms of your user base, because it may be that you may say,0394

"Oh, none of my users use Internet Explorer"; well, maybe it is because your website breaks in Internet Explorer.0401

It is sort of like if none of your customers use wheelchairs, that doesn't mean that you don't have to install a ramp.0407

It might mean that you do need to install a ramp, so that some of your customers...0412

You may have been losing customers who haven't been able to access your store without the ramp.0417

The same sort of thing: if you are just looking at statistics, and saying, "Oh, my users don't need this;0422

I am not going to support it," that is sort of a fallacy.0428

You need to try and support as many things as possible.0432

The other aspect of backwards compatibility is in terms of increasing the technology.0434

New versions of languages, new user agents, and things like this are designed to not break old stuff.0440

So, when Internet Explorer 8 came out, it was a big thing that people worried it was going to break the Web,0447

because it was going from the buggy implementation and a broken box model0452

to correcting it and being more standards-compliant, which was really great.0458

But all of the people that had been coding for the old broken ways in Internet Explorer--0461

suddenly, their websites wouldn't work in Internet Explorer 8, and it was called "breaking the Web."0466

And it sort of is a conflict, because on the one hand, it is increasing its adherence to standards and making the Web more interoperable.0471

But on the other hand, it was making poorly-coded websites not able to continue working in Internet Explorer without additional hacks.0479

So, that is why you will see in I.E. 8: there is a little button that you can press to toggle to I.E. 7 mode and I.E. 8 mode,0489

because they don't want to break the Web; they wanted it to still work.0498

And it is kind of a terrible solution, but hopefully we will not have to deal with that for much longer.0502

That is just to illustrate that, if you are coding according to a standard, then browser vendors0509

and new versions of languages are going to have in mind the way that you have been coding.0515

And they will try, as best they can, to keep your code (that was coded correctly) working, even with the advances in technology.0519

It is good not to do tricky things or broken things; don't write tag soup, etc.0528

XHTML 2 was not backwards compliant, and because of that, nobody wanted to use it.0534

And it failed, and they had to stop developing it.0540

And XHTML 2 never took off, for that reason.0543

This right here is the tag that you can put in your website if it breaks in Internet Explorer 8, but worked in Internet Explorer 7.0547

They had to kind of create this meta tag; and this makes your website work as if it is in I.E. 7.0557

So, it wasn't completely backwards compatible; so they had to go to great lengths to make it work.0566

Forward compatibility is just as important: your code needs to be done in a way that it will continue to work, as technologies advance.0575

In that last example, with people who coded specifically for Internet Explorer 7--they weren't coding with the future in mind.0583

And so, when Internet Explorer 8 advanced things and really improved things, their code broke.0589

It was not future compatible; that is the other side of it, and that is where coding to standards really helps (even though they will try and be backwards compatible).0594

But if you can conform to a standard, that will really help your future compatibility.0605

Accessibility is related to these; and the idea is that your content should be accessible, not only to people, but to programs, as well.0613

All of the programs that I listed that you want to be interoperable with need to also be accessible,0627

meaning, for example: if you are sniffing the browser (using JavaScript to detect what the browser is maybe using--the user agent),0632

and then denying content to that browser, based on it saying,0640

"This browser can't handle my code; I am just going to not send it to it," that is not accessible.0645

Or if you are creating code that works in the browsers that support it;0650

but when it comes to a browser that doesn't support it, it breaks in a way that the browser can't even handle the information...0654

An example would be if you are sending XHTML to the Internet Explorer, and it is served as XHTML,0660

with this XHTML MIME tag (which is the correct way to do it),0667

Internet Explorer does not know what to do with XHTML when served as XHTML.0670

And it will just fail to render the web page completely.0677

It will give you a little download box, or just an error message, and it won't get the content at all.0680

But more common of a consideration is making your website accessible to people, especially people with disabilities.0685

And blind people is the typical example, because it kind of simplifies things and makes it very easy.0696

But it has to do with everything.0701

And just in general, writing your code semantically will make it more accessible,0704

because again, HTML will define the meaning; and then, the various user agents can understand that meaning0708

and give it to the user in a way that makes sense, if it is semantic, instead of trying to go through0715

and figure out what it means, and present content.0723

If it doesn't know what the content is, it doesn't know how to present it; and that can cause problems.0726

A couple of examples for making your website accessible are: both the content and the navigation0732

shouldn't depend purely on visual information or styles, when possible.0738

So, if you have a blind user, and they want to navigate through your website,0742

if that doesn't come across textually--if their screen reader can't find the navigation--0750

if it is all very visual--they are not going to be able to see to click, and it is not going to be accessible.0755

So, you need to have a list of links (that would be a good thing); and the same thing with content.0761

You can't have too much visual content, unless it is the sort of website that is designed...0766

say it is a gallery of photos; obviously, a blind person is not going to be able to see your gallery of photos.0772

But what you can do is give your photos alternate text that will describe what the photograph is.0779

And then, if they are going through a screen reader, they can listen to it, saying,0785

"Photograph of a lake," or whatever it is, and they will have an idea of what your website is about; and that is more accessible.0789

Lastly, pages should be navigable without a mouse, which means that if you hit Tab and go through,0799

it will tab from one link to the next, and to buttons and other form elements.0806

And you should be able to go all the way through your entire website without using a mouse at all--just using Tab and the keyboard.0811

And that will make it more accessible.0817

The same thing with, for example, if you have Lynx, which is a text-only browser: you have to navigate this way.0819

And so, if you want to install Lynx and test your website with Lynx, that will help you make sure that it is more accessible to a wider variety of things.0825

Lastly, your links should make sense out of context.0836

If you are on a screen reader or something, and you come across just a link0841

(or you tab to a link, if you are using just a keyboard), and the link just says Click Here,0845

you have no idea where this is going to go.0850

It doesn't indicate what clicking here will do; it doesn't indicate what it is sending to you.0853

A better link would say something like "Download the application," or whatever it is; it actually describes it.0861

And then, another point with accessibility is that, if you don't have your website up to standards,0870

depending on where you are, there may be different laws (and also depending on your organization)0876

that require you to have an accessible website.0883

There are a couple of different standards; and there are a lot of different laws--local and international and things like this.0886

So, it is important to make sure that your website is accessible, because you may be violating the law if it is not.0891

Graceful degradation is a strategy (also known as fault tolerance) where you begin with your website coded the way that you want it.0901

So, you are probably thinking of browsers; you may be thinking of Internet Explorer 8 and Firefox 3.0912

And you code your website to work great, and it has Flash and all of this stuff.0920

And then, you are thinking about your users that won't have these technologies.0925

And you take steps to make sure that they still get the content.0929

So, where you have Flash, you have backup content that provides the same sort of thing,0933

but not in the Flash format, for people who don't have Flash installed.0939

Or you make use of things that Internet Explorer 8 can use, but Internet Explorer 6 can't; you have backup content0942

that is not quite as nice, but still works, for the older ones.0949

A good way of doing this is actually providing the content.0955

A bad way would be...this is the noscript element: if somebody has JavaScript disabled, you can put little messages to them.0958

This is not the way to do it: you don't just inform them that their browser doesn't support it, or make fun of them.0965

It is not about notifying them that they aren't able to access the content; it is about actually providing the content0972

in an alternate way that may not be the ideal way, but it is still available.0978

So, just sending a message that says, "Your browser is bad" is not as helpful0984

as giving maybe just the text-only version of whatever the script is going to do, or something like that.0988

So, there are a lot of different types of degradation, too.0995

Your website may be degrading because you are encountering out-of-date or obsolete technology.0999

If your website is being viewed on a computer that was built in 1990, chances are that it is going to have some trouble,1006

even just if you have a background that has a lot of little images repeated.1013

It may just take a lot of processing power to render all of those images, one at a time.1018

So, there are things like that that you have to keep in mind.1023

Or if you are using an old browser, that is degradation.1028

Another way is if you run into a bug; say the server over HTTP sends it the wrong way,1031

there is a glitch as it is downloading, and it misses some code or something, and your website breaks.1038

If it degrades gracefully, then even with that breakage, the content will still be accessible.1044

This is actually a consideration in XHTML and XML, which enforces correct syntax.1049

If there is a bug, it can actually break the whole thing, even if it is just a little bug.1057

But most browsers will try and present it in a way that still works, even if there is a little bit of breakage; and that is the principle of graceful degradation.1062

And then, if the code isn't rendered properly by user agents...1070

Internet Explorer had very famous problems with its box model.1074

And you couldn't just code your website the right way, and then expect Internet Explorer users to deal with a completely broken website.1077

You had to make it so that even the user agent doing it incorrectly--1086

users of that user agent would still see the code in a way that made sense.1091

And then, lastly, intentionally disabling functionality, or if you just never installed it in the first place--1096

Flash or JavaScript often gets disabled, so you need to have alternate ways of doing things.1101

If JavaScript is, for example, form validating or anything like that, if you have JavaScript pop-ups,1106

you need to have the HTML backup while you are doing that.1113

The other end, or the opposite, of graceful degradation is progressive enhancement.1117

The approach doesn't start from coding it the way that you like, and then providing fallback material.1125

What you do is: you start with just the very basic content.1131

This is actually a better approach than graceful degradation.1136

You start with just the content that you want; you mark it up semantically, the way that you should.1140

And that gives you sort of a baseline that is accessible to everybody and anything, and it is completely interoperable, as much as possible.1145

But then, what you do to that is: you add layers of different things to make it nicer and enhance it.1154

So, you will add CSS to make it look pretty, and you will add Flash where you want, and you will add JavaScript technology.1161

And all these things will be fed specifically to the user agents that have the support for it.1170

And you will use browser detection, and you will only feed it to the ones that actually can use it.1178

And that way, your content is going to look good everywhere, because you have built the basic foundation.1183

And then, you are adding to it, so that people using the newest technology can still get all the new, fancy toys.1192

So, this is great in HTML5, because you can code your website great for every browser.1198

And you can already be implementing things that...1204

For example, Opera has a lot of things implemented that only work in Opera, because nobody else has done it yet:1206

the forms, for example, where you can have the little date dropdowns and things like that.1212

You can implement that for Opera and just send it to Opera; that is progressive enhancement.1218

And it doesn't matter that no other browsers support it, because you are just sending it to Opera; and Opera is making use of it.1223

And then, the ones that can't handle them--they just get the basic content.1231

And they get as much as they can handle.1235

It is the best way of doing things, and it really works well, especially in a context (which is what HTML is now)1237

where things get rolled in as the developers of browser software can find time to put them in.1243

And there are still things from HTML 3.2 that haven't been fully implemented in all browsers yet.1252

And so, it will take some time; but you can make use of what is there, and you can also provide the baseline content for everybody.1257

Feature detection and browser sniffing are two sides of a coin.1267

But one of them is bad, and one of them is good.1274

Browser sniffing is bad--bad, bad, bad.1276

It kind of comes from a good motivation, because you are coming from the principles1280

of graceful degradation and progressive enhancement (sort of), because you have to look at the distinctions1284

between user agents and send content intelligently, and make sure1290

that a website is not just going to break if it runs into something it can't handle.1294

But if you are using browser sniffing to do that, it is actually very problematic and unreliable.1300

Most browser sniffing is done based on the user agent string, which is incredibly complicated,1306

and just confusing, and also changes for every single version of every browser--1312

so, every alpha version, every update, every security update...1318

And then, some browsers pretend to be other browsers.1322

For example, in Opera, you can set whatever user agent string you want.1326

So, you can be browsing with Opera, and websites would be denying Opera access, because it was a site coded for Internet Explorer.1332

And so, you would go into a little dropdown in Opera and select Display Internet Explorer User Agent.1340

And then, you would get fed the Internet Explorer code, because you are pretending to be Internet Explorer.1345

So, it is completely unreliable--not to mention that users can create their own user agent strings.1350

And there is just an endless number of browsers; it would be impossible to reliably keep track of all of them.1357

There are literally thousands, probably hundreds of thousands, of them.1364

Feature detection is much, much better.1369

What that does is: you have a particular feature that you are going to implement (say Flash or JavaScript):1373

you can very easily check to see if the browser supports that.1379

Some of them are built in, like in JavaScript; you can use the noscript tag.1383

And if your browser doesn't have JavaScript enabled, or it doesn't support JavaScript, then the noscript content will be displayed; otherwise, it won't.1387

There are more complicated things: for example, if you are dealing with a particular type of JavaScript method that is new,1398

you can do tests to see if the browser supports that particular method before using it.1405

And if it doesn't, then you can give fallback content.1409

And you can even use JavaScript to test to see if your browser supports new HTML elements.1413

So, for example, the HTML5 specification has introduced the email input type.1419

Input is an existing HTML element; it has been around forever.1427

But this email type of input is new, and not all browsers support it.1431

So, you could use this code; what you do is give the input an ID, and you grab it here, so that you can define a variable for it.1435

This is just JavaScript getting hold of the input element.1448

And then, what you do is: you take that element right here, and you go to Set Attribute.1455

And you set the attribute as email; that makes it the email type, which is what we want to check.1461

And then, this just sets the input one again.1467

So, you are setting the attribute of this to email, and setting it here again.1471

What that does is: it is creating this input element in the DOM.1478

And it is sort of a fake creation of it; but then, the browser actually will try and create it in the DOM, as well--not just JavaScript, but using the browser.1484

And if it doesn't support the email type, then the behavior for adding a type that isn't there is to just go back to text.1494

Then, you can check right here, very simply, if the type of that element is text.1507

That means that it has defaulted back, because it doesn't understand email.1515

And between here and here, whatever code you put right here--you can send particular information to a browser, and you'll know that they won't support email.1518

And then, you can put else conditions in and give code that actually makes use of the email tag.1529

And so, you can do this with not just this, but with lots of different things.1537

You can look up how to do it.1540

And it is a good idea to test for support of features, instead of just making assumptions based on the browser type, name, user agent, or things like that.1542

Another great thing you can do is use Modernizr: note, the spelling here is -zr, not -zer.1552

And they have created a big JavaScript library that detects browser support for most of the major browser features:1560

a lot of this sort of thing, and a lot of JavaScript stuff.1569

And so, you can just use their code ahead of time, prepared.1572

And it will automatically do a lot of this for you.1575

I am going to leave you with a little quote by Tim Berners-Lee, who invented the Internet.1582

He said, "Anyone who slaps a 'This page is best viewed with Browser X' label on a web page1586

appears to be yearning for the 'bad old days' before the Web,1592

when you had very little chance of reading a document written1595

on another computer, another word processor, or another network."1598

And that is the whole idea of interoperability.1602

Thanks for watching Educator.com.1606