CODEWITHSUNDEEP
phpjavascriptcssxhtmlsmartphone
Amr
Amr

Reputation: 5159

What are the points that I should keep in mind when building a website to properly appear on smart phones?

I'm going to build a website using xhtml, css, javascript and php. And this website should properly appear on iPhone and other kinds of smart phones just like it will appear on computers, so I want to konw what are the points that I should keep in mind when I start building such website.

Upvotes: 1

Views: 92

Answers (2)

Nick Lockwood
Nick Lockwood

Reputation: 41005

1) Use the <meta name="viewport"> tag to correctly set the scale so that your content fills the screen

2) Avoid internally scrolling areas such as iframes or divs with overflow:scroll as these do not work on iOS4 and earlier, or most versions of Android

3) Avoid position:fixed to pin navigation to particular parts of the screen as this does not work on iOS4 and earlier, or most versions of Android

4) Don't rely on hover or rollover-based interaction like drop down menus that appear when you mouseover because these don't work well or at all on touch-based devices

5) Avoid small text or links close together because if your page is 800px wide and it's being shrunk down to a 320px screen, these will be hard to read or tap.

6) Don't use Flash

More generally, you have a choice for how to approach this:

1) Make a single site design with nice big text that can be used well when scaled down to a small screen

2) Design two layouts for your site and use JavaScript or CSS media resolution queries to switch stylesheets between the mobile and desktop versions, or

3) Make a so-called liquid layout where the width can be scaled gracefully for different screen sizes without zooming

Upvotes: 3

Tadeck
Tadeck

Reputation: 137420

You should:

  1. Make your list of smartphones more specific. There are plenty of them and it is basically impossible to create advanced, interactive site working correctly on every device that matches at least one definition of smartphone.
  2. Constantly test it on the device, even official emulators do not work exactly as device works (I believe Apple suggests testing on device instead of relying on their emulator).
  3. Pay attention to your scripts using JavaScript events such as click or hover - they may be more complex on your targeted devices (eg. touchstart, touchend, touchmove to name few) and make sure you take touch-enabled events into account.

If you have already defined your target phones, you can check if eg. some mobile JavaScript frameworks meet your needs (such as Sencha, but I found out it does not work on at least one Symbian phone model I tested).

You should also check compatibility tables showing which specific feature you want to use is available on which smartphone & browser. This should save you a lot of time.

Upvotes: 2

Related Questions