2 collumn fluid layout for mobile site front page

i created a mobile site front page in dreamweaver that use s a 2 collumn fluid layout with a menu on the left and text content on the right for a better more informative landing page experience then to be brought straight to the activity feed which is what was the front page b4

the live version i created is at www.dreadlockssite.com/m

instructions:

i attached the html file as is used on my site, you will have to edit it

changing the links and text and title

1st open your mobile site in a browser you can do this on a desktop instead of mobile by adding /m after your sites domain (like the above link) now click each link in the drop down menu that you want in the front page menu copy the url and edit the links in the ul class nav section (looks like this)

<body>

<div class="container">
<div class="sidebar1">
     <ul class="nav">
      <li><a href="http://www.dreadlockssite.com/m">Home</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1331052">Latest activity</a></li>
      <li><a href="http://www.dreadlockssite.com/m/discussion?id=3754945:Topic:479">Dreaducation complete dreading guide</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1347153">Featured forums discussions</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1331133">Forums</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1347365">Featured photos</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1330857">Photos</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1347366" >Featured blogs</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1330960">Blogs</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1380551">Featured groups</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1372333">Groups</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1372283">Events</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1347268">Featured members</a></li>
      <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1316046">Members</a></li>
           <li><a href="http://www.dreadlockssite.com/m?id=3754945:MobilePage:1377351">Change site language</a></li>
      <li><a href="http://www.dreadlockssite.com/m/signin?target=/m&cancelUrl=/m">Sign in or join now</a></li>
    </ul>

thats your left sidebar links

just below that is the main content area edit that with whatever content you want on the right side

change any colors or whatever in the css

now copy the entire code

go to your mobile site controls in the dashboard, make an html page edit the html title to home

paste in the page code below that save, drag to the 1st position and save settings

test in multiple phones just to be sure the only issue u might have is long wi[ords in the menu might overlap u cab then either specify an even smaler font or adjust the left and right collumn widths remembering that they must be in % as i have em at 25 and 75 % now u could change it to 30 70

edit: theres 2 files attached the second 1 i changed the heading anbd menu fonts to em to make em compensate fir diferent screen sizes

Favorite

0 members favorited this

Attachments: