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
Mobile browsers are now starting to support these basic CSS properties better. Position:fixed will work on Android 2.2+ and iOS 5+. Overflow:scroll works with one finger on iOS 5+. Also, iOS 5 has additional CSS to give the native scrollbar and momentum/intertia to elements with overflow:scroll: -webkit-overflow-scrolling: touch;Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks
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.
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. 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.
A List Apart: Articles: 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
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.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.
How to build a website for the iphone with orientation detection
Orientation Example
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: You're Viewing in Portrait Mode You're Viewing in Landscape You can see this css query in current versions of Safari and Firefox on your desktop machine. Simply change the size of your browser window until the height is longer than the width.
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 .