Welcome to WebmasterWorld Guest from 54.162.109.245

Forum Moderators: bakedjake

Message Too Old, No Replies

How to take a version of our PC site to Mobile

What are my options?

     
7:07 pm on Dec 3, 2012 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 8, 2004
posts: 562
votes: 1


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.?
7:25 pm on Dec 3, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:June 14, 2010
posts:985
votes: 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). [developers.google.com...]
12:30 am on Dec 4, 2012 (gmt 0)

Moderator from US 

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

joined:Feb 28, 2004
posts: 3140
votes: 2


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.
4:46 pm on Dec 6, 2012 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 8, 2004
posts: 562
votes: 1


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.
5:25 pm on Dec 6, 2012 (gmt 0)

New User

joined:Dec 3, 2012
posts: 24
votes: 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 :)
11:28 pm on Dec 6, 2012 (gmt 0)

Administrator

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

joined:Aug 10, 2004
posts:10551
votes: 10


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]
2:18 pm on Dec 7, 2012 (gmt 0)

Administrator

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

joined:July 31, 2003
posts:12537
votes: 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): [groups.google.com...]

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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members