HTML Secrets – Web Application Architecture Design Tips

html

Whatever site or web application you’re working on, you probrably going to use HTML.

These are the tips I’ve learned over time:

Doctype

Declare the document doctype. before your html tag.

for HTML 5:

1
2
3
4
5
6
<!DOCTYPE html>
<html>
.
.
.
</html>
<!DOCTYPE html>
<html>
.
.
.
</html>

for older Doctypes like HTML 4.01 Strict/Transitional/Frameset etc… you can browse here.

 

Declaring Encodings

For HTML or XHTML served as HTML, you should always use the

1
<meta>
<meta>

tag inside

1
<head>
<head>

. Example:

1
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

For XHTML, you need a slash at the end:

1
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 

Declare Sections

Use the HTML Tags to declare your sections:

<nav>, <section>, <article>, <aside>, etc

 

Validators

Test your html against validators.

Validate your html(s): The W3C Markup Validation Service

Check needed pages Against Facebook developer: Debugger – Facebook Developers

Scan your website using Microsft modern.IE for IE compatibilty.

 

Styling

Use CSS Styling only! Never style inside your html. don’t use depreceated tags like <Center> or align=x inside your divs. your html without style should be like a flat document. default style. all the styling should and must be declared using css.

I like to include all the styles inside the <head> tag. I’ll link to a .css file only when it’s really neccesery (mostly when it’s outside library).

 

Images

Always declare images width & height (where possible) in your css. add alt tag.
I prefer png, but whatever format, try for interlaced, and pre-crop them to needed size (if possible).

 

Tracking

Use some tracking system on everyone of your pages (like google analytics)

 

Depreceated

Don’t use deprecated syntax!

Don’t use frames, <center>, <font>, align=center or any depreceated html tags. it WILL make you trouble later.

for Example: new mobile browsers will change it’s display with align=center for compatible mode, which you don’t want. use CSS for styling only!

 

Mobile-Ready

Develop with mobile i7n mind! your HTML should viewed correctly on mobile, a-grade mobile, tablets and desktops. There are many ways to implement this, I like this method (using CSS Media Queries):

<link href="css/default.css" rel="stylesheet" media="screen, handheld, print, projection">
<link href="css/a-grade-mobile.css" rel="stylesheet" media="screen and (min-device-width:320px)">
<link href="css/desktop.css" rel="stylesheet" media="screen and (min-device-width:768px) and (min-width:768px), print, projection">

<!--[if lt IE 9]>
<link href="css/desktop.css" rel="stylesheet" media="all">
<![endif]-->

<!--[if lt IE 8]>
<link href="css/ie_7.css" rel="stylesheet" media="all">
<![endif]-->

<!--[if lt IE 7]>
<link href="css/ie_6_and_below.css" rel="stylesheet" media="all">
<![endif]-->

You can use JQuery either.

check this list of Media Queries Templates

You can also use the @media meta to create different css for each device, but I like this method less.

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />

Also, add those two meta for set the page width as the device.

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

 

Unobtrusive JavaScript

Seperate the behavior from markup.

instead of:

<input type="text" name="date" onchange="validateDate()" />

Use this:

<input type="text" name="date" id="date" />

window.onload = function() {
document.getElementById('date').onchange = validateDate; };

use namespaces for your js objects to avoid difficult to debug problems.

 org.example = {};

read more here.

 

Tables

Use tables for only what they are for: display data in a table style. don’t use it (borderless) to arrange your html. this is CSS task.

 

Cross-Browser

It’s important to test your css on several (if not all popular) browsers while developing.

html shiv

new tags like <nav> or <article> aren’t supported and css won’t effect for this tags in IE 8 or lower.
to solve this issue just add to any html5 you need, right after the styles:

<!-- Pulled from http://code.google.com/p/html5shiv/ -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

 

Dynamic App Links

Telephone (Dial) Link

Did you knew you can link phones on your site to: dial on mobile and skype on pc?

<a href="tel:1234567890">Call (123) 456-7890</a>

for handheld devices

 

Add Windows-8 Meta

Read about adding Meta tags to your website to support Windows-8.

 

Have fun HTML-ing…

Development Specialist, Artist and Activist
Personal Website

Leave a Reply

Your email address will not be published.

*