Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Mobile Web - Things to consider?

Tags:

mobile

mobile-website

So I am creating my first webpage catered to mobile browsers. What are some things to consider?

  1. How do I get the resolution right for different devices (Blackberries, iPhones, iPads, etc.)? Is there a common method that people are using? Some sort of framework?

  2. How do I prevent zooming (on most touch screen phones, you can zoom in by pinching)?

  3. What are some other things to keep in mind?

like image 601
Andy Hin Avatar asked Feb 25 '23 01:02

Andy Hin

2 Answers

There are a ton of good practices to follow. Here are a few:

  1. make the content shorter and easier to read. People can only scroll so much and read so much on a smaller screen size.
  2. develop all your content in one single column. Make the width flexible (100% or close to it) so that it expands to fill the screen Do not make people horizontally scroll the page.
  3. do not use a lot of a) scripts, b) css stylesheets, c) images. These require lots of downloading and will increase the page load time and the cost for the user (as most people on mobile pay per KB for Web browsing). Consolidate / gzip your files.
  4. in your css, add extra line-height for easier reading.
  5. in your css, add extra letter-spacing between numbers in phone numbers, for easier reading.
  6. retain a link back to the full site, for those who want the full content.
  7. include a back to top link at the bottom of the page, so users do not have to scroll all the way back up.
  8. add padding to a hrefs so that it is easier to click/touch a link.
  9. use HTML5 form types so that modern browsers will use the appropriate keyboards... http://diveintohtml5.ep.io/forms.html
like image 160
Jason Gennaro Avatar answered Feb 26 '23 15:02

Jason Gennaro

Just create normal web pages with liquid layout and let the browser take care of choosing an appropriate width.

If you know your pages will scale down nicely to mobile screen sizes, give the browser a clue that it can show the pages 1:1 without zooming by default. Include in your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

I would strongly recommend not attempting to disable zooming (user-scalable=no) as it's a useful feature that you gain nothing by blocking.

like image 29
bobince Avatar answered Feb 26 '23 13:02

bobince
Sign in to Comment

Related questions

Android C++ Development with Visual Studio
Rhodes v/s Titanium

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!