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, when setting up a new website, mobile compatibility is one important factor to consider.


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


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 and tablet 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 setup for their websites, we also offer tablet optimized designs as well as mobi-hybrid® websites, 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
This is one of the most difficult aspects of mobile device site design. Webpages should have a low total byte count for each webpage and should "flex" in width from about 300 pixels to 750 or more pixels. For some examples of highly mobile optimized sites see our mobi-Hybrid® websites. More examples of mobile design, but less flexible, are our tablet optimized web templates. These designs are generally built to be zoomed on smartphones.


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 200 to 320 pixels is the standard 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 "2014" at the top of this page you can view the latest template designs. Mobi-hybrid® 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. View some flexible template designs.


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, mp3 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 50kb, however, we do have many mobile sites that include under 30kb 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 100kb total with all images and files for quick loading speeds.

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 animation, and all of our included Flash animation includes non-Flash detection. Try a search for "jQuery" or "non-Flash" at the top of this page to view website templates of these types.


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.

Another option is to add scripts to your website to specifically detect, and then change your website for mobile devices. Although this in theory sounds like a good idea, and many IT "professionals" will tell you this is what you need, this is simply not a feasible solution for novice and part time webmasters. The following list outlines some reasons.

Disadvantages with using mobile detection scripts

  • Two or more websites will need to be maintained.
  • The detection portions of your website 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.
  • Updates will take twice as long.
  • Detection is complicated and more prone to errors.
  • As mobile devices evolve and are updated, detection scripts can easily become outdated.

"Anything that takes twice as long is not good. For most users a mobile / tablet / computer balance is a better solution."


Detection and multiple sites are 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.


Mobile-Tablet Websites


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 and Flash for dynamic animation. 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.


Why Allwebco is your best choice when starting a website



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


Support
We offer the most comprehensive web template searchable support area on the web. Covering all topics for website creation and setup.

Features
Only Allwebco templates include so many features and pre-formatted pages built right into the designs. Check our template features page for more details.

Live Examples
Thousands of professional as well as novice webmasters use our web templates to create their website projects. See some live site samples on our users list.

F.A.Q.
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
About.com Create a Mobile Website
About.com mobile
Bing Mobile Optimized
eHow Set Up a Mobile Website
Wikipedia Mobile Web
What is Web Hosting? About
What are Web Templates? WiseGeek
How to Write Web Pages for Mobile Devices
Bing How to Create a Website

More Info:
About Webpage Templates
Create a Mobile Website
How to Build a Website
Mobile Detection
Mobile Usability
Mobile Design
Website Setup
FAQ
Site Map
Product Tour
Building HTML
Web Developer
Template Features
HTML Web Templates
HTML5 Web Templates
Responsive Web Design
Mobile Overlay Detection
What Are Web Templates?
Creating a Realtor Website
Build a Musician's Website
Set Up an AdSense Website
Create a Photography Website
Developing a Business Website
Create a Shopping Cart Website

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.