Mobile Web Design

Mobile phones and Personal digital assistants (PDAs) are changing the way people access and work with information. These devices are becoming smaller, cheaper, better, and more connected. Mobile phones and PDAs may just become the mobile computing technology that revolutionizes the face of learning. These mobile devices give students wireless connectivity while expanding where educational computing can take place to the home, field, and any places. The ability of accessing Web sites using mobile browsers allows students convenient access to course Web pages, syllabus, tutorials, magazines, newspapers, and reference materials on their mobile devices. This access, along with basic search capabilities, provides many learning opportunities for students that would generally not be possible or efficient before.

Today, there are 1.5 billion mobile devices in the world, more than three times the number of PCs. As the mobile devices increase capabilities and networks get faster, users are using mobile devices more and more for common computing and information gathering tasks.

Making educational Website friendly to mobile devices is worth serious consideration. If a Web site is set up correctly, the same pages will be compatible with conventional desktop/laptop browsers and mobile browsers. Designing an effective, mobile-friendly, educational Web site requires careful planning and basic knowledge of Web design and development for mobile devices. When designing a Web site for mobile devices it is even more important to work out the site design before dealing with individual pages. As compared with desktop Web design and development, site development for mobile devices force Web designers to work within fairly tight constraints: access speed, file size, memory space, mobile browser, screen size, page length, font, graphics, multimedia, and form. Web designers must deal with these design constraints and decide the trade-offs. For example, it is important to decide what information is essential and then present that information in a manner that is clear, concise, efficient, and easy to navigate. In addition, given the smaller screens of mobile devices, Web designers should avoid including more than one topic onto the same page. It is important to strike a balance between the depth of the page hierarchy and the length of the individual pages.

Currently, there are several technical guidelines for mobile Web developers and designers available online for guidance and tips. Microsoft creates pages for designers of Pocket PC: Designing Web Sites for Internet Explorer for Pocket PCs. mTLD (mobile Top Level Domain) published the DotMobi Mobile Web Developer’s Guide in March 2007, a comprehensive guide to mobile web development. Both these publications detail layout considerations, image production, multimedia and HTML support. In addition, the W3C, the leading consortium for the World Wide Web, launched the Mobile Web Imitative (MWI) that is focusing on developing “best practices” and a trustmark “mobileOK” for Web sites in May 2005. The “mobileOK” allows Web authors to check their mobile sites whether they are conformance to the W3C Mobile Web Best Practices. Also, The Mobile Web Best Practices Working Group released the First Public Working Draft of “Mobile Web Best Practices 1.0” in November, 2006. The document specifies best practice for making Web access from a mobile device as simple, easy and convenient as Web access from a desktop device.

Advertisements

About Steve Yuen

I am a Professor Emeritus of Instructional Technology and Design at The University of Southern Mississippi in Hattiesburg, Mississippi, United States.
This entry was posted in Mobile Web Design, Web Design. Bookmark the permalink.

13 Responses to Mobile Web Design

  1. I feel that mobile devices will help people in the long run. Mobile devices are helpful and I feel that they are convient and useful. Mobile devices at home and portable ones are very good to use especially if you don’t have access at home. Anyone could take the devices everywhere with them instead of going to one place to use them. Students especially need these PDA’s and other portable internet devices to help them along the way. I like the fact that it is cheaper now so that everyone can enjoy their devices.

  2. Lisa McBeth says:

    Mobile devices are becoming a tool that more and more people are using to access the Internet. My son uses his cell phone that the Internet is installed on to access information. He just moved to a small town in Texas, and he does not yet have home Internet on his computer, so his phone Internet is valuable to him. The easier access of the Internet by using these mobile devices is wonderful for people who are too busy with a hectic life to be able to sit down at a computer to get information. I just hope that people will use the mobile devices in a safe manner, (not while driving 70 miles down the Interstate).

  3. Nolan Gouguet says:

    Dr. Yuen, I was listening to NPR this morning on the way to school. They were discussing online learning and presenting both sides of the argument. Some were for it saying that it allowed students with greater flexiblity. Others said that they were against it because it allowed students with effective ways to cheat. At the end of the program they stated that whether you like online learning or not, it is here to stay. They said that the newest wave in education is moblile learning. With new mobile devices that can connect to the internet, soon we will be able to attend school on our way to work 🙂

  4. Tawana Alexander says:

    What more can you do to cell phones? I felt the same way about cell phones, well somewhat the same; I said it wills great that if we could check our e-mail and personal things of that nature. I believe that this is a wonderful idea. I have had several of phones with and had access to the Internet, but I did not get on it very often. It was very hard to navigate and I figured that it would easier just get on the computer. I did enjoy the online games, which really ate my battery up. I like the idea that this phone offers more than regular phones, things such as: access speed, file size, memory space, mobile browser, screen size, page length, font, graphics, multimedia, and form. Seems like an excellent phone. I really believe that this phone will be great since it can be educational as well. I believe that this is a wonderful idea I am sure several people will purchase this phone. Everyone tries to stay updated now days. So many people are inventing so many different things I will not be shocked that to see a cell phone that can so many things.

  5. Christopher Tisdale says:

    Who can believe that one can now access the Internet using just a mobile device? This means anybody can access the Internet from anywhere just using a cell phone or PDA. This would be a great benefit to students who don’t have computers at home. Mobile devices are becoming really affordable and media package plans for your mobile device are not expensive at all. I use my cell phone to get on the Internet, but most of the time I get an error message stating that the web page cannot be displayed, especially with a website that has many pictures. From reading this post, I noticed that there is actual coding for mobile devices; I did not know that. I am a technology teacher, and I really feel that I am very behind on the new technology.

    I really agree with making educational sites friendly to mobile devices. This technology would be a great help to many people. I think mobile coding should be incorporated into the Webpage Design curriculum. We are already teaching our students coding — why not teach them how to code for mobile devices? I think students would really be excited to create a Webpage for their cell phones or PDAs. This would increase learning and help the student become a better webpage designer and a more efficient coder. With new technology on the rise, I think we must expose our students to what is out there. I believe this type of technology can enhance learning and possibly improve student achievement. For example, if a child can access biology notes and lectures from home and complete small assignments using just a cell phone, I think learning might become fun and interesting. Most students are going to bring their cell phones to school regardless of what rules are in place, so why not make students utilize that tool as a learning device in a classroom environment?

  6. houbinfang says:

    According to the internet, more than 25% of mobile phone owners around the world have browsed the Internet via a mobile handset. So we can tell the mobile web site is holding a lot of potential in business area. Market research agencies are speculating that mobile web browsing might become the next dominant Internet platform. For many consumer-driven companies this means that having a WAP friendly website will be a necessity rather than a nice-to-have.
    I surfed online and found these principles for mobile web site design listed below:
    • Websites using tables for layout will not render well on mobile handsets. The site must use CSS for layout
    • The site must be coded using either XHTML or XML
    • Character encoding should be UTF-8
    • Bear in mind different screen sizes of mobile users. The largest screen size available is probably 640 x 480, whereas the average is closer to 120 pixels
    • The most important information of your site must be right at the top of the page as it can be very time-consuming for browsers to read through
    • Text entry can be quite difficult. Users prefer to select values from a list of choices, such as radio buttons or lists
    • Images should be jpeg or gif
    • Always provide a ‘back’ button or link, since many phones don’t include a back button
    • The maximum total page size recommended is 20 kilobytes
    • Remember that your users are paying a lot of money to access your site, so make sure it is definitely worth their money!
    Mobile web design has a long way to go. This area is also related to the development of the development mobile devices and the number of users. But there is not doubt that the future of mobile learning will not be a dream.

  7. Andrea Howard says:

    Before taking Dr. Yuen’s course, it never dawned on me that websites typically are not designed to fit on the screens of mobile devices. I just didn’t think about the fact that mobile websites had to be created separately from the traditional websites. Guidelines for authoring effective, functional mobile websites exist as well. It all makes sense now. As Chris stated, trying to access certain websites on your mobile phone proved to be unsuccessful in the past. I would run into sites that either did not load completely or were so difficult to navigate because you couldn’t view the entire screen on my phone. Accessing the web on my phone was cumbersome. I loved my smartphone for it’s capabilities, but for about a year, I just used the Internet on the phone to chat and send/check email. Surfing the web was just not an option. Now after having a smartphone for approximately four years, the connections have improved greatly and the sites have become way more user friendly. I guess the companies have gotten “hip” to the fact that their businesses needed websites that are both accessible from computers, but from mobile phones as well.

  8. 莊明廣 says:

    為了讓行動學習能夠更方便、更容易使用,早些時候鼓勵進行行動載具網頁的設計是必要的,也有助於讓使用者瀏覽他們所熟悉的網頁資訊,課堂上,老師帶領我們進行設計的網頁平台是非常簡單與方便使用,但是,就好像說:平時在一般的瀏覽器上進行設計,已經吃慣了這些大魚大肉,如今突然進來行動網頁介面,吃到這種陽春麵,真的會有些不習慣,好像綁手綁腳的樣子,在行動網頁的設計上,仍然需要透過一些專業軟體來進行會好,只是這樣的話,要讓一般使用者接受就不容易了。
    另外,我要說的是,目前的行動載具發展,已經非常進步,一些smart mobile phone,都已經可以瀏覽一般的網頁資訊了,在嘉斌學長的回應中,我們也看到了他的示範操作,所以,我綜合了閱讀 mobile 2.0的心得,我們所要努力去研究的應該是二個方向:

    1 open source 讓行動網頁的內容更容易互動,如wiki的功能一般,或是可以開發更具在地特色的課程,如清華大華正在發展openmoto等。
    2應用web2.0的優勢、特性,試著與行動學習做結合,相信應用與教學是永續的不二法則。

  9. 莊明廣 says:

    為了讓行動學習能夠更方便、更容易使用,早些時候鼓勵進行行動載具網頁的設計是必要的,也有助於讓使用者瀏覽他們所熟悉的網頁資訊,課堂上,老師帶領我們進行設計的網頁平台是非常簡單與方便使用,但是,就好像說:平時在一般的瀏覽器上進行設計,已經吃慣了這些大魚大肉,如今突然進來行動網頁介面,吃到這種陽春麵,真的會有些不習慣,好像綁手綁腳的樣子,在行動網頁的設計上,仍然需要透過一些專業軟體來進行會好,只是這樣的話,要讓一般使用者接受就不容易了。
    另外,我要說的是,目前的行動載具發展,已經非常進步,一些smart mobile phone,都已經可以瀏覽一般的網頁資訊了,在嘉斌學長的回應中,我們也看到了他的示範操作,所以,我綜合了閱讀 mobile 2.0的心得,我們所要努力去研究的應該是二個方向:

    1 open source 讓行動網頁的內容更容易互動,如wiki的功能一般,或是可以開發更具在地特色的課程,如清華大華正在發展openmoto等。
    2應用web2.0的優勢、特性,試著與行動學習做結合,相信應用與教學是永續的不二法則。

  10. 林學志 says:

    老師您好
    我是高師大工教博士班學生 林學志

    依照相關資料顯示
    下一個世代的青年(以21歲為例)
    將會花10,000小時於使用手機通訊設備參考資料來源:http://voicethread.com/#q+web+2.0.b18677.i109472

    而下一世代的學習者有那麼多的機會能接觸行動式裝置
    若是能將數位學習【e-learning】推動運用於行動式裝置上,
    並建置適當的mobil教材內容
    使得學習者使用行動裝置,如:cell phone or PDA
    即能直接下載與觀看數位教材
    或是進行即時視訊互動的教學活動
    都將能拓展教學場域並提升學習品質與成效

    不過
    當然行動裝置整體效能較差(與桌上型電腦相比)以及螢幕太小等問題
    故現今於設計Mobile Web皆需考量這些限制
    避免負荷過大影響裝置的性能
    建議可數位內容方面可以數據呈現以及文字討論區為主
    仍不建議於Mobile Web中嵌入高畫質的視訊內容
    以下是我製作的個人Mobile Web
    http://www.linhsiaochih.param.mobi/
    以上看法與大家分享,也期待大家的指教~謝謝

  11. 林學志 says:

    老師您好
    我是高師大工教博士班學生 林學志

    依照相關資料顯示
    下一個世代的青年(以21歲為例)
    將會花10,000小時於使用手機通訊設備參考資料來源:http://voicethread.com/#q+web+2.0.b18677.i109472

    而下一世代的學習者有那麼多的機會能接觸行動式裝置
    若是能將數位學習【e-learning】推動運用於行動式裝置上,
    並建置適當的mobil教材內容
    使得學習者使用行動裝置,如:cell phone or PDA
    即能直接下載與觀看數位教材
    或是進行即時視訊互動的教學活動
    都將能拓展教學場域並提升學習品質與成效

    不過
    當然行動裝置整體效能較差(與桌上型電腦相比)以及螢幕太小等問題
    故現今於設計Mobile Web皆需考量這些限制
    避免負荷過大影響裝置的性能
    建議可數位內容方面可以數據呈現以及文字討論區為主
    仍不建議於Mobile Web中嵌入高畫質的視訊內容
    以下是我製作的個人Mobile Web
    http://www.linhsiaochih.param.mobi/
    以上看法與大家分享,也期待大家的指教~謝謝

  12. Donna Parker says:

    I thoroughly enjoyed our assignment of creating a mobile Web site using Mobisitegalore.com. This was my first experience actually creating a mobile Web site, and it was a fun experience. We are in the information era, where I want it now. As cell phone and smaller computer technologies are increasing, students are taking advantage of having access to the Internet at all times. Even though students use these devices for Internet connections for social networking, many are really using them for educational purposes. They are finding online classes that are web friendly which allows them instant access to course materials such as syllabi and assignments. Many times in class, someone will ask a question such as, “How do you spell technologies” Before you could walk over to the dictionary, another student has pulled out a cell phone and looked up the word. Another example: sometimes I will ask students, “Did you see that football game last night? What was the score?” Again, a student will quickly look up the score on a cell phone. I foresee newspapers becoming obsolete soon because by the time they are printed, the news in the paper is old. Students (and instructors) are constantly looking at current events in real time now because of the portable availability of Web sites now. If you ever use public transportation, you will notice immediately everyone’s head bent down looking at a cell phone or other small computer keeping up with news, social networking, homework, and multitude of other tasks. When I see students in the courtyard on break, they are surfing the Web with their portable devices. With the availability and ease of creating mobile web apps, these trends will grow rapidly, thus increasing our dependency on the Web, anytime, anywhere.

  13. ekimkaerf says:

    Though this post is a little old, it is extremely relevant to today (if not more now than then). The proliferation of the Android, iPhone, Windows phone 7, and the Blackberry has completely opened up the world of the mobile computing. Now the tablets that have invaded the market place and other ultra portable devices (netbooks, mac book air, etc.) have given rise to some people calling for the end of computing as we used to know it. I highly doubt this, but the fact is that the possibilities for mobile web development and application development have just begun to be realized. Even Adobe is making some huge changes to help support mobile devices. Adobe just released a mid-cycle release CS 5.5 in which Dreamweaver got some major improvements for the way that it handles mobile and portable devices. Dreamweaver was also given support for jquery for mobile and other mobile friendly improvements. Right now smartphones have the spotlight, but other portable devices deserve notice as well such as the Nintendo 3DS that combine many of the features that a mobile phone can do with traditional gaming devices. This device also has begun to use features such as “Glassesless 3d” and augmented reality for some of the games. I am very interested in seeing where Nintendo and the rest of the mobile innovators will take these technologies. Mobile devices will get smaller (or not there at all.. AR). They will become more powerful and more ubiquitous. Hopefully they will get cheaper too.. Cell south is breaking my wallet for mine.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s