How do I create a mobile friendly web site?

How to Create a Mobile Friendly Website

With the popularity of smartphones, tablets and mobile device web surfing, mobile compatibility is an important factor to consider when building a new website.

Things to Consider For Mobile Website Setup
Click arrows for more details
  1. See also How to Make Your Website Mobile Friendly.
  2. Should your site be totally mobile or cross-device flexible?
    More... Cross-device design
  3. The design should be responsive.
    More... Responsive elements
  4. Are you updating an older website?
    More... Flexible widths
  5. Pages should be less wide in pixels, or the pages should "flex" to fit.
    More... Flexible widths
  6. Total page size in bytes should be considered.
    More... Webpage byte size
  7. Images should be smaller in size and byte count.
    More... Image sizes
  8. No animation, or one simple animation can be included.
    More... jQuery animation
  9. Video should be linked and not embedded on the main pages.
    More... Adding video
  10. Keep the number of scripts to a minimum for page load speed.
  11. Use meta name="viewport" and meta http-equiv="cache-control" tags.
    More... Meta tags
  12. Check your sites mobi readiness and friendliness.

Building a Mobile Optimized Site

Below are the steps used for building any website, along with cross-device site setup considerations, options and tips to create a mobile friendly website.

Domain Names Select a Domain Name
The first step in any website setup is to order a domain name for your site. For a mobile site a "mobile specific" domain name is not required and you can use any domain type: .com, .net, .org, .biz plus many others. Check to see if a domain name is available and optionally reserve it.

Ordering Everything at Once! At Allwebco we offer many mobile friendly website designs and all of our sites are mobile optimized. You can order everything you need all at one time on our website: domain name, hosting package and a website template by browsing our web template selection. Select any design, click the "order" button and select to "order with hosting". During the order process you can choose your domain name and select hosting options.

Website Hosting Order Website Hosting
A hosting account is required to display your website on the internet. Just like ordering a domain, no special hosting account is required for mobile and you can select any Allwebco hosting package to upload your website. Submission to Google, Yahoo!, Bing, and all other popular search engines is included.

Mobile responsive web templates

Webpage Template Designs The Webpages
To display your site on PC, Mac, tablet and mobile, you will need to edit and setup some webpages. Web browsers on all device types use HTML pages for website display. HTML webpages are all plain text files and are FTP uploaded onto your web hosting area. These pages include .jpg images, animation, Javascript and CSS for font styles, layout and spacing.

When setting up a new website you will want to either create mobile optimized webpages from scratch, or look for web templates specifically designed for optimal display on not only mobile and smartphones, but tablet, desktop and laptop Windows and Mac computers. This will include mobile specific meta tags, flexible layouts and images sizes setup to allow for cross-device viewing.

"All Allwebco web templates are tested on and fully configured for optimal display on PC, Mac, tablet and mobile devices."

Allwebco template designs are used by both professional developers as well as novice webmasters. All designs are built using HTML and CSS for compatibility with all hosting companies for any type of website project. See our F.A.Q. section or website template features for more help with creating your website.

We offer many premade mobile optimized web templates that are complete websites with multiple pages and features. All our designs include step by step instructions with the download plus full site setup support.

Configured Specifically For Mobile

For users that require the very highest mobile compatibility for their websites, we offer responsive mobi-hybrid® templates and traditional websites that include a mobile version. All built using the latest HTML5 web standards code to allow for the best mobile viewing website experience.

Creating a new mobile optimized website Creating the Website
To build a website, the HTML pages and CSS style files need to be edited using either an HTML or plain text editing software package. When creating sites for mobile devices, you will want to keep image and file sizes in mind. Images used should generally be smaller than you might normally use for other media projects. See more on file sizes later in this document.

Allwebco web site templates are zip file downloads that allow you to setup your website on your computer before uploading. The download include all source files and stock images as well as comprehensive setup instructions. Our searchable support center covers all topics for creating a website including: webpage editing, editing images, meta tag editing, FTP uploading, SEO and search engine submission, plus many other topics you'll need when creating your new mobile optimized website project.

Mobile template options for website creating Choosing Web Template Options
If you want to build a site that is highly mobile friendly then you will want to avoid including Flash and drop menu features. Although all our template features are configured to work with mobile or display alternate content, these 2 features are generally not considered mobile friendly.

View the features list and see what options are built into different designs. You can also do a search above on this page for "mobile" or "tablet" to find the most mobile friendly designs.

Here is a list of some built-in features we offer: All our templates undergo regular updates for better compliance as the web evolves, and to meet the latest W3C web standards. Our designs are used not only by new webmasters, but by many developers and organizations around the world. View some live examples on our web template users list.

Website Animation

When you create a mobile website, the best option for animation is jQuery or Javascript. We offer many templates that include jQuery instead of Flash as well as many jQuery-free and Flash-free website templates.

All our animation applications and dynamic content use plain text files and standard .jpg images. Designs that include Flash are also created with detection to display alternate content in non-Flash (mobile) browsers. A "no animation" option is included in all designs to easily turn off all animation and show only static images and text for the highest mobile compatibility. No extra software is required to edit any animation. All files used are "linked" standard .jpg images and plain text files, with the option to use your own graphic logo creation.

Search Engine Promotion and Keywords with mobile Mobile Search Engine Promotion and SEO
Search engine optimization and submission are just as important when you create a mobile website and will be setup the same was as they are for any normal website. The steps are: Other options might be to include an XML site map to make sure all your pages are listed, and using a "robots.txt" to tell search engines where your site map page is and other server side controls.

Free submission to all popular search engines is included with all our hosting packages.

Testing mobile Testing
With so many devices now available as well as regular updates, checking your site on all devices can be a daunting task, however, the main concerns should be that all your pages are error free, and that you site displays properly on as many devices as you can check them on.

Popular devices and browsers to consider are: iPhone, iPad, Android, Windows Phone and Blackberry.

Click here to get started now
Creating a responsive mobile website using Allwebco web templates and hosting

Building For Cross-Device Compatibility Back to Top
Choosing how your site should work requires careful consideration. Whether you choose responsive or a full site with a mobile version depends very much on your business type and amount of information you need on your website. Choices include responsive design, using a second site for mobile, or using a full mobile website. To view the pros and cons of each see Choosing Responsive or a Mobile Version. In any case, the webpages should have a low total byte count on each page (small size and few images) and should "flex" in width from about 320 pixels to 750 or more pixels. See our mobi-Hybrid® websites to view responsive and mobile web templates and see mobile sub-sites to view designs that include a dedicated sub-website for mobile viewing located in its own folder.

Making the Design Flexible Back to Top
Because of the vast number of devices available in all different sizes and screen resolutions, the best solution when creating a website is to concentrate on including a flexible or "responsive" width. Page widths more than heights are important for optimal viewability. CSS code should be included for both a maximum and a minimum page width so your site can flex or respond to fit on each device (See W3Schools). Page width on iPad is 768 pixels, however every device browser is different and smartphones as well as Android and Windows tablets should also be considered. With zooming available on most devices a good general rule is to set the CSS min-width to between 750 and 900 pixels with a max-width of no wider than 1500 pixels.

For "mobile only" designs, a webpage width of 320 pixels is the standard maximum recommended width, however as devices are continually evolving this width is no longer a hard and fast rule.

All our latest template designs conform to the above configurations. If you search for "2015" at the top of this page you can view the latest template designs. Our Mobi-hybrid® and responsive templates flex to right around 300 pixels minimum and tablet templates flex down to 766 page widths. All our other templates are set to flex between 750 to 900 with some max widths set to 100% of the browser.

Updating Older Websites Back to Top
Perhaps you setup your website many years ago. Technology has changed drastically with mobile and tablet viewing now being of more importance, particularly for SEO. You do have some options if you plan to update. Whichever option you choose, you should carefully consider your options. If you update with Media Queries it can be an involved task requiring learning how this type of css code works. If you go with a mobile version sub-site you will need to maintain two websites. If you choose to do a full update, you may want to consider using a sub-site first. This can allow you to ease into responsive design by adding a mobile complaint area without disturbing your current website. Once you have the sub-site completed you can optionally move this site into your top level hosting folder and make it your new website. See Choosing Responsive or a Mobile Version for a comparison of these options.

Responsive Minisites

File Sizes and Load Speed For Mobile Back to Top
One important consideration while creating a mobile website project is the size of the images and other files. Long ago, the average recommended page size was as low as 60kb. As internet connection speeds continue to evolve, this number is constantly changing. Of course the faster your site loads the better and more files linked on each page as well as images all can slow down the loading speed of any website.

The average page size at the time of this writing is now just over 1 meg. This does not however mean you should create your site right at this number. In our designs we try to keep the page sizes around 300kb or less. We might suggest that you not go over 1 meg but try to have an average page size under 1/2 meg total including all images and linked CSS, javascript, video and other media files.

Image Sizes and Byte Sizes Back to Top
With any mobile design another consideration is how large your images are in height and width as well as in byte count. For our mobile sites the largest image we might include may be around 100kb, however, we do have many mobile sites that include under 70kb for the entire homepage including all images. Mobile devices and ISPs increase in speed every year and offer more bandwidth so these numbers are only a general rule. Our recommendation for the highest mobile compatibility is to keep your homepage under 500kb total with all images and files for quick loading speeds.

Another consideration is "tap target" size. This includes linked images and buttons. In general the "tap targets" should be a little larger than on traditional websites. Our tests indicate that buttons and icons should be no less than 40 x 40 pixels in size.

When saving your images, select medium to high quality depending on the type of image and placement on the page. Usually background images can be saved at a lower quality. You may need to do some experimenting while saving.

Animation and Dynamic Elements in Mobile Sites Back to Top
Mobile device connection speeds can be slower than direct wired computers so the number of dynamic elements and animations used on any website should be limited for faster loading speeds. Animation applications types are Javascript, Flash and jQuery. jQuery is a popular set of Javascript library commands that can be added to any website. Flash is a browser add-on or plug-in. While Flash is a much more powerful way to add webpage animation, jQuery works in more mobile environments because some devices, like the Apple iPad and iPhone, do not offer the Flash add-on. When using Flash, detection should be included to display static content in non-Flash enabled browsers.

With either animation, the total byte count (file size) may use two or more times the amount of bandwidth a static element uses. When making your site mobile friendly try to keep the number of animations limited to only one or two.

All of our templates include some Javascript. We offer many web templates with jQuery or CSS3 animation. CSS3 allows for simple animation in newer and mobile web browsers.

Video on Mobile Sites Back to Top
HTML5 and YouTube video can be added to any website. It can be embedded directly on a page like at YouTube, and you can generate YouTube code and add it to your website or template. This can however cause slow loading speeds. If your site is using a video for instructional or product/service information, it may be better to instead link to another page or directly to a movie file like an Mp4 from your pages (Mp4 is the most compatible video file type used on the Internet). See video options in support.

Search for "video" at the top of this page or see the features list for templates that include video.

Mobile Device Specific Meta Tags Back to Top
There are some meta tags that are read by most mobile devices to configure the width of your site and also to make sure that, if your site is frequently updated, the latest content will always display.

The following "viewport" meta tag will "squeeze" your webpages to the resolution width of the viewing device zooming the entire webpage as much as possible while still displaying all content. For more available options for this meta tag see mobile meta tags at the Apple Safari Developer Library.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Because mobile devices clear the cache less often, the following meta tag tells the browser that cached content will expire after 20 minutes. This tag should only be used on websites that are frequently updated.

<meta http-equiv="cache-control" content="max-age=1200">

Detecting Specifically For Mobile Devices
In the section above the "viewport" meta tag is outlined to allow a website to somewhat conform to mobile devices. For most sites this is a good general way to be more mobile friendly but will only work if your site can shrink to under 320 pixels in width.

Another option is to add scripts and css Media Queries to your website to specifically detect, and then alter your website layout for mobile devices. This is called responsive web design or "RWD". In some cases this may not be a feasible solution for novice and more casual webmasters or websites with a lot of information. The following list outlines some reasons.

Disadvantages with using mobile detection scripts

  • If the site includes a lot of text, webpages may be too long and unreadable on mobile.
  • Large tables of information will not display well on mobile.
  • Updates generally take more time.
  • Detection is complicated and more prone to errors.
  • Areas of the webpages configured for mobile will not be visible during editing so you will need to edit and/or test on multiple devices or computers, even with the smallest updates.
  • As mobile devices evolve and are updated, detection scripts may become outdated.
  • See Choosing Responsive or a Mobile Version.

"Small businesses can not afford to keep a web designer on-staff and need a simple website solution"

Detection scripts, multiple sites and complicated responsive code may be great for large corporations, but small business needs a better solution. Any person that is trying to startup or run a small business simply can not afford to spend twice as much time working on their website.

HTML5 Device Optimized Website Templates
Built for simplicity, Allwebco HTML5 website templates are plain text webpages used in concert with plain text support files, for styles and scripts. Our sites are pre-built complete websites intended to allow professional web developers, as well as novice webmasters, to plug in their text content and images into the webpages to create a website. Allwebco tablet and mobile optimized templates are created with HTML5 code for the highest browser compatibility. See also what are website templates.

Responsive Minisites

Understanding HTML
HTML webpage code allows plain text files to display as webpages in any browser software as a formatted site with text content, .jpg, .gif and .png images, scripts and jQuery, animation, contact forms, video, news feeds and other site elements. HTML is the most popular language code used by web browsers to dynamically format and then display website pages on the Internet.

The "HTML" stands for "HyperText Markup Language". It's basically a set of "tags" or "codes" used in plain text files to display typeface, images, hyperlinks, video and other elements you view in web site documents. The text, images, forms, video and objects are embedded into a website for an interactive user experience. The webpage you are viewing now is created with HTML code. HTML is not compiled like programs are, it's plain text that uses the scripts and applications already built into the web browser software.

All of our website templates are created using HTML code with CSS for styles and Javascript, jQuery and CSS3 for dynamic animation. Our mobile designs rate a 97 to 99 out of 100 at Pagespeed Insights for "user experience" and pass the Google Mobile Friendly Test. For more info on HTML and website building see HTML at Wikipedia or the W3C - World Wide Web Consortium.

Also see the getting started page at Allwebco web hosting.

Teal Mobile Compliant Web Template
Emily Gray Website Sample
Mobile Help
Cherry Business Mobile
Sample mobi Black

Why Allwebco is your best choice when starting a website
  • Built in features
  • Stand alone websites
  • Built with HTML and CSS
  • Step-by-step instructions
  • All source files included
  • All standard .jpg images
  • Use you own jpg graphics
  • Tablet & smartphone optimized
  • Edit with any HTML / text editor
  • Fully editable plain text menus
  • Order with or without hosting
  • Searchable support center

Click here to get started now
Browse templates for any website setup project
Web templates to create a website

Only Allwebco sites include so many built-in features and pre-formatted web pages. See template features for more information.

We offer the most comprehensive web template searchable support area in the industry. Covering all topics about webpage creation and site setup.

Live Examples
Thousands of professional, as well as novice and first time webmasters use our designs for their website projects. View live website samples.

Check out our FAQ section for specific details for website setup and creating a new site using HTML web templates.

See Also:
Making a Template Mobile Friendly
Setting Up Your Website
Google Building Mobile-Optimized Websites Create a Mobile Website
Guide for How to Build a Website
Bing Mobile Optimized
eHow Set Up a Mobile Website
Wikipedia Mobile Web
What are Web Templates? WiseGeek
How to Write Web Pages for Mobile Devices
Bing How to Create a Website

HTML Web Templates
HTML5 Web Templates
What Are Web Templates?

Site Building
Site Setup Basics
How to Build a Website
Create a Mobile Website
Creating a Realtor Website
Build a Musician's Website
Create a Shopping Cart Site
Set Up an AdSense Website
Setup a Photography Website
Developing a Business Website
Building HTML

Mobile Optimized
Update For Mobile
Mobile Site Usability
Mobile Sub-Sites
Mobile Version Sites
Mobile Overlay Detection
Responsive Web Design

Developer Grade
Stand Alone Design
Downloadable Websites
Site Builder Alternatives

Site Map
Product Tour

Design Layouts
Template Features
Mega Menus
Drop Menu Styles

This or That
Responsive vs Sub-Site
Builder or Templates

Device Views:

mobi-hybrid® web template Android smartphone device screen views.

Click here to get started now
Browse templates to start creating your website

No monthly template fees.
No extra software required.

Building Mobile Websites