PC’s, Tablets, Handheld Devices – How to Build a Better Website

Website Design – What About Hand-Held Devices?

A website looks different on a tiny hand-hand with a resolution of  960×640 than it does on a 23″ monitor with a resolution chosen of 1920×1080.  The monitor size and screen resolution choices which are separate issues can vary significantly.  You have the tablet, a 15 inch Mac with 1440×90 resolution, a 23 inch PC with 1920×1080 resolution.  Monitor size alone comes in 6 inches, 13 inches, 15 inches, 17 inches, 19 inches, 21 inches, 23 inches, etcetera.

Designing a site with this in mind makes it easier to understand that the site should be flexible and ready for drastic changes that would benefit the hand-held device.

Basically, you can create a beautiful website which can be viewed on most PC’s monitor sizes varying from 13 inches to 24 inches and larger.  If your site is flexible, in most cases, you wouldn’t even tell the difference between browsers.  Scrolling will occur on pc’s with low resolution levels.

An example might be like this:  Your site is built with 1000px Container.  Viewed in 800×600 resolution, some clipping will take place which will produce a scroll bar.

Stylesheets and Disabilities

The lower resolutions produce larger font, and in some cases, visitors have set Custom Controls to affect the stylesheets to get the larger font!  Don’t forget the hundreds of thousands of visitors with disabilities.  You can “listen” to your site through the Firefox browser.  This is a big reason to ensure your site offers image “alt” tags for adding a description instead of the image.  Take a listen to your website!  Again, in a perfect world, you have to be flexible.

Handhelds  and Print – Separate Stylesheets Are a Must!

When it comes to hand-held devices and great design, this is where a separate style sheet is a must.  The phone or device itself tells the browser what it is, and it will (the browser) pick up the alternative style sheet.  As a designer, you will need to know how to turn off large images and anything else that is not viewable by a small device.  At the same time, you have the capability to create a much simpler, readable, useable website that still has a good flow and ease of use by your visitors.

A well designed website should have these three stylesheets:
1.  For “all” types of media – again, good design should cover this, even if it looks a little different in the various browsers, resolutions, and monitor sizes that exist.
2.  A separate stylesheet for hand-held devices.  The site would look much different but should be designed with this in mind.  Flow is the key.  Larger images would disappear or made smaller, small ads can be resized larger, but the stylesheet still accesses the same information in the site.  Font size can be adjusted (font issues can happen – check out what your site looks like with just default font, too), JavaScript and Flash can get turned off – leaving a simplified version of your site & suitable for hand-held devices that don’t have mouse support.  Text ads work well on handhelds.
3.  Create a separate stylesheet in the event your visitor wants to print a page.  This would include changing color to black and white, change the font to serif and watch the font size, underline links, remove non-essential images, remove navigation, remove some or most of the advertising, remove JavaScript, Flash and animated images.

So as you can see, creating a great website is really about creating a great company and a great designer takes these things into consideration and will go to great lengths to ensure your site looks great on any device, functions 100%, is crafted with clean, validated code, and most importantly, a welcoming place for your visitors to find what they are looking for.


HTML5 – Getting ready for the future of the web

HTML5 is the newest edition of the language of the web with enhancements to a wide range of features including form control, API’s (Application Programming Interface), multimedia and structure. Many key players including Apple, Mozilla, Opera and Microsoft, together with the W3C are openly developing HTML5 and encourage web authors from all over the world to partake in the fun.  Microsoft and Adobe are contributing engineers to the HTML 5 standards development process, yet both remain noncommittal about adopting HTML5, at least while it is still in development.

HTML5 is a work in progress with the official standards release in 2014. And while the competition is heating up with Flash, companies are having developers build different versions of their website. One caters to the pc community with all of Flash’s rich capabilities and another designed for the hand-held device and its mind-boggling worldwide community and applications.

While you’re at it, make your site 508 compliant, like government sites, which cater to the millions of people with certain disabilities. Two small examples would be to add captioning to your videos and adding the text equivalent of audio must be provided, if only in transcript form. These are two very small examples. Websites should be built with well coded CSS external stylesheets. The ADA (Americans with Disabilities Act) is doing a great job helping people with certain disabilities. They are being equipped with screen readers giving them the ability to change the styling of your site for larger print. You do not want to interfere with their capabilities.

The HTML5 Tracker website openly discusses the ongoing phases of the development. The HTML5 validator is working very well.

Some changes include:

HTML5 adds many new syntax features including <video>, <audio> and <canvas> elements, as well as integration of SVG (scalable vector graphics) content, which are designed to improve the inclusion and handling of multimedia and graphic content on the web. Other elements such as <section>, <article>, <header> and <nav> are designed to improve the semantic richness of documents. New attributes have also been introduced, and others removed, to improve and simplify semantic expression. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and DOMare fundamental parts of the HTML5 specification. It also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents. Replacing <divs> with distinct elements actually makes the source code easier to author. The header/footer elements may contain sub-headings.  The aside element is used for sidebars.  The article element is an independent section of a document page or site suitable for news or blog articles, forums, posts or individual comments.

Benefits of using HTML 5

  • Backwards compatible with existing browsers
  • Authors are familiar with the syntax, which is lenient and case insensitive
  • Shorthand syntax, e.g., authors can omit some tags and attribute values

Benefits of using XHTML

  • Strict XML syntax encourages authors to write well-formed markup
  • Integrates with XML vocabularies by conforming to xml syntax and can support most limited devices
  • Allows the use of XML processing used in editing and publishing processes

It is conventional to use XHTML rules and use all lowercase in HTML5.

Since HTML5 is mainly a well-defined HTML4/XHTML 1.0, and because both HTML- and XHTML-style syntax is allowed, you need to do very little (maybe only a doctype change) to change current well-made pages into HTML5.  It will probably look fine in most browsers, although, it might not validate as HTML5 without some tweaking, which is a learning curve. It is advisable for current web developers to stay informed of the revisions and learn HTML5.  It is being developed to support future prospects for media accessibility options and much more. Should developers and designers invest in HTML5?  HTML5, CSS and JavaScript are going to be the “classic three” for developers and designers.  A little Flash never hurt anyone, either.  I think Flash technology is going to be further enhanced and the fact that it performs the same in most browsers right now is great.  Of course, this isn’t currently the case for hand-held devices, but you can code your way out of just about anything.

As a web designer and developer, I am very excited to be part of a community working to refine a language spoken across browsers, can be viewed in various mediums, assists the blind, and can be encoded in every language. Not so simply amazing! January 22, 2011 Christina Descalzo