 | Making My Website Work on Tablets and Phones |
We have entered a new world of communication! We no longer solely rely on desktop computers and/or laptops to get our daily dose of information. Before the internet, we had to rely on sources like television, newspapers, and the library to learn about what is going on along with learning about increasing our knowledge. Then along came the internet. Now established, the internet allows up finding information about just about anything and finding it pretty quickly. All we needed was a network cable and an internet service provider.
Now once again, technology has taken another step forward and now we are not only are we in the information age, we are in an age where we can access this information from just about anywhere and anytime. As the speed of technology increases so does the means by which the normal everyday person can access this technology. We have the ability to look anything up using a mobile device like an Android tablet, I-Pad, or I-Phone.
Now once again, technology has taken another step forward and now we are not only are we in the information age, we are in an age where we can access this information from just about anywhere and anytime. As the speed of technology increases so does the means by which the normal everyday person can access this technology. We have the ability to look anything up using a mobile device like an Android tablet, I-Pad, or I-Phone.
|
The question is, is our business ready for these changes as well. While most businesses have websites, their website was designed for a desktop computer or laptop. But just how many websites are designed for small devices like an I-Phone? Chances are not that many. Even though you can easily view a website on a small device like a phone, you may notice quite a bit of distortion. There are a few things that need to be taken into account when having your website not only simply phone ready, but phone friendly.
I will discuss a few ways to make a website tablet and phone friendly:
#1. Screen Size - While most portable phones support a standard resolution of 1024 x 768, it is very difficult to view a good website at that size. On a big screen you have more room for error where as a small screen you do not. A website should not only be re-designed to fit these smaller devices, they should be designed so it is less of a chance of clicking on the wrong thing. A good website will theoretically have several different size versions of design ... one for the desktop/laptop, one for the tablet, and one for the phone. These phones also use a different browser and it always makes sense to make sure the website works well on these browsers.
#2. Website Animation - This has been a very hot topic as of late when it comes to portable devices and animations most notably Flash. Although flash is an extremely robust program and it allows you to do fantastic animation unlike most any other technology, unfortunately the I-Pads, I-Phones of this world do not support it. So the web designer will not only have to re-design the website to fit the small screen of say an I-Phone, he will also have to take out the animation or reprogram it to work on these portable devices as well. So this is only about simply taking out the flash. It has to look and feel like it will work well on these portable devices. So to really make it user-friendly, it needs a bit of an overhaul. Along with that it needs to have an easy way of inputting the information which leads me to the next point.
#3. Screen Input when Typing- While I can type extremely fast on my standard keyboard or my laptops keyboard. The keyboard on an Android Phone or I-Phone is quite different. There are no physical keys to press just buttons on a screen. I find that this is much slower to do. Also on these devices, you normally won't see the keyboard until your cursor is in an input field and you are ready to edit that field. This is where good programming needs to come in. Having the field sizes fit your tablet and phone will make all the difference is the world and reduce the amount of errors and times you will be pressing backspace on your I-Pad keyboard. It is important to make sure your web form is also customized and fits appropriately on these devices. It is also good to have the fields remember what you were trying to type or have a good auto-complete. This will make it less of a hassle when trying to find something on these devices.
#4. Screen Input when using finger to click- Another issue about screen input is that we are no longer using a mouse where we can discretely move to a specific spot and click. We are using our finger or combination of fingers to find what we are looking for. Having buttons or menu items on a webpage should be nicely spaced and wide enough so there is less room for errors. Also drop down menus can be a bit of a hassle because of accidentally clicking what is behind the menu instead of the menu item. It may be a good idea to get rid of those drop-down menus.
#5. Download Speed of Your Mobile Website - One final point I would like to make. Cell phones, I-Pads and tables all rely on cell towers to transmit signal. Given that is the case, the download speed is a lot slower than that of a cable modem, ISDN, or T1 speed. We have to adjust our websites accordingly for faster download. That may mean to cut out fancy hi-resolution graphics, animation and large files. Website pages for these devices will have to have a smaller file sizes to keep the users attention span by not driving them away due to slow load speed.
There are so many ways to access information and as web developers. We have to be aware of them and make sure it is simple and easy to use as possible when working with today's mobile technology
I will discuss a few ways to make a website tablet and phone friendly:
#1. Screen Size - While most portable phones support a standard resolution of 1024 x 768, it is very difficult to view a good website at that size. On a big screen you have more room for error where as a small screen you do not. A website should not only be re-designed to fit these smaller devices, they should be designed so it is less of a chance of clicking on the wrong thing. A good website will theoretically have several different size versions of design ... one for the desktop/laptop, one for the tablet, and one for the phone. These phones also use a different browser and it always makes sense to make sure the website works well on these browsers.
#2. Website Animation - This has been a very hot topic as of late when it comes to portable devices and animations most notably Flash. Although flash is an extremely robust program and it allows you to do fantastic animation unlike most any other technology, unfortunately the I-Pads, I-Phones of this world do not support it. So the web designer will not only have to re-design the website to fit the small screen of say an I-Phone, he will also have to take out the animation or reprogram it to work on these portable devices as well. So this is only about simply taking out the flash. It has to look and feel like it will work well on these portable devices. So to really make it user-friendly, it needs a bit of an overhaul. Along with that it needs to have an easy way of inputting the information which leads me to the next point.
#3. Screen Input when Typing- While I can type extremely fast on my standard keyboard or my laptops keyboard. The keyboard on an Android Phone or I-Phone is quite different. There are no physical keys to press just buttons on a screen. I find that this is much slower to do. Also on these devices, you normally won't see the keyboard until your cursor is in an input field and you are ready to edit that field. This is where good programming needs to come in. Having the field sizes fit your tablet and phone will make all the difference is the world and reduce the amount of errors and times you will be pressing backspace on your I-Pad keyboard. It is important to make sure your web form is also customized and fits appropriately on these devices. It is also good to have the fields remember what you were trying to type or have a good auto-complete. This will make it less of a hassle when trying to find something on these devices.
#4. Screen Input when using finger to click- Another issue about screen input is that we are no longer using a mouse where we can discretely move to a specific spot and click. We are using our finger or combination of fingers to find what we are looking for. Having buttons or menu items on a webpage should be nicely spaced and wide enough so there is less room for errors. Also drop down menus can be a bit of a hassle because of accidentally clicking what is behind the menu instead of the menu item. It may be a good idea to get rid of those drop-down menus.
#5. Download Speed of Your Mobile Website - One final point I would like to make. Cell phones, I-Pads and tables all rely on cell towers to transmit signal. Given that is the case, the download speed is a lot slower than that of a cable modem, ISDN, or T1 speed. We have to adjust our websites accordingly for faster download. That may mean to cut out fancy hi-resolution graphics, animation and large files. Website pages for these devices will have to have a smaller file sizes to keep the users attention span by not driving them away due to slow load speed.
There are so many ways to access information and as web developers. We have to be aware of them and make sure it is simple and easy to use as possible when working with today's mobile technology