homepage Welcome to WebmasterWorld Guest from 54.166.39.179
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
Forum Library, Charter, Moderators: bakedjake

Smartphone, Wireless, and Mobile Technologies Forum

    
How to take a version of our PC site to Mobile
What are my options?
Propools

10+ Year Member



 
Msg#: 4524592 posted 7:07 pm on Dec 3, 2012 (gmt 0)

We would like to take a portion of our standard site designed for a desktop to a mobile version?

We don't want to re-invent the wheel or all of the content, so does anyone have any ideas/experience on a type of software which will do this?

Oh, how to test if it's a PC or mobile/tablet/iPhone/etc.?

 

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4524592 posted 7:25 pm on Dec 3, 2012 (gmt 0)

I like the google tool for assessing page speed and mobile browser compatibility. You can start by putting in the desktop URI version then when the test is presented you can click on the mobile tab to get the mobile worthiness score as well as see what the site will look like when all scrunched up for a mobile viewport (assuming you use CSS to allow your pages to shrink in width for mobile; max-width:960px; property becomes 480px in mobile). https://developers.google.com/speed/pagespeed/insights

travelin cat

WebmasterWorld Administrator travelin_cat us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4524592 posted 12:30 am on Dec 4, 2012 (gmt 0)

Propools, how is your website constructed? Is it in a CMS like WordPress, Joomla or Drupal? If so, there are plugins that will allow you to have a responsive design that will take your existing content and "rework" it for mobile devices.

Propools

10+ Year Member



 
Msg#: 4524592 posted 4:46 pm on Dec 6, 2012 (gmt 0)

travelin cat
No, it's all hand generated pages. When I run the site through google's pagespeed insights, we get good score, but I was wanting to generate something that's even more clean and user friendly....for mobile and/or tablet.
NathanielB



 
Msg#: 4524592 posted 5:25 pm on Dec 6, 2012 (gmt 0)

@Propools Have a read of this post (just found it from searching on google) [hongkiat.com...]

You could also look into this site to place on your server [code.google.com...] have a good read and make sure you test what ever you pick as I haven't used any of those services, but they sound good if it works :)

phranque

WebmasterWorld Administrator phranque us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 4524592 posted 11:28 pm on Dec 6, 2012 (gmt 0)

start by analyzing your site with the W3C mobileOK Checker:
http://validator.w3.org/mobile/ [validator.w3.org]

then dive into the Mobile Web Initiative @ W3C:
http://www.w3.org/Mobile/ [w3.org]

especially:

Mobile Web Best Practices 1.0:
http://www.w3.org/TR/mobile-bp/ [w3.org]

Mobile Accessibility:
http://www.w3.org/WAI/mobile/ [w3.org]

coopster

WebmasterWorld Administrator coopster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4524592 posted 2:18 pm on Dec 7, 2012 (gmt 0)

so does anyone have any ideas/experience on a type of software which will do this?


A little ;)

We don't want to re-invent the wheel or all of the content


Exactly. If you are developing for mobile (as in NOT an actual app) but rather phone/tablet/pc then the research work you will want to dig into is as travelin cat mentioned, buzzword: "responsive design". You can have all your original content served from a single source which means the URI remains a single resource request as well. You can use media queries to server up the proper display format.

how to test if it's a PC or mobile/tablet/iPhone/etc.?


You don't. New devices are coming on to the scene daily with different viewport sizes, etc. As mentioned earlier, you set up your site with media queries to progressively enhance the user experience based on viewport size. I think a picture is worth a thousand words. Get your Firefox browser up and running, and hopefully you are using the latest version. You won't need the Web Developer Extension by Chris Pederick but it also has some neat features for testing multiple viewports. We're going to visit the open source Initializr project demo page which is a packaging site for HTML5 Boilerplate (awesome resource as well, I'll include a link to that below too).

Firefox has a very cool feature built-in. Once you land on the page below, execute this command from your menu:
Firefox > Web Developer > Responsive Design View (Ctrl + Shift + M) to see the viewports one-by-one (selection box at top).

[initializr.com...]

If you have the Firefox Web Developer Extension by Chris Pederick loaded (http://chrispederick.com/work/web-developer/firefox/) you can view multiple viewports by clicking:

Firefox > Web Developer Extension > Resize > View Responsive Layouts

Play around a bit, read up a bit more. It may be what you were looking for. Resource I mentioned earlier:
HTML5 Boilerplate: [html5boilerplate.com...]
Note: there is a mobile boilerplate version too, but that version is really just to make your mobile version look and feel like an actual app. If you are confused on which one to use you are not alone as the question has been asked many times. The definitive answer from the project team can be found in a Google Groups discussion (note that there is a fragment hash in this url so you may have to copy/paste to get to the resource): https://groups.google.com/forum/?hl=en_US#!msg/html5boilerplate/dNbB8ZGFNcM/u94fhLeVCg8J

And finally I want to say this: there are many different opinions on which way you can take your mobile site. I read your original question and this is merely my offering on the direction you might consider.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Hardware and OS Related Technologies / Smartphone, Wireless, and Mobile Technologies
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved