Making & Keeping Your Website Mobile Friendly
Tips for template mobile friendliness and compliance
Tips For Mobile Compatibility:
All Allwebco templates starting with a copyright date of 2011 and later are tested in and specifically configured to be as mobile compatible as possible. Design widths and code are setup for, and tested on, devices like iPad, iPhone, Android, Windows Phone, and others. Below are some tips to keep in mind while setting up your website to keep the template as mobile friendly as possible.
When setting up your website template, the following are some items to keep in mind.
Quick Mobile Tips List:
(Details for each tip are below this list)
- For mobile compliance load speed, font sizes, and screen size (webpage width) are the main concerns.
- Include some simple Media Queries to add responsive elements to your website. See Media Queries Responsive CSS Code.
- Add more top and bottom padding to your menu buttons to increase the button height in your css file.
- Edit the menu text font larger. [ view details ].
- Increase the general font sizes in your css file. [ view details ].
- Decrease page width by decreasing the menu width. [ view details ].
- Decrease the page width. Remove any larger images that may be holding the page too wide. Shorten menu names. Check area widths in the HTML code. Use css to make images responsive.
- Improve load speed. Decrease the number of images, scripts or videos per page.
- Try to get the minimum page width below about 970 pixels or even better under 768 pixels.
- Error check your pages. [ view details ].
- Request a new download if you have an older template. Many, but not all Allwebco templates have been updated to HTML5 and made responsive or include a mobile version sub-website.
- Rebuild your website using a new web template that includes a mobile sub site or is a responsive design.
- See also Responsive Editing.
- Screen Width: Try to keep your website maximum width below 1024. A width of 768 is ideal. Allwebco templates are setup to be between 750 and 866 pixels in width.
- Do not make any images wider than about 750 pixels.
- Do not add new tables or tables cells that will make your pages wider.
- A "pagewidth" class is included with most templates. Edit this width only if necessary. Some templates may have the page widths set in the HTML pages.
- The default width for the iPad tablet is 768 pixels. If your page is wider, say 1024 pixels, the iPad browser will zoom out your pages to display all contents in iPad.
- Images: Keep your images small in size and kb size as well as height and width.
- Save your images at high quality, but not at the highest quality. Try to balance the quality when saving between small file size and acceptable viewing quality.
- When adding new images to pages keep the sizes smaller.
- Save background images at medium quality.
- Keep the number of images on a page to a minimum.
- If you have an image animation, try to use the smallest image in kb size as the first image in the slideshow.
- Audio / Video: Items like video and large animations should not be added with an autostart to the homepage (index.php or index.html) to maintain compatibility on the most devices and computers.
- Add videos to subpages, or add links to open videos.
- Keep audio files on the homepage under 2 megs in size. 1 meg is best.
- Flash: Detection is included in the default template Flash animation.
- If you add new Flash, be sure to add detection to display alternate content in non-Flash browsers.
- The template .js files can be set to test the detection with the "yes/no" for the "var showflash" using a text editor.
- Do not add more than 3 or 4 animations per page.
- Drop Menus: When setting up your drop menus, be sure you include, and test, the top level button links for devices that do not support drop menus.
- Scripts / Animation: Add few animations and scripts to the homepage. An excessive amount of scripts or animation can slow down load time on a website.
- Adding a Mobile Sub-site: You can optionally give your visitors a choice to view your normal or mobile website. See support section Adding a Mobile Website for options.
- Meta Tags For Mobile: Allwebco mobile and iPad/Tablet template models include a meta tag name="viewport". This meta tag can be used in any template, however, in some cases it may cause problems depending on the css layout. If you add a name="viewport" tag, be sure to test on mobile and tablets.
- More Info: Although it is mostly for programmers and site administrators, see also Mobile Web Application Best Practices at W3C.
Once you have your template website setup you may want to test on as many mobile devices as possible. Below are some popular platforms to test on.
Some popular mobile operating systems are:
Some popular mobile browser software is:
- Windows Mobile
- iPhone platform
- Palm OS
- Mobile Linux
- Symbian OS
- Safari for iPhone & iPad
- Android browser
- Opera Mobile
- WebOS browser (Palm devices)
- BlackBerry browser
- Internet Explorer Mobile (Windows Mobile devices)