10 Ways to Make Your Website More Mobile Friendly

By Dmitri Lau

Does your website offer an optimized mobile experience when accessed via a smartphone or phablet? It’s not the end of the world if it doesn’t, as modern browsers have made the experience more bearable with innovations such as pinch-to-zoom and automatic font size adjustment. If you don’t have the time or money to make your website mobile friendly, here are ten simple things you can do today to make your website more bearable for mobile users.

1. Set Form Input Attributes

If your website uses input fields to ask for the user’s name or address, then turn off autocorrect and turn on autocapitalize.

What's your name: <input type=text size=20 autocorrect=off autocapitalize=words>

If you don’t, the phone will change their name (e.g., “Erwan”) to something else (e.g., “Erevan”) if it isn’t found in the dictionary. Setting auto-capitalize to words will save them from having to toggle the capslock key for each successive name (e.g., “Ken burns” becomes “Ken Burns”).

autocorrect checkbox

Think of all the trouble your user’s will save.

While you’re at it, if your website asks for the user’s email, then use the email specific input field so that the user gets presented with the @ key without needing to switch to the numeric/symbol keyboard.

What's your email: <input type=email size=20>

2. Set a Mobile Friendly Preferred Width

Load your website in a desktop browser and resize the window to the narrowest width, while keeping your website still readable. This is your minimum viewing size. Now, get the size of that window and set it as your website’s preferred viewport width by adding this meta tag to your page’s head.

<meta name=viewport content='width=700'>

The next time your website is viewed on a mobile device, it will automatically show your website at this size with all the extraneous space on the left and right side of your website removed, so the user doesn’t need to zoom out or zoom in on their first visit.

Device width example

This website has a lot of wasted space on the right.

Device width example

This website is zoomed just right.

If your website is already built based on fluid percentages and works with all screen sizes, your job is even easier. Just experiment with a width that makes the view on a mobile device pleasant and readable and use that width in the meta tag.

3. Set Image Widths to 100%

Now that your website is set with a preferred width, some images will naturally be too wide. This didn’t happen before, because desktop screens are quite wide and most images fit within the screen with no problem.

Image width example

To remedy this, give your images a maximum width of 100% so that they are automatically resized if they get too big for the mobile device. Add this to your website’s CSS stylesheet.

img {
  max-width: 100%

If your images are set as background images and not as img tags, simply set the background-size CSS property to contain. This will cause the background image to resize when the screen is too small.

.header {
  background: url(header.png) 50% no-repeat;
  background-size: contain

Wait a minute, won’t the image lose clarity when made smaller? Not if you’re on a modern mobile device. When a user zooms in on a picture, the browser will bring back the clarity as you zoom in. However, make sure your website doesn’t have the user-scalable=no property set in a meta tag. If so, the user won’t be able to zoom in and out.

<!-- DON'T DO THIS! -->
<meta name=viewport content='user-scalable=no'>

4. Set Input Widths to 100%

After giving your images a max-width, perform a similar trick on the input fields. Simply add this to your website’s CSS stylesheet.

input, textarea {

When your website is viewed on a mobile device with a preferred width set, the input fields won’t extend beyond the edge of the screen.

5. Use Care When Disabling Submit Buttons

Does your website disable form submit buttons after the first click to prevent multiple submissions? If so, don’t do it (unless absolutely necessary)!

Unlike desktop computers, mobile devices experience frequent network disruptions. If you disable the button, the user cannot click again to re-submit. I’m not only talking about network disruptions due to poor signals or tower switching. If a user receives a phone call while submitting the form, the mobile browser is closed to show the caller screen, and the browser may not be able to recover from that interruption when it re-opens.

If you must disable the submit button, disable it for a few seconds only.

6. Use word-wrap with Long Strings

Sometimes it is necessary to display long strings, such as reference codes, bank account numbers, or even URLs. If your website is too narrow to display the whole number on a mobile device, it may extend off the edge of the screen.

Text Overflow example

To remedy this, simply wrap any long strings with a word-wrap style. Now the text will break to the next line when it reaches the edge, allowing the user to see the whole text without needing to scroll around.

Your passcode is:
<span style='word-wrap:break-word'>435143a1b5fc8bb70a3aa9b10f6673a8</span>

7. Use Extra Spaces Cautiously

When showing long strings of numbers to users, a common technique is to split them up into 5 letter groups with a blank space in between them (e.g., 43514 3a1b5), so that users can memorize five digits at a time, while typing them up in another application. For the smart user, they simply copy and paste the whole string and then delete the blank spaces.

On a desktop computer, deleting the blank spaces in a trivial matter. But on a mobile device, it is much more time consuming. To remedy this, rather than displaying blank spaces in between the five letter groups, simply wrap the five letter groups in an element with some padding in between.

.split m {
  padding: 0em 0.5em

Your passcode is:
<span class='split'><m>43514</m><m>3a1b5</m><m>fc8bb</m></span>

Now the groups will have a space in between them, but when copying and pasting them, the spaces won’t appear. This is a time saver for your users.

8. Take Advantage of Media Queries

When all else fails, you don’t want to have to adjust your website and make things smaller so that they look better on a mobile device, only to have them look too small on your desktop computer. That’s where media queries come in.

You can create custom style rules that only come into effect when viewed on a mobile device (or viewed in a small browser window) and not come into effect on your desktop browser. Simple add targeted styles inside a media query, as shown below.

/* regular css */
.tabs {
  padding: 10px 2em

@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
  .tabs {
    padding: 3px 1em

Now you can make small tweaks to make your website look good on the desktop and on a mobile device.

9. Avoid fixed Positioning

If your website has a fixed header or sidebar with its CSS position property set to fixed, be aware that when a user zooms in on your website, your header will also zoom in and potentially obscure the whole screen.

Zoom example

The easiest solution is to disable the fixed position when your website is viewed on a mobile device. You can do this with the media query method from the previous tip.

/* regular css */
#header {
  position: fixed

@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
  #header {
    position: static

10. Use Standard Fonts

Using custom fonts gives your website a professionally designed look, but users need to download large font files before your website can be viewed. On a mobile device, the download can take many seconds during which the user is presented with a blank space where the text should be.

Web fonts example

If you are using the Google Font Loader to load your fonts, you can choose to display the text in a default font first, and then re-render the page in the new font when the font has downloaded. To do this, you will need to write two sets of CSS rules everywhere you reference the custom font. One set of rules that uses the default font, and one that becomes active when the font has downloaded. This way, the user gets the best of both worlds. They can read the text while waiting for the download and they can enjoy your custom font after it downloads.

<script src='//'></script>
  google: {
    families: ['Open Sans']
<style type='text/css'>
.header {
  font-family: Arial
.wf-opensans-n4-active .header {
  font-family: 'Open Sans'

Notice the .wf-opensans-n4-active class selector that is dynamically added to the website by the Font Loader after the font has finished loading.


The ten things described in this article are meant to be small changes you can make to your existing website. They will mean that users don’t need to pull their hair out in frustration while trying to interact with your website using a small screen and keyboard. I encourage you to implement them on your website(s) today!

  • Sergi Beltran

    Nice tips, thanks!

  • s.shivasurya

    good article!

  • Paul

    For #2 the correct one is width=device-width
    See html5 boilerplate.

    • Balki

      Useful tips

  • Serkan Sipahi

    hi, good article but you have many problems(reflow, etc) with image-width:100%, see solution on smashing-magazine(3) and you can use position:fixed if you use pointer-events:none; see point 9 on

    3. )
    9. )

  • Orson Carriage

    #11 – make sure your links work on mobile. I followed the link to this article from my RSS feed on my mobile phone and got a Sitepoint 404 error!

  • Stéphanie Walter


    A few littles notes on different points in the article

    2. The viewport is way more complexe than “prefered width”, actually it has quite nothing to do with preferences. Apple’s guidelines on this are quite interesting to read to get a better understanding on this
    After some tests I saw that you’ll have to be carefull with number values. For example if you set it to 320, the Galaxy SII won’t listen to you and fallback to 360. So number values are not always respected by the devices.
    A better approach is to set the viewport to match the CSS width of the device with

    3. You might want to add height:auto to keep the image ratio when resizing it ;)

    4. If you apply the max-width: 100% and your input has some left and right padding, it would still extend outside of your screen because of the CSS box-model adding paddings (and borders) to the width of the element. A more practical solution would be to set a width:auto inside your small screen media queries

    6. might want to avoid inline CSS :)

  • Dmitri Lau

    2. The Apple developer website says, “if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing a Safari on iOS-specific web application, you should set the width to the width of the device.” – so you should only use “width=device-width” only if you are designing an iOS web application which works on the 320px screen width. Otherwise you should set the width to match your web content.

    3. Good point about the “height:auto” which is needed if you set the image dimensions in your HTML.

    4. Or you can set the input boxes to have the CSS “box-sizing:border-box” so that the width includes the padding and border sizes.

    6. Yes avoid inline CSS, but used here just to make the example simpler to understand!

    • Ray Lore

      What’s inline CSS?

  • Jingqi Xie

    I’ve only Helvetica Neue Light and Medium, and the choice of this typeface prior to Arial has caused a lot of problems with these 2 typefaces installed. I do have a local copy of Open Sans however.

  • Adam
  • George

    Two Qs about Autocapitalize:
    a) do people actually enter their names without capitalizing it themselves? I wouldn’t know that I don’t have to capitalize my name as I enter it. So not sure it would save me any time.
    b) what if you have a non-capitalized name? Ludwig van Beethoven comes to mind, as do any number of Dutch surnames. Would it try to “correct” them?
    Seems to me that autocapitalize may cause more problems than it “solves”.

  • Dmitri Lau

    a) The problem is hitting the caps lock button is relatively slow on mobile devices because of the need to search and aim. If the mobile keyboard is able to convey that it is in the capitalized state, faster than the time it takes for the user to find and reach the caps lock button, then the user can stop and skip the capitalization step and start typing.

    The indicator is clearer on Android because the whole keyboard changes from lowercase to uppercase.

    If we can get the top 100 websites to adopt this strategy, which isn’t as hard as it seems since the tweak is backwards compatible, then hopefully users will learn to expect this behavior from input fields.

    • TVSlob

      well, at first all caps sounds good for username but then they balk for a second thinking their “Caps” button was pressed and they are going to fail when entering the password. So it probably takes more time with the double-take since it doesn’t happen as often as just clicking the “caps” button when entering username. Also, most logins these days use an email address.

  • Dmitri Lau

    See my answer to @stphaniewalter:disqus above.

  • ArianeatLOLMMG

    I am personally not a big fan of using the fixed or static position because it does make things look crazy when you are in a different screen dimensions. However, for those who are not using a responsive website I can see why it is being used, good solution providing the media query to control how it appears on mobile.

  • Lana

    Thank you so much for your tips here. They helped me make my twenty ten theme mobile friendly now. I really appreciated your wisdom; especially for the background image. I have two other sites that also use twenty ten theme. Now they will keep me busy for these two sites too …

  • kamlesh sharma

    Nice approaches
    But what you think about WP Touch plugin ?
    Give your review about this and can new Bloggers can optimize their site by this plugin or use any other ??

  • Brandon Prettyman

    Thanks for putting this together, there were a few issues on the list I had not considered (like developers setting the form submission button to only accept the first click)

  • Charles Yarbrough

    I tried every option here and none changed my site on a mobile phone. Any idea how to just have a alternative style sheet for the mobile site? Or even an alternative site.

    • Dread Knight

      Yeah, I’m actually wondering about that stuff as well! Someone please enlighten us! :D

  • Magin Webdesign

    Great article!
    That or simply use WordPress or responsive ready templates :)

  • manikunis

    I have a website When i started this website it was opening good on mobile devices but recently i checkd it getting out of screen.Can you please check it and tell me what i need to do?? I have tried wptouch plugin but it is not getting installed…any other plugin i should try???

  • SillyBomb Productions

    great article!

  • Cobra Website Design

    Some great suggestions. User experience really is vital if you want people to interact and become regular users of your website. I will definitely incorporate some of your suggestions into websites that I build clients. Thanks.

  • Tarian

    “2. Set a Mobile Friendly Preferred Width” ???

    Is this the reason so many re-designed websites give a poor UX on a desktop?

    Scrolling is a pain at the best of times. Surely it is better to maximise info at first view – thereby both informing the visitor about content and thereby inviting exploration?

    Surely anything that reduces info at first view risks bounce to a competitor site?
    Reducing column width pushes content below the fold. Surely this risks “out of sight,out of mind”?

    The UX is worse when there is wasted space down the sides.
    So a website that forces scrolling – with features that could be avoided – feels like an organisation that doesn’t care about the UX.

    “10. Use Standard Fonts”
    What about font size?
    Too many re-designed sites have enlarged fonts and increased line-spacing.
    These also force unnecessary scrolling.
    If one reduces the browser zoom to 75% to 80% (to get fonts in line with other websites and browser text) – the NEXT site visited will needing zooming back to 100%.
    More unnecessary work for the desktop user.

    In short, “mobile-friendly” is an understandable direction – as long as it doesn’t impair the desktop UX – which too often it does.

  • Stacy Austin

    nice tips, thanks!



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Mobile, once a week, for free.