Developing a website for the mobile web

This semester my students had the chance to explore the iPod touch as we had won several as part of a grant to explore mobile learning and mobile development in the classroom. One main reason why we were going through this was that because I wanted to Define Ecommerce and show them the various prospects of it which were helping humanity. If you are looking for someone to help you develop a site or app contact Dux Digital. As part of my computer based instruction course students were assigned to develop computer based instruction that was viewable on any mobile device, thus they had to use a web browser as apps are device dependent.

This is most certainly different than developing for a PC or regular monitor. A few rules we learned throughout this semester were:

Use One Column only
Make Text legible without the need to zoom
Have navigation on the top of the screen
Use a header, body, footer within the single column framework

When developing for a phone, for instance the iphone (but they are all nearly the same), you have two options. But before that, I’d like to mention that you can now get virtual background zoom for most of the video calling and conferencing apps that you use. This is a good developement towards attaining professionalism.

1. Develop using a small screen size –

What does this mean? It means to develop a site that is around 400×400 pixels so that you can get a good idea what the site will look like on the mobile device. However, if you do this, you need to include this line of code in your <head> tags: <meta name="viewport" content="width=400"></head>. This line tells the phone that your page is 400 pixels, otherwise it will go to the default, which leads to lots of white space and then to the next option....

2. Develop at a large size

Why do this? Well it doesn’t rely on the one line of code at the top. However, to do this you need to develop a ‘big’ website. Phones compress a page at 980 pixels in width. This means that a standard 980 pixel page is very small when viewed on a website. So you need make a 980 pixel page that is big. This means that font should be 40+ in size. In fact, a font size of 72 pixels looks really good. It is a challenge to develop like this but one that is worth exploring.

These are a few of the lessons learned this semester, more to come soon:)

Posted in Mobile Learning and tagged .

Leave a Reply