What is a Css Mobile Detection Overlay?

Responsive css code is used on some template models, and in our addon, to allow the webpages to display an overlay link box selection. The code detects the browser width using css media queries. If the width of the browser is less than the "threshold" (or breakpoint) you set (320, 480 or 640 pixels), the hidden div pops up in the center of the page. If the width is a standard PC or Mac browser, the div will be hidden unless the browser width is below the mobile device set threshold. The overlay box links to an integrated mobile sub-site.

Web Templates That Include a Detection Overlay

The following web templates also include a mobile version sub-site

• Our Earth and Bizzy-DM drop menu designs
• Budget business web templates
• Photography web templates with color themes
• Business photography drop menus
• Drop menu with video
• Color theme drop menu with video
• Davinci & Monet
• Available as an add-on for any website

Features:

• Compliant in all css3 web browsers and smartphones.
• Editable width threshold (768, 640, 480, 320, etc). Set the box to popup at the desired width in the global css file.
• Editable link text, replaceable icon images.
• Editable colors using standard css code.
• Works on any website.
• Fully SEO compliant (See section below.)
• Can be added to some or all webpages on the site.
• Available in select Allwebco templates or as a website add-on.

Viewing the Overlay in Action

To view a working overlay and see the dynamic response, go to our business drop menu templates, click any thumbnail to view a sample website. With the site open on the homepage make your browser width narrow and the overlay will popup on the page. Make your browser width wider and the overlay disappears using css code. A CSS3 compliant browser is required (IE9+, Google Chrome, Safari, Firefox, Opera).

Drop Menu With Adaptive Mobile & Overlay

SEO Benefits

Because the overlay uses only css, with no Javascript or jQuery for the detection, your website will rank normally in search engines like Google and Bing. The css simply hides the overlay until the browser width is narrow enough to be a mobile device. A Javascript is included to allow the overlay to close, or hide, when the user clicks either the close button or away from the link box.

Custom Smartphone & Tablet Setting

You can set the overlay "threshold" from 320 to 480 for mobile only, 768 for mobile and some tablets, or we use a default of 652 in the templates so it will not display on tablets but will display on all small screens. Optionally you can set the threshold or "breakpoint" width to any number you prefer.


Website Add-On
The css mobile overlay is available as an add-on script for any type of website. See Css mobile detection overlay


Free Auto Redirection Available
Templates and addons that include the mobile overlay use passive redirection. Users select the mobile version by clicking the overlay box. We also have available, free by request, an automatic smartphone jQuery redirection script. contact us to request this download. For more details see Automatic Mobile Redirection in support.


About Our Designs
Allwebco Design offers a selection of "complete" HTML website template designs built to allow for the highest compatibility on both PC and Mac desktop as well as laptop computers, tablet, smartphones and other mobile devices (iPad, iPhone, Android, etc). Our website designs are built with multiple pre-formatted web pages, drop menus, site search, contact / quote forms, image galleries, video pages, PDF downloads page and more all integrated right into the designs. No other web template company offers these types of complete downloadable HTML / CSS websites at our affordable one time prices.

Only Allwebco Website Templates include an array of features and scripts built right into the designs: contact / quotes forms, photo galleries, dynamic jQuery animation, site search, mobile sites and more. See site features for more details.