David Storey - Slightly ajar - Posts tagged by "".

Posts tagged with "Handheld"

Opera Mini 4 Beta 2 and Mobile Web Design

Thursday, 30. August 2007, 18:39:22

Handheld, Media Queries, Mobile, Mini ...

All systems have been go, getting ready for the beta/alpha releases of our two flagship products. While Kestrel will spread its wings on Tuesday, I got a birthday present today with the launch of the second beta (if we were Web 2.0 that would be Gamma) release of Opera Mini 4. Many bugs have been fixed, including better integration with the Blackberry for all you crack(berry) addicts. As Mini 4 was a full re-write, many popular features were left out of the first beta. These are starting to return with today's release. Secure connections are back so it is safe to use your bank again. Content folding, and search engine customisation are also back. There are also more view options available, with landscape and full screen mode.

If you want to check out how much the standards support has improved since Mini 3 then download the beta then check out Cameron Moll's Markup test pages If you don't have a phone that supports Mini (that'll mostly be you Verizon customers) then you can check it out on the Mini 4 beta simulator. Note that ordered lists (ol) are supported, unlike what the test suggests. This seems to be a obscure bug with that particular page. If you are interested in designing for mobile then the first part in a series of guides about Opera Mini and mobile web design will be published by yours truly very soon on Dev Opera It will cover Opera Mini basics, how it differs from the desktop browser, and an introduction to handheld stylesheets and media queries. A more in-depth look into the specifications, particularly the JavaScript support, and an article focused on handheld and media queries will come at a later date.

I can also highly recommend Cameron Moll's hotly anticipated Mobile Web Design book that has just been released. This is the one book you should buy above others if you are interested in this field. It is well worth the $19 cover price. If you need to justify why you should create a mobile web strategy then this book should convince you that it is worthwhile. It is also one of the few texts on the topic of mobile recently, that doesn't preach designing for one device and one browsers. It is good to see the standards movement doesn't all have blinkers on.

7 comments

iPhone and developing for mobile

Thursday, 5. July 2007, 15:51:01

iPhone, standards, Media Queries, Handheld ...

The iPhone has now been released to much fanfare. I'd like to run through a few things on what this means to web developers and those that want to optimise their sites to work on mobile web browsers.

The first point that has to be raised is that Apple also believe in the One Web approach, where they feel that mobile browsers are capable of rendering regular web pages and optimisations can be made by giving an alternative stylesheet customised for the smaller screen. This is a view that Opera supports. Makers of WAP browsers will probably disagree as they don't have the technology to display regular web pages correctly. It isn't a black and white case of course. Sometimes it is nice to have a mobile specific version, such as when the content is very location aware, or the application is complex so it would take a lot of work to optimise the regular site. I would say on average is is best to leave the page as it is, and rely on technology such as Opera Mini's intelligent zoom or iPhone's zoom, or optimise the CSS (more on that later) for web pages (blogs, wikis, news sites etc) and do a custom mobile version for web apps like Flickr or Gmail etc. With a mobile specific site a link should always be given to go to the regular site, as there may be information there that wasn't provided on the mobile version.

If using One Web principles, the issues comes with trying to optimise the CSS for mobile. The W3C spec has a solution for this; the handheld media type. The principle being that computers use Screen media, when printing Print is used, Handheld for mobile phones, PDA and small handheld media devices/tablets and so on. This sounds rosy, except Apple and Nokia in their wisdom have decided not to support Handheld. That may be fine if they didn't want authors to optimise the layout for iPhone/S60 Phones, but Apple clearly do in their developer documentation (click on Optimise for Page Readability and scroll down). They state that iPhone ignores the print and handheld media queries because these types do not supply high-end content. Where they get this idea from I've no idea. It is obvious they don't need to support print (Opera Mobile and Mini don't either) because you are not likely to hook your mobile up to a printer and print the document, but print media has nothing to do with high or low end content. It is the same for Handheld, and it should be used for doing exactly what the suggest; specifying a stylesheet for mobiles. They get around the lack of handheld support by using Media Queries. This is a solution I've proposed in a previous article. This works well and gives a lot of fine grain control, but it would be much simpler to just support handheld media to get the same effect. That would get around any issues where a desktop based browser could get the mobile stylesheet due to using the screen media type, and where older mobile browsers will not get the mobile stylesheet as, as far as I know, only Opera based and WebKit based browsers support Media Queries. It is also worrying that they seem to suggest that developers should design specifically for the iPhone, and not mobile browsers in general, especially with a CSS filename of iphone.css in their example. This is a case we tried to avoid when the Wii browser was getting popular, by adding TV media support, so that all TV based browsers would benefit from the optimisations. There are of course exceptions where a web site is and should specifically be aimed for one browser and device, such as when Wiicade make use of the Wiimote hardware for example. In the case of the Apple documentation they give the following code suggestion:

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

I'd suggest changing it to the following:

<link media="handheld, only screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />

That way it will work on any devices that support handheld media (and makes sure Opera Mini 4 doesn't apply its desktop overview mode) and also on mobile devices such as the iPhone and Nokia S60 browsers which only support Media Queries.

Apart from the handheld debate, it is interesting to note that iPhone suffers quite a few of the same limitations as Opera Mini. Notably that it doesn't support file downloads or uploads (although you can upload from the camera in Mini), no plug-in support such as Flash, limited javaScript execution time etc. Although these are draw backs of both browsers, it does mean that it will make the base line that developers can aim for much more consistent. Fixing issues in one browser should fix many issues in the other browser.

One thing of note on the iPhone that is interesting to me was revealed in Daring Fireball's iPhone First Impressions. That is that the UI's interface uses the Helvetica font. This is interesting for a couple of reasons. First of all OS X usually uses Lucida Grande as its default UI font. I wonder if there was any reason for the choice, or if it just looked better on the smaller but high resolution screen? Either way I love the Helvetica font, so I think it is a nice choice. The most interesting thing for web developers though is that it means one important thing — that regular desktop quality fonts are available on the iPhone. This is not really a surprise, as it is based off OS X after all, but it is nice to have confirmation. One of the biggest problems with mobile development in my mind is the inconsistencies between devices caused by font support on phones. many only have one font (which is of quite low quality) and some have very limited text sizes available. It is also common that italic isn't even available. I don't have a iPhone, so I can't confirm if any other fonts are available. I'd expect they'd include the Microsoft core fonts (in the Web folder in FontBook) such as Arial, Times New Roman and everyone's favourite Comic Sans MS. I think it is important for consistency in mobile web design for handset providers to start providing the same fonts across models and brands. Web Fonts could solve the problem but it will be a while before they are supported across multiple mobile browsers, and a user probably doesn't want to download large font files across a slow EDGE network.

<p.look out for our Opera Mini 4 developers guide soon. it is in the final stage of preparations. As Opera Mini 4 is in beta, standards support will likely change for the final release, so look for updates to the document as time progresses.

12 comments

Media Queries and Handheld stylesheets

Sunday, 17. June 2007, 22:40:24

standards, Mobile, css3, Handheld ...

When designing for mobile, one has a few options. These include doing nothing and relying on how the mobile browser reformats the page (using either small screen rendering, desktop view or both depending on the browser), creating a new mobile friendly site, or restyling the page using handheld stylesheets or Media Queries. I'll look at the latter two here.

As part of the preparations for the Opera Mini 4 launch this Tuesday, I've been developing our developer documentation. This includes examples of using both handheld stylesheets and CSS3 Media Queries. The first example uses Media Queries to reformat the page when the screen is 480px wide or smaller. The code could be optimised more, and the design is simple so small screen rendering on its own would probably do a good job, but it is an example of what can be done. On a more complex page with images the results would be more worthwhile. Both screen and handheld were specified as the S60 browser from Nokia and the Safari iPhone browsers both ignore handheld stylesheets, so the screen media type had to be specified for those browsers. I choose 480px for the width as that is the resolution of the iPhone when in landscape mode, but any width could have been chosen. max-device-width doesn't have to be used, I could have chosen max-width, or any other number of options. I don't have a S60 or iPhone browser to test, but I suspect they will both render similarly to Safari 3, minus the font differences. Opera Kestrel and above have improved Media Query support so that the changes kick in without refreshing the page. This means in the previous example it will apply the Media Query content as soon as the browser view port is 320 pixels wide. As you could imagine, once more browsers support this, it would be very useful for elastic layouts to stop content overlapping when the browser window gets too small. The contents could be set to clear instead for example.

The second example is based on the first and and uses handheld stylesheets. It sets the stylesheet in the above example to only apply to the screen media type and creates a new stylesheet with the handheld media type. This means that browsers that support handheld correctly will only apply the second stylesheet. This stylesheet then includes all the styles needed to create the design.

As can be seen in these two fairly simple examples, it is possible to optimise for mobile without too much difficulty, or learning many new techniques, as long as your mark-up is clean and without presentational aspects, such as tables for layout. Unfortunately, handheld support is not where it could be, but Media Queries are well supported in modern full HTML mobile browsers. If your web sites page will benefit from it, I'd recommend you give Media Queries a try. I'd recommend specifying in the stylesheet that images and any content have a max-width of under 100% so that horizontal scrolling is not needed.

4 comments