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.


About XML Sitemaps

SITEMAPS – Google Webmaster Tools

Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling which might have not otherwise been discovered.The Google video extension of the Sitemap protocol enables you to give Google descriptive information – such as a video’s description and duration, etc. – that makes it easier for users to find a particular piece of content.  This is an excellent way to make sure Google knows about all the video content on your site, especially content that we might not otherwise discover via our usual crawling mechanisms.

An XML Sitemap is a list of pages (URL’s) on your website which Google will recognize in its normal crawling process.    Sitemaps can also provide Google with metadata about specific types of content on your site like when it was last updated, how often it changes, and how important it is relative to other URLs in the site.  Information about video, images, mobile, News and licenses can be embedded in the code.  According to Google, they don’t guarantee that all of your URL’s will get crawled, but they can use the data in your Sitemap to learn about your site’s structure, which allows for a better crawl in the future.

Sitemaps are helpful if:
1.  Your site has dynamic content
2.  Your site has pages that aren’t easily discovered by Googlebot during the crawl process – for example, pages featuring rich AJAX or images.
3.  Your site is new and has few links to it.  (Googlebot crawls the web by following links from one page to another, so if your site isn’t well linked, it may be hard for Google to discover it.)
4.  Your site has a large archive of content pages that are not well linked to each other, or are not linked at all.

One of the best ways to improve your site’s appearance in video search results is to make sure Google knows about all your rich video content.  When you submit a Sitemap to Google that includes video information in a supported format, they make the video URL searchable on Google Video.  When a user finds your video through Google, they will be linked to your website for the full playback.  Search results will contain a thumbnail image (provided by you or auto-generated by Google) of your video content as well as information like Title contained inthe Sitemap.  In addition, your video may also appear in other Google search products.

You can create a separate Sitemap listing your video content, or you can add information about your video content to your existing Sitemap.

Google adheres to Sitemap Protocol as defined by sitemaps.org.  Sitemaps created for Google using the latest Protocol are compatible with other search engines that adopt the standards of sitemaps.org.

The Sitemap must contain a minimum information for each video:  title, description, playpage URL, thumbnail(URL and the raw video URL or URL to Flash video player).

You can also submit your RSS, mRSS, and Atom 1.0 feeds as a Sitemap.

Submit your new Sitemap file to Google.  You can submit up to 500 Sitemap index files for each site in your account.

It is recommended that you place the xml folder in the root directory of your web server so it would look like http://example.com/sitemap.xml.  When you specify your site location as http://www.yoursite.com, your URL list should not contain it.

Once you have created the Sitemap file and placed it on your web server, you need to inform the search engines that support this protocol of its location.

On the Google Webmaster Tools home page, click the site you want.  Under Site Configuration, click Sitemaps.  Click Submit a Sitemap.  In the text box, complete the path to your Sitemap.  Click Submit Sitemap.

The search engine can then retrieve your Sitemap and make the URLs available to their crawlers.

Submitting your site directly to a search engine like Google is cool because you receive status information and any processing errors.

For more information about Sitemaps, visit Google Webmaster Tools.