|
This is a "Mobi Level 1 (sub-site) HTML5" template: View HTML5 mobi Template Support View Allwebco mobi-Hybrid Web Templates Note: Some files used on the mobile website will be linked from the full site up a folder. See notes *Full & Mobile below. See the help.html located up a folder before you do the steps below. See also support details. Getting Started: Do the full site help.html steps first. Step 1: CHOOSE HOME PAGE TO USE: | More Details This template includes 2 homepage options:
EDIT HEADER: | More Details In the "picts-mobi" folder either replace or edit the "logo-mobi.jpg". Edit this graphic with your logo or image. This image is 200 x 50 pixels in size. There is a Photoshop "logo-mobi.PSD" file in the "extras-mobi" folder. The default font used is 28 points "abeatbyKai" with a letter spacing of -0.5. To maintain mobile compatibility do not exceed 200 pixels in width. If you want to change to a .png or .gif logo image, edit the "header-mobile.js" in 1 place from .jpg to .png or .gif and place your 200 x 50 logo image in the "picts-mobi" folder. The header icon color can be set to black or white in the header-mobile.js. Step 3: *Full & Mobile EDIT FOOTER: Setup with the full site. See the help.html. Step 4: *Full & Mobile EDIT CONTACT INFO (contact.htm): Setup with the full site. See the help.html. Step 5: *Full & Mobile EDIT GALLERY IMAGES: Setup with the full site. See the help.html. Step 6: SETUP CART PAGE: Forms are included in the "gallery.htm" pages. See the help.html bottom section to setup the Paypal cart forms. Important: The mobile and full site gallery cart pages are separate and need to each be edited with the same products. You can use the same generated "hosted_button_id" for the same product on the full and mobile pages. To remove the cart: Move the 3 "gallery?.htm" pages into the extras folder. Remove the links to the cart in the "resources.htm" and "index.html". Rename the "NO-CARTgallery.htm" to "gallery.htm" and add links to the home menu and resources page linking to this page. Step 7: *Full & Mobile SETUP PDF PAGE: Setup with the full site. See the help.html. Step 8: SETUP THE MOBILE VIDEO PAGE: | More Details This template uses embedded YouTube video. Setup a free YouTube account, get the embed code from each video and replace the codes in the "videos.htm". Replace only the following code highlighted below for each video: <iframe width="300" height="169" src="http://www.youtube.com/embed/6tQR8HIOU1g" Step 9: *Full & Mobile SOCIAL LINKS IN FOOTER: Setup with the full site. See the help.html. Step 10: SETUP SITE SEARCH: Open the "resources.htm" and edit "allwebcodesign.com" in the "START SEARCH", "END SEARCH" section with your website domain in (2) places. If you require a more custom search with no ads, check in your Google account for info. Step 11: EDIT PAGES: | Software choices | Notepad Editing Edit the text on all HTML pages with your information. You can use Expression Web, Frontpage, Dreamweaver, any wysiwyg HTML editor or a text editor like Notepad. Take care not to delete any of the HTML tags that surround the text. Step 12: EDIT TITLE, DESCRIPTIONS & KEYWORDS: | More Details Open each of the pages and change the title tag (at the very top of the page) and also the description and the keywords with your product or service details. You can edit one page and copy and paste to the other pages. You should use a unique title on each page. Be careful to only change what's inside the "" so you don't disturb the html code. Page titles are important so your site will get a good listing at Google or Yahoo and other search engines. Step 13: *Full & Mobile UPLOAD: Setup with the full site. See the help.html. Options: RESPONSIVE CODE: | More Details Some "Media Queries" responsive code is located at the bottom of the "style-mobi.css". FONTS, COLORS & STYLES: *Full & Mobile | More Details The "style-mobi.css" is used only for widths, heights, sizes and locations. All colors and font sizes are edited in the "corporatestyle.css". Many of the css styles in the full site "corporatestyle.css" will alter fonts and colors in the mobile site. If you make changes in the "corporatestyle.css" check both the full and mobile site pages. See the help.html for font and style editing help. THE GRAPHIC LOGO: If you do not now have a graphic logo you can contact Allwebco Design through our support center and we can create a quick simple logo for a small fee. See the custom design services support page for details. HEADER BACKGROUND COLOR: The background color for the header can be edited in the "corporatestyle.css" and changes both the full and mobile websites. HEADER ICONS: The header icon links can be edited, or turned off with a yes/no variable in the "header-mobile.js". Icon images are in the "picts-mobi" folder. To maintain mobile compatibility do not add more than 3 icons in the header. Optional black icons are included and alternate icons can be found in the "extras" folder that can be moved into the "picts-mobi" folder. MENU EDITING: | More Details In this template the home page (index.html) is the menu. To add new links copy and paste 1 line of code below itself. Be sure to back up your files before you edit them. <a href="contact.htm" class="menulink-mobile">Contact and Location</a> If you are editing only the name showing on the menu, edit only the name and not the name with the ".htm" after it unless you want the page link to change. SITE MAP: *Full & Mobile The "index.html" in the "mobile" folder acts like a site map page. This page is linked from the full site homepage (index.html) and also the full site "site_map.htm" page to help list all your pages at the search engines. IMAGES: | More Details You can replace the template images with your own. You will find all non-gallery images in the "picts-mobi" folder. Hover over any image to view the size. ADDING IMAGES: | More Details You can add new images to the template pages, however, you will want to keep your images very small in size so your website will load quickly on mobile devices. TIP: If you want to add larger images, do not add them to the homepage so your site will load quickly. ADDING SCRIPTS OR ANIMATION: Scripts, Javascripts and Flash or video can be added to any of the template pages, however, most mobile devices load these types of items slowly and\or may not have support for these applications. If adding these types of items it is best not to add them to the homepage in the template. ADDING PAGES: | More Details | Add a Gallery You can add pages to your website by copying and pasting any one of the .htm pages and renaming it to whatever you need. You can then add text links from the other .htm pages, or you can add new homepage button links. See menu editing above. PAGE HEIGHTS & WIDTHS: So all your pages will maintain a standard height ".pageheight" and ".pageheight-min" classes are included in the "style-mobi.css". Edit this height to any height you need. The page width is defined by the ".pagewrapper-mobile" class in the "corporatestyle.css". |
