devices
Get flash to fully experience Pearltrees
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.
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:Different Stylesheets for Differently Sized Browser Windows
Published by Chris Coyier 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: < link rel = "stylesheet" media = "screen and (min-device-width: 800px)" href = "800.css" />
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.
Mediatyping
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.
Return of the Mobile Stylesheet
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 http://www.developer.nokia.com/device-detection/ using a mobile or desktop browser. The page demonstrates various device detection techniques, and provides a sample of the data returned from them.
Mobile Device Webdesign am Beispiel iPhone - Entwicklungswerkzeu
Exzellenter Artikel von meggs | 4 | | 18471 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.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!
How to build a website for the iphone with orientation detection
Orientation Example
Based heavily on Jason Grigsby's demo ( http://www.cloudfour.com/ipad-orientation-css/ ) 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: <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Thank you for helping us create a comprehensive database of mobile web browser performance characteristics. We will continue publishing the results here and on the Cloud Four blog under Creative Commons attribution .