5-essential-rules-web-designers2

5-essential-rules-web-designers

These rules are essential simply because web design has to be mobile friendly.

Essential tips for every web designer can be put in a single sentence. Here it is.

CHECK OUT YOUR CODE AT EVERY STEP WITH THE MAGIC WAND CALLED THE MOBILE VALIDATOR.

Now you may not read ahead and skip the text below unless you have time and love for code as I have.

SIMPLE IS BEAUTIFUL, SIMPLE IS EASY

Today designing a web site is a child's play. Literally a child's play if you love to play like a child, a child for whom words like mistake are not abominable. Designing a website is simple because mobile friendly website is best when it is simple. Complicated gymnastic s like java scripts, tables, frames is not supported by all mobile browsers today. Tomorrow this sentence may not be true.

Another magic wand for your xhtml W3. Markup Validator
http://validator.w3.org/

Reason:
Rapid advances in technology
The pooling of contributions of the computer wizards from all over the world.
Another powerful reason is that these advances in application of science and technology are rapidly reaching large number of common people, people who are your potential customers or end users of the website, who are now using their cell phones to access the internet.

HOW GOOD IS YOUR MARKUP?
XHTML Basic 1.1 is the markup language

PAGE STRUCTURE
PAGE LAYOUT
Do away with tables. Instead use

• PAGE 1
• PAGE 2
• PAGE 3

markup in the page
or css style sheet
ul li { display: inline; } in the CSS style sheet
PAGE WEIGHT
Is it too heavy? Total size of the page 20 KB
This includes the page itself, the external style sheet(s), and the embedded images and objects.

Size of the Markup is to be under 10 KB

This is to ensure that the page can be retrieved and rendered by a mobile device in a reasonable amount of time.

SCRIPTING
No to Java. Do not rely on embedded objects for scripting
Use register an on click listener event

STYLE SHEETS
Do it in style. The style sheets must have semantically valid css.
The best tool to check semantically correct css is to use W3C CSS Validator
Result is no syntax errors.
Use floating and absolutely positioned elements with caution
Which style sheet grammar is best? the
CSS Level 1 grammar along with the @media attribute.

USER INPUTS
well-known inputmode values. keyboard use v/s numeric keypad

Use an input mode attribute to an input element or text area element

HTTP LEVEL
Correctly defining HTTP headers is essential for mobiles usually have low bandwidth and high latency. Cache control is important.

5. LINKS
The linked resource format may not be appropriate for mobile devices
On Fast Track with Dr. Ashok Koparday And here is the rest of it.