HOW TO: Optimize Your Mobile Site Across Multiple Platforms. This series is supported by Webtrends Mobile Analytics, which lets you monitor the adoption and usage of your mobile apps and mobile sites. To keep up with Webtrends Mobile, add their blog to your RSS reader. One of the most difficult aspects of designing for the mobile web is making your site compatible and accessible across different devices.
A mobile-optimized site might look great on your iPhone or Android device, but utterly fall apart on Symbian or BlackBerry handsets. Likewise, a simple WAP-enabled site might be fine for feature phones, but fall short of expectations when it comes to newer and more advanced devices. We've covered some of the ways to streamline the process of creating your mobile-optimized site in the past. Today, we want to take a look at some specific tips and tricks for testing and adding compatibility for different types of devices. 1.
It's natural to want to make your site look absolutely perfect on every possible device that could access your mobile site. 2. Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5) | David B. Calhoun – Developer Blog. (updated June 27, 2011) Mobile-specific HTML Viewport tag Use the viewport tag to properly fit the content to the screen: Tel scheme (to initiate phone calls) <a href="tel:18005555555">Call us at 1-800-555-5555</a> Sms scheme (to initiate text messages) iOS-specific HTML (some work on Android as well) You also have access to several Apple-specific tags to use in your iOS applications (iPhone, iPad, and don’t forget the iPod Touch!). Turn off autocorrect, autocomplete, and autocapitalize And also some handy attributes to turn off annoying autocorrect features: Mobile-specific CSS Mobile browsers are now starting to support these basic CSS properties better.
Also, iOS 5 has additional CSS to give the native scrollbar and momentum/intertia to elements with overflow:scroll: Media queries enable you to target specific features (screen width, orientation, resolution) within CSS itself. @media all and (orientation: portrait) { body { } div { } } Here’s a few examples of using inline CSS: Miscellaneous CSS.
Different Stylesheets for Differently Sized Browser Windows. Otherwise known as "resolution dependent layouts". Single website, different CSS files for rearranging a website to take advantage of the size available. There is a W3C standard way of declaring them. One way is to test the "device-width", like this: The above code will apply the 800.css styling to the document only if the device viewing it has a width of 800px or wider. And... supports "media queries" in this way. Keep in mind this is the device width, not the current width of the browser window. On the iPhone (3G(s)), that means 480px. Seems to me far more useful is the current width of the browser window ("viewport").
That stylesheet will only take affect when the current browser window is between 701 and 900 pixels in width. Browser Support IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+. Generally, layout is one of those things that it's tough to sell "progressive enhancement" on. If IE support is paramount, we always have JavaScript!
Doing it with jQuery Video Example One View Demo. Mediatyping. March 18, 2008 Just prior to jetting off to Austin last week, I started playing around with a mobile version of this site. While a personal blog is hardly a site that really needs one (unlike, say, an app with a proven mobile user-base like Twitter), I wanted to see what would be involved in re-factoring this design into something more fitting for a mobile environment. The first step was to create a mobile style sheet. For this I duplicated the CSS file I’ve already built for large screens, and started stripping out the style that doesn’t work so well on a smaller screen. The layout was simplified into a more linear single column, and some elements were re-done to provide a larger target area for a maximum Fitts factor, and background images were dropped wherever possible to cut down on bandwidth demands.
I tried building something that would work well on more mobile devices than just the iPhone, but given that it’s my testing device, it works best on that platform for now. <? Return of the Mobile Stylesheet. The past couple of years have seen numerous new web-capable mobile devices arise, including Apple’s iPhone and its Safari browser, the creation of Google’s Android platform and Webkit-based browser, the rise of so called “full web” browsers (Nokia’s S60, Opera Mobile and Opera Mini, among others), the early development of Firefox’s mobile version, and more. These mobile browsers improve users’ experiences, giving them access to websites formerly off-limits to most mobile devices.
Indeed, as a 2008 Nielsen Media Research report highlighted, mobile devices have increased traffic by an average of 13% across several popular websites. Ideally, site authors would be able to meet the growing demand for a quality mobile experience without changing a line of code. But the reality is that a site designed specifically with mobility in mind will always provide a much better user experience to mobile users, even when they are equipped with the device du jour. Screen style sheets strike back#section1. Device and feature detection on the mobile web - Forum Nokia Wik. Using device and feature detection to improve user experience on the mobile web This article introduces the topic of device and feature detection as it applies to the design and development of mobile websites.
The article discusses common mobile design approaches, why and how to detect device properties, and the options available once a device or property has been identified. The article includes sample source files, which can be downloaded or viewed online. To access the online version, please visit using a mobile or desktop browser. The page demonstrates various device detection techniques, and provides a sample of the data returned from them. Viewing the page on a variety of devices will illustrate differences in browser capabilities. Introduction to device detection Why use device and feature detection? The ability to identify a device, browser or feature enables the developer to perform a wide number of relevant actions.
Your users. Mobile Device Webdesign am Beispiel iPhone - Entwicklungswerkzeu. Exzellenter Artikel von meggs | 4 | | 20455 Aufrufe Das Internet ist mobil. Notebooks surfen drahtlos im Web und dort ist das Internet, wie wir es vom Desktop kennen gang und gebe. Der Fokus liegt nun auf den so genannten Mobile Devices, Smartphones, Handhelds, PDAs und Co. Mobiles Internet wird schneller (GSM -> UMTS/HSDPA) und die Geräte leistungsstärker. Der Knackpunkt: Das "echtes Internet": Browser stellen auf kleinen Geräten das selbe dar, was der Browser auf dem Desktop darstellt. Um dies zu ermöglichen, bedarf es schnellen Verbindungen, Interface-Intuitivität und darauf ausgelegten Funktionen wie weiches Zoomen. Grundlagen beachten Mobile Geräte trainieren den Webdesignern und Webentwicklern professionelles und überdachtes Arbeiten an. Struktur und Layout trennenHTML semantisch und valide strukturierensinnvolle Grafikgrößen verwendenkeine großen Hintergrundgrafiken verwendenkomplizierte Famesets vermeiden, besser: ganz vermeiden Umstände beachten Maus !
"Echtes Internet" Viewport Syntax. How to build a website for the iphone with orientation detection. Well, we did promise we'd get around to a tutorial eventually, so here you have it! The Engage Interactive school for all things internet proudly presents: How to build a website with orientation specific content especially for the iPhone! This tutorial will cover the basic setup and creation of a web page for the iPhone that will detect and change the content based on the phones orientation. You will need some way of viewing your files on the iPhone or you wont see the fruits of your labour. We'd suggest uploading it to a location on the web and browsing to it on the phone. Other than that everything else can be done with any old text editor. Anyway, enough chat - Onward to the tutorial!
I completely forgot to mention how to detect the iPhone on your normal website and send it to your iPhone version. Setting up your page If you look at lines 3, 4 and 6 you'll see a few lines you probably haven't come across before. Line 4 is for creating webclip icons when you bookmark a site. Clever huh? Orientation Example. Based heavily on Jason Grigsby's demo ( Webkit on the iPad, Webkit on Android, Safari, and Firefox all honor CSS media query declarations based on orientation. Using orientation in CSS is very simple. The code for different stylesheets looks like this: or, within the same stylesheet: In this example, the only difference between the two styles is that they hide one of two headings. The html for the page has the following code: <h1 id="portrait">You're Viewing in Portrait Mode</h1><h1 id="landscape">You're Viewing in Landscape</h1> You can see this css query in current versions of Safari and Firefox on your desktop machine.
Mobile Connection Test.