Tips for Designing iPhone Apps and Web Pages

In the past years, mobile phones took over us whether we realize it or not; we use them a lot more than we could have imagined a few years ago. Talking and writing short messages are not the main ideas behind producing and using a phone. Browsing the internet, playing, getting in touch with everyone faster, taking pictures and using tens of applications each day is what every smartphone manufacturer thinks about when producing such device.

But until the internet is going to be ready for mobile phones, the Web Designers have a lot of work to do. Designing a web page for a phone, may it be an Apple product or not, is not an easy task. You do not need hard-coding knowledge, but HTML and CSS has to be known basically in order for designers to develop a suitable web page for smart phones.

I am going to give you some tips on designing your first iPhone web page. After you do it three or four times, these things will be normal to you. But for someone who is just trying to figure out mobile web design, these tips will be golden. Finding out about them on your own is not fun at all; it takes a lot of time and nerves. It gets your productivity on the low side.

1. Do not use Pixels instead Percents.

When you design a full-sized web page, you don’t have to worry about that. Just make an 800px wide wrapper and fit everything in there. There are few computers out there with a smaller screen width than 800 pixels. So, regardless of which computer you are going to access the page from, it will fit in the screen.

Image by shutterstock

With mobile phones, it is different. You have a wide range of screens from 100px wide to 300px wide or even more, if we think of an iPad. If you have a wrapper with a fixed width, your web page is going to be displayed weird on most of the devices. Instead, you can use a flexible wrapper. Set your page’s width at 98% and have a margin of 1% on each side. No matter what phone you see this website on, it will fit in. Also, avoid pixels when you are setting a margin, padding, height, image dimensions or any other variable.

2. Keep it Short

Mobile web page is not for users to go and spend 20 minutes reading your self-glorifying “about me” page. It’s for the user to access fast of any information he wants. Don’t put in a lot of text. On a mobile phone, getting to the information you want should happen in less than three clicks and less than 20 seconds. Otherwise, users will jump away from your page faster than they have arrived.

If you’re selling a product, have a shorter version of the description you have on the main web page. The main idea with the mobile site is not just to sell, but to convince the reader that your product is what he needs. From there on, he will know what to do if he decides to purchase the product.

3. Divide Text into Paragraphs

This is a general rule in journalism and blogging; but on paper or a large screen, the text can be read on any way. It’s just on the phone that the rules change. The smaller the screen is the more difficult it will be for a user to read the text. You can solve this problem by dividing text into chunks or placing text on different pages. As stated earlier, do not abuse of too much text. If possible, do not even have the same text as on the full-sized web page. Create different headlines and text for the mobile web page.

4. Navigation should be placed below

This is an important rule: do not place the menu on top. The headline and content should appear first, and then the menu. Don’t worry if there is not enough place for the navigation on the screen, users will have no problem scrolling – though do not make them scroll too much. And don’t worry they will not get lost either. They know the menu has to be somewhere and where would it be if not under the
content?

Image by shutterstock

The navigation should be placed at the bottom for a second reason too: If there is a touch screen phone, it is uncomfortable for the fingers to click on something placed on top. All the well-designed webpages have the navigation at the bottom because it is easier to click on the links.

5. Use as Few Images as you can

If it is a presentation website for a pub, you need to put some images in. You also probably need to put a logo, regardless of the purpose of the page; but not more than that. Do not overuse many images. Not all the mobile users are on wireless. Some of them have a limited amount of bandwidth each month and they don’t want to exceed the limit otherwise, they will pay a lot of money.

Image by shutterstock

Images must be small, fast to download, and the user should not be forced to use them. Before clicking on a link, you have to clarify to the visitor that he is going to access a page with pictures. No pictures on the home page, no useless pictures with a “@” sign in the contact page. None of that, otherwise the whole purpose of the mobile web page is gone.

6. Avoid Heavy Elements

Users do not want to see Flash, JavaScripts, frames or tables on your mobile web page. The pages load slower and you might end up with a website that looks weird, because of lack of support from some operating systems. Though you can’t consider them as heavy elements, do not expect to have the same wide area of fonts available at your disposal. Keep it basic.

7. Link to the Full-sized Web page

The purpose for a mobile phone web page is to load faster and to be even more accessible than a normal home page. But, if users are connected to a fast wireless network and do not have a limit of bandwidth, they may choose to visit the full page. Allow them to do that by placing a link to the full webpage somewhere in your page. It can be in the footer, in the Contact Us page or have a separate button for it in the navigation. Regardless of how you do it, it’s a must. And make the visitor know he can choose to access the web page from the mobile version.

When I first started designing mobile web pages, I didn’t have so much knowledge of different facts such as the ones I have stated above. Before jumping into the code, you have to realize developing a web page for mobile phones is totally different than doing it for a large screen. Keep in mind that the screen is small, speed is important and information should be found in an instant.

You don’t have to be a coding ninja; you don’t even need to know more than HTML and CSS – but you have to know them by the book. If you are able to design within those guidelines I have set, you will have no problem in developing great web pages for iPhone or any other smartphone currently available out there.