We’ve recently overhauled and updated the responsive features of our Gen10 templates. You may wish to take advantage of these updates.
There were two primary updates, and a few minor updates and bug fixes.
We’ll focus on the 2 primary updates for this article.
The big one that everyone has been asking for, is a the “Mobile” menu update. We’ve added some new scripting that will ‘convert’ your ( menu top ) menu bar, into a Mobile Drop Down Menu. The advantage of using a Mobile dropdown menu is that your menu will be converted into a Mobile version and use the Mobile devices actual ‘navigation’ system. This makes it much easier for Mobile users with fat fingers, or who have trouble with touch sensitive devices. No more trying to ‘aim’ your finger tip at a little link on the page. They can now simply activate the ‘Navigation’ drop down menu, and use the navigation options built right into the smartphone.
The second major update, is a change to the viewport scaling. By default, the templates were designed to display the same on tables, desktops and mobile devices. Without knowing what the end result of building the pages for your website will look like, we thought it would be safer to default to a full screen view, and let the end users determine the scaling via the responsive stylesheet.
We’ve recieved far more requests for the templates to be ‘scaled’ automatically as it’s a bit too tedious to try to adjust the styles, so we did! With the view port scaling enabled, your website will automatically revert to the mobile presentation. This means that the components that don’t scale on mobile will be removed. The content is adjusted for easier reading, and presented in a top to bottom 1 column layout. Content in the body and or third columns will be aligned into one column automatically.
Some of the other changes, you can quickly enable or disable sections of content, or elements on the page through the responsive.css stylesheet.
A static image is loaded into the page to replace any animated / non responsive components such as the nivo slider. This will speed up the load time of the page and cut down on the battery drain on the mobile device.
Viewport scaling will be applied to any device with a viewport less than 600 pixels wide. This applies to pretty much all smartphones, but allows the tablet users to view the website in it’s full and complete form.
The reasons for these updates are based on member feedback, this being the most important. We also wanted the pages to load faster, more effectively, and allow your mobile visitors to read the content of your pages more efficiently as well.
If you’ve purchased your template prior to Feb28, 2013, you’ll need to download some new files, and add some code to your site.
Here are the steps to updating your existing website.
Step 1: Enable the Viewport scaling
You’ll need to copy the viewport meta tag code into your web pages first.
select and copy ( CTRL+C ) the following code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
paste this code into the <head> of your pages, just below the <meta name or < meta description as in
<title>Welcome</title> <meta name="Keywords" content="place your keywords here" /> <meta name="Description" content="place a description for your webpage here" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Step 2: Adding the Cookie script ( for the View Full Site ) link
Copy the following code and paste it into the ‘<!– IE Styles and Scripts–>’ , as the last script..
copy:
<script type='text/javascript' src="Site/javascript/jquery.cookie.js"></script>
paste as in the following screenshot:
Do this for each page in your site that you want to update.
Step 3: Adding and updating the responsive stylesheet and scripts
- download a fresh copy of your template package
- extract to a ‘NEW’ folder CAREFUL not to over write your existing website!!!!
- from your NEWLY downloaded template package, copy over the following files
from the ‘Site/javascript‘ folder
- jquery.cookie.js
- special_functions.js
from the ‘Site/styles/misc‘ folder
- responsive.css
Copy these files from the NEWLY downloaded template package, into the same folders of your existing site, so you OVERWRITE the existing files.
As a BONUS, you can also enable the ‘View Full Site’ link for your mobile visitors. This allows a visitor to view the regular site, using their mobile device, if they so prefer.
To do this, simply copy the following line of code into your ( Library / footer ) copyright page.
<div id="removeStyle">View Full Site</div>
