How Did We Get Here? - Dive Into HTML5

How Did We Get Here? - Dive Into HTML5:

'via Blog this'

is my site mobile friendly? (Part 2)

Please read the previous post "is my site mobile friendly? (Part 1)" before reading this post.

Cross Platform Friendly Links and Effects

It is hard not to include a nifty hover tooltip or a drop down navigation or even links that open up a small new window using javascript to display some information. However, to a user on a mobile device, these effects and tools may not work on their platform, leaving many unusable links and tools. An easy solution to this is to always provide an alternative for users who cannot view or use them.


Some mobile devices allow Javascript but it will not be able to utilize the effects you have on your website anyway, so the best thing to do is to detect the type of platform that is connected to your website and disabling or changing some tools and effects to suit it better.


Keep Your Content Compact

Long pages for mobile devices are definitely a huge draw back because of the longer load time it takes to download the webpage. Therefore, keeping your web pages content compact makes your website accessible across all platforms even on a device that has a very limited download speed, thus, the last thing users want to be doing is waiting for pages to load rather than spend the time browsing through it.



Large and Clear Content

If your website’s content and links are not large or clear enough, navigating through your website will be a pain.

try to eliminate links that are scattered within articles or paragraphs, as they are difficult to press or click on since they are surrounded by plain text. Instead, place these links above or below the bodies of text while keeping them fairly large, this allows users to easily click them with their finger without hassle.


Keep it Simple

make sure your website has a short and easy to remember domain. Additionally, eliminating typing work as much as possible to get around while they are on your website is also ideal, as usually they are accessing your site to quickly pull or reference information.

is my site mobile friendly? (Part 1)

Now that mobile browsing is ever increasing in popularity, it is in your best interest to start optimizing your websites to better fit the mobile platform and its limitations. There are many easy ways to enhance you website for mobile browsing without hindering much of your website; we discuss eight popular ones that can make a huge impact on usability. 
  
In this article I'll introduce some fundamental steps that, will help you avoid the pitfalls that have caused many other mobile sites to fail. By the end of this article you'll know exactly where to focus your efforts in order to build a successful mobile site.

For our purposes, we divided all mobile devices into three categories.

1. Devices with screens that have widths between 320 and 480 pixels, that support CSS, and that support screen media types and media queries. This includes the iPhone, the G1 and many Android devices. We will refer to this group collectively as the iPhone. These devices will be able to support all of the optimizations we put in place.

 2. Devices that support CSS and that either support the handheld media type or support the screen media type and media queries and have screens smaller than 320px wide. We'll create separate, simplified CSS rules for these devices since their screen size will limit what they are able to display.

3. Devices that don't support CSS. These devices will render our content from the markup only. We don't have to provide any special optimizations for this group. Since our CMS allows us to use HTML standards, it will still render effectively on these devices.