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
Click blue arrows above, to see sections below for more details.
- Should your site be totally mobile or cross-device flexible?
- The design should be responsive.
- Do you need a mobile only site or can pages be zoomed?
- Pages should be less wide in pixels, or the pages should "flex" to fit.
- Total page size in bytes should be considered.
- Images should be smaller in size and byte count.
- No animation, or one simple animation can be included.
- Video should be linked and not embedded on the main pages.
- Keep the number of scripts to a minimum for page load speed.
- Use meta name="viewport" and meta http-equiv="cache-control" tags.
- Check your site's mobi readiness.
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.
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.
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.
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 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.
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.
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.
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.
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
Building For Cross-Device Compatibility
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
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
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.
Image Sizes and Byte Sizes
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
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.
Video on Mobile Sites
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
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
Anything that takes twice as long is not good. For most users a mobile / tablet / computer balance is a better solution.
- 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.
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.
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.
Also see the getting started page at Allwebco web hosting.
- Built in features
- Step-by-step instructions
- Tablet & smartphone optimized
- All standard .jpg images
- Edit with any HTML / text editor
- Free editors available
- Features & scripts built-in
- Free scripts available
- Built with HTML and CSS
- Animation optimized for mobile
- jQuery or Flash with detection
- Use you own graphics
- All source files included
- Fully editable plain text menus
- All you need to create your site
- Order with or without hosting
- Searchable support center
- SEO help
- Search engine help
- See F.A.Q. & More F.A.Q.
Click here to get started now
We offer the most comprehensive web template searchable support area on the web. Covering all topics for website creation and setup.
Only Allwebco templates include so many features and pre-formatted pages built right into the designs. Check our template features page for more details.
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.
Check out our FAQ section for specific details for website setup and creating a new site using HTML web templates.
Making a Template Mobile Friendly
Setting Up Your Website
Google Building Mobile-Optimized Websites
About.com Create a Mobile Website
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
About Webpage Templates
Create a Mobile Website
How to Build a Website
HTML Web Templates
HTML5 Web Templates
Responsive Web Design
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
mobi-hybrid® web template Android smartphone device screen views.
Click here to get started now
No monthly template fees.
No extra software required.