How to convert a website theme to mobile version

by dannyogolo

Posted: 12 years ago 23 replies

WEB DESIGN

Im in the process of having a WordPress theme modified for me for use in a classifieds website.
But top on my agenda is to have a mobile version of the website also.
Now knowing he will just mod the theme and hand over to me, I am asking for a service/Plugin that will/can convert the contents of the main PC site to mobile friendly version. I dont want to be doing 2 jobs everytime by doing the normal version and the mobile version.

I know about Mobile Redirect Plugins which I like and will also use, but that is not my question pls.

I expect good replies.

Thanks,

#convert #mobile #theme #version #website

dannyogolo

12 years ago

[DELETED]

{{ DiscussionBoard.errors[5240450].message }}

drewhowell21 12 years ago

Take a look at the WPtouch plugin for Wordpress. I think it should do what you want.
- Thanks
{{ DiscussionBoard.errors[5242513].message }}
WordPressurize 12 years ago

Originally Posted by dannyogolo

I expect good replies.Thanks

Hi Danny, the absolutely best way (with very few exceptions) to implement a mobile version to your website is by using something called media queries.

Media queries are used in the CSS of the website, and advise browsers how to display the site on different sizes of screens. Visit 2011 Sasquatch! Music Festival and change the size of your browser window to see the effect. Or, visit the site on your computer, and then on your smartphone.

If your developer knows what they're doing, this isn't a foreign practice for them. I've implemented this for a few clients (the ones willing to pay for a mobile version).

The best part of using media queries is that the process and implementation is a core part of the site, and only revises the site's CSS file, nothing else. This means that it has a lightweight footprint, it doesn't bloat your website with an added theme and/or plugins, and it takes directly from your theme, so your branding is simply consistent.

[Update] Another benefit to using media queries is that mobile traffic still goes to the same pages that regular traffic does, so you're not losing out on SEO by splitting the pot.
- [ 1 ] Thanks
Signature

"The Dominance characteristic values competency, results, and action. The Influence characteristic values action, enthusiasm, and relationships. The Steadiness characteristic values relationships, sincerity, and dependability. The Conscientiousness characteristic values dependability, quality, and competency... it is necessary to give them the thing they value most." - from Convert, by Ben Hunt
{{ DiscussionBoard.errors[5242973].message }}

Jay Moreno

12 years ago

FYI the absolute best way to serve mobile content is to use USER AGENT DETECTION to deliver the most compatible and optimized content to a mobile device whilst similar to css media queries its takes things just a little further to give your end user the truly best mobile experience.

The primary difference between CSS media queries and User Agent Detection is that with the CSS it basically changes the way the content looks, but it doesn't optimize the content just the look. With UAD you can reformat content based on the type of device or browser its using and literally optimize the content specifically for mobile dynamically.

Not all mobile devices are the same, you have tablets, smartphones, feature phones and non feature phones. Whilst the latter possibly don't access the internet as often as perhaps feature phones or smartphones, all mobile browsers are NOT the same, and all handle content differently, there really is no one glove fits all - the same even applies for desktop browsers too. However streamlining the device detection will enable you to deliver the most compatible content and provide the best user experience.

Whilst media queries will work for the most basic of sites anything beyond that will without a doubt require User Agent Detection.

People dismiss user agent detection and often dont use it becuase they think every time a new individual device comes out the user agent list needs to be updated... thats just not the case, well it depends on your approach and your understanding of user agent grouping.

User Agent detection is sorely under used - in most instances its implemented just to redirect mobile visitors when instead it can be used to create the ultimate mobile user experience. Yes it takes a little extra time and know how to implement but it comes down to what your providing... if its a quick this will do or a full on no holds bar mobile site.

At the end of the day everyone to their own

[ 2 ] Thanks
2 replies

Signature

Sorry, I am too busy helping people to think of a cool signature!

{{ DiscussionBoard.errors[5243087].message }}

WordPressurize

12 years ago

Originally Posted by Jay Moreno

...The primary difference between CSS media queries and User Agent Detection is that with the CSS it basically changes the way the content looks, but it doesn't optimize the content just the look...

...Whilst media queries will work for the most basic of sites anything beyond that will without a doubt require User Agent Detection...

@Jay You may want to advise of a scenario in which UAD would work better than CSS for optimizing content. Because, though I do know of exceptions where UAD would outperform media queries, they are definitely not common ones.

Also, I'd suggest to you that it is not media queries that would work for the most basic of sites, but rather UAD that would be better for the most advanced of sites.

[ 1 ] Thanks
1 reply

Signature

"The Dominance characteristic values competency, results, and action. The Influence characteristic values action, enthusiasm, and relationships. The Steadiness characteristic values relationships, sincerity, and dependability. The Conscientiousness characteristic values dependability, quality, and competency... it is necessary to give them the thing they value most." - from Convert, by Ben Hunt

{{ DiscussionBoard.errors[5243201].message }}

Jay Moreno

12 years ago

Originally Posted by WordPressurize

Any site that uses just HTML/CSS i would consider basic - any type of dynamic site pulling data from a database would for me be considered anything from intermediate to advanced.

If you are already using something like PHP it makes sense to use UAD and conditional statements and re-usable functions to dynamically ensure your content is mobile optimized for the device accessing the information.

With UAD you can completely prevent javascript or certain mobile unfriendly content from loading on your site which is actually used on your regular desktop site - sure you can hide a jquery slideshow with media queries but the 200kb+ images and jquery files that are used to control it are still loaded into the mobile site which effects the delivery speed of your mobile sites due to the overall data size of the site.

Whilst you can certainly hide certain things and resize them using media queries - you cant manipulate actual file size just the dimension size ie its big images that are embedded with an image tag will still remain big even if you scale them down to fit on a mobile device, which incidentally doesn't conform to mobile best practices.

Just because a site looks good on a mobile device doesn't make it mobile friendly to the end user.

There are many things you would load on a desktop website that you wouldn't in a mobile site for a specific type of mobile device and vice-versa, again going back to javascript and jquery certain feature phones simply wont load the page if javascript is on it, but with smartphones you can use it to engage the visitor, but the scripts from the desktop site aren't necessarily compatible with the mobile version. Baring in mind this is just tip of the iceberg stuff.

As i mentioned before whilst media queries will work for the most basic of sites anything beyond that will without a doubt be best served with User Agent Detection especially if you want to be able to adapt your content for the broadest range of mobile and actually validate it for mobile.

End of the day use what your comfortable with and whats needed to get the job done, i just feel that UAD can make your job much more streamlined. We have a framework already built around UAD it now makes it effortless to deploy the best content to the end user which in my eyes the user experience is everything...

[ 1 ] Thanks
1 reply

Signature

Sorry, I am too busy helping people to think of a cool signature!

{{ DiscussionBoard.errors[5244819].message }}

WordPressurize 12 years ago

@Jay I agree with you on many points, especially user experience, but other points not so much. IMHO UAD is overkill on most sites, if the core site itself has been properly optimized, even dynamic sites. Websites that are heavy in images that exceed 320x480, excessive use of JavaScript, Flash, etc definitely need UAD.

However, I'm personally not a promoter of optimizing websites for mobile devices that are not optimized to be Internet devices, because there aren't enough users on them to worry about (for the clients I've worked with). Of course if analytics were to tell a different story, I'd change my stance on the subject. To charge a client that sees 50k visits a month, more money to optimize their website for the 8 visitors who came to site on their bar phone last month, is testing our rapport. The fact that the phone has a browser, hasn't translated to much mobile internet browsing in comparison to smartphones. We could compile a small list of reasons, I'm sure.

I push optimization for smartphones, touch or otherwise. Additionally, for the vast majority of clients willing to pay for the service, optimizing IS to enhance user experience of the converters, and by far mobile converters will be using smartphones, and will outnumber the others by an obscene ratio. A comparison is IE. If a client asks me about optimizing for early versions, if their website isn't IE5lovers.com, I tell them not to waste their money.

Anyway, as you said, it's what gets the job done that matters. Unless, UAD has become far less tedious in the last few months, it would need to drastically reduce a footprint for me to choose it over MQs. When I have used it, it did just that, perfectly removing assets from website for devices that either couldn't use them, or where their use wasn't worth the cost in speed and data usage. But, of course, as I'm sure we agree, this is not always the case. To each their own, as they say.
- [ 2 ] Thanks
Signature

"The Dominance characteristic values competency, results, and action. The Influence characteristic values action, enthusiasm, and relationships. The Steadiness characteristic values relationships, sincerity, and dependability. The Conscientiousness characteristic values dependability, quality, and competency... it is necessary to give them the thing they value most." - from Convert, by Ben Hunt
{{ DiscussionBoard.errors[5245383].message }}

dannyogolo

12 years ago

Originally Posted by Jay Moreno

... to deliver the most compatible and optimized content to a mobile device ......

@Jay,
By this assertion, do you mean that I should have a different website/directory for the various DETECTED mobile versions, or simply 1 extra directory for all mobile devices ?

Like I said, its a Classifieds site, and most of the content will be coming from users themselves, and I DONT WANNA DO DOUBLE WORK AFTERWARDS.

I will rather go for something that will ON ITS OWN convert the PC site to mobile friendly for mobile users.

Another important info - About 65-80% of my expected mobile visitors will be coming from Blackberry devices.

Conclusions pls

Thanks
1 reply

{{ DiscussionBoard.errors[5248297].message }}

Jay Moreno

12 years ago

Originally Posted by dannyogolo

@Danny

Hi Danny am not sure which direction your approaching this is its a custom site from the ground up or based on wordpress, joomla or a different cms am taking it the site is database driven one way or another

i would be looking at doing something like this:

1) for non cms based site - the mobile visitor gets detected and redirected to the mobile version of the site, however all the content is still pulled from the same database as the main site its just formatted to be mobile friendly.

2) if its cms - you can use a template switcher when a mobile visitor is detected that still pulls the data from wordpress but the template serves that data with a mobile friendly template.

I would use UAD for the detection and inclusion of different features... for example not all phones have GPS capabilities, you may want to do a radius search and you could offer the use my current location feature just for smartphones, non feature phone users could be like why isnt this working, and you can put an explanation in there to tell them why - but with UAD you dont have to show that option at all.

For feature phones, you would want to perhaps serve up the correct version of google maps, smaller images, perhaps a non javascript driven slideshow - theres a lot of cool things that could be done to really give it a good mobile user experience.

Bottom line is you dont want to have re-create all your content again just to display it on a mobile device. It would be the mobile friendly version that handles the same content but just formats its automatically to be mobile friendly.

Hope that makes sense

Cheers

Jay

[ 1 ] Thanks

Signature

Sorry, I am too busy helping people to think of a cool signature!

{{ DiscussionBoard.errors[5248968].message }}

Jay Moreno 12 years ago

@WP i hear what you are saying for sure, i guess it depends which angle you are looking at too, we build sites for regular but some of our clients are specifically just for mobile and typically CMS based hence the reason we developed our own framework plus the money is there too for those who want that! We have done some very customized work for mobile and there is a need for it that is growing.

Without a doubt there is a mobile revolution going on right now and i only expect things become more increasing mobile - depending on your sites content i would expect your mobile visitors to increase especially if its content thats meant to be accessed or needed on the go... take youtube, facebook and google maps... mobile traffic to these sites has increased to staggering proportions over the past 18 months.
- [ 1 ] Thanks
Signature

Sorry, I am too busy helping people to think of a cool signature!
{{ DiscussionBoard.errors[5245535].message }}
jumpa 12 years ago

May be you can see this : http://wordpress.org/extend/plugins/...s-mobile-pack/
- Thanks
{{ DiscussionBoard.errors[5246983].message }}

dannyogolo

12 years ago

Ok, I have tried avoiding mentioning it here, but seems its inevitable.
The theme im buying is WORDPRESS. --------
And it will be modified a bit by a WP designer.

So now it appears your 2nd advice is what you recommend.
Having said that, it seems there are 2 things involved here - A UAD and a template switcher (this should be a Mobile Template?????)

If the above is correct does it them mean that the work involved is in the upfront set up of the new Mobile template, and after the initial setup, Im not gonna do more work going forward ?

Thanks
1 reply

{{ DiscussionBoard.errors[5249020].message }}

Jay Moreno

12 years ago

Originally Posted by dannyogolo

Ok, I have tried avoiding mentioning it here, but seems its inevitable.
The theme im buying is WORDPRESS. *** i removed it for the benefit of danny ***
And it will be modified a bit by a WP designer.

So now it appears your 2nd advice is what you recommend.
Having said that, it seems there are 2 things involved here - A UAD and a template switcher (this should be a Mobile Template?????)

If the above is correct does it them mean that the work involved is in the upfront set up of the new Mobile template, and after the initial setup, Im not gonna do more work going forward ?

Danny you can remove that link if you like! Lol

For me you would definitely need a secondary custom mobile friendly template for this and the mobile theme switcher which i was talking about, we will be updating out redirect script to include that in the future. Theoretically you can have a different theme for different types of mobile devices, ie for smartphones, for non smartphones. Or you can have one theme that uses UAD to format the content for each device.

Each wordpress template has functions that handle the data and the way its formatted and displayed... providing your guy has a good understanding of WP and the principles of mobile and mobile best practices he can duplicate the theme and modify the functions and theme where necessary to render a more user friendly content.

With some good planning i think its more that doable and doesn't have to be over complicated.

Wish you the best of luck!

PM if you need any further advice

Cheers

Jay

Thanks

Signature

Sorry, I am too busy helping people to think of a cool signature!

{{ DiscussionBoard.errors[5249238].message }}

dannyogolo 12 years ago

Ok, i seem to be getting a clearer picture of what im getting involved with.

My mind is being made up
- Thanks
{{ DiscussionBoard.errors[5250826].message }}
dannyogolo 12 years ago

Another issue I forgot to add is that I definitely will contract this mobile issue out, as I dont know a thing about coding.
- Thanks
{{ DiscussionBoard.errors[5250859].message }}

dannyogolo

12 years ago

Following advice from the other thread, I googled "responsive design" and got to an article which really make s a lot of sense:
11 reasons why Responsive Design isn’t that cool!

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[5251178].message }}

Jay Moreno

12 years ago

Originally Posted by dannyogolo

Following advice from the other thread, I googled "responsive design" and got to an article which really make s a lot of sense:
11 reasons why Responsive Design isn’t that cool!

great resource danny identifies several of the things i was talking about with regards to mobile vs responsive design

PS did you see some of those infographics - good stuff! thanks for link

Thanks

Signature

Sorry, I am too busy helping people to think of a cool signature!

{{ DiscussionBoard.errors[5251483].message }}

xtrapunch 12 years ago

What you really need is a "website with responsive layout". Check out busybeeslocksmith.com website which I created for a client. You can view the same website in any device and the website adapts to the screen size. Try resizing your browser window or visit it from different devices such as mobile phones and iPads.
- Thanks
Signature

>> Web Design, Wordpress & SEO - XtraPunch.com <<
Web Design & SEO Agency | Serving World Wide from New Delhi, India
{{ DiscussionBoard.errors[5240638].message }}
dannyogolo 12 years ago

@xtrapunch,
I have seen the busy bee site. Its fine - and makes the site have same look and feel like the PC version which is good. I noticed it takes the right side bar to the bottom of the site. Also very good. But I am wandering what will happen to my site if this style is used, considering my site will have an elaborate Footer.

@Delois,
Ideally having another 'mobile' sub domain simply means maintaining 'another' website. To me this will be an elaborate work. Consider its a Classified Ads website. This will almost mean duplicating my job. Consider also its a small business with small budget.

Maybe I should add here:
My major concerns are:
when the site it viewed from a mobile device, it should:
- Load fast (light weight)
- Easy to navigate (only Top <> Down)
- Responsiveness (Example - Call Us Button should actually Trigger and start making calls from the mobile phone - its a classified ads site remember)
- etc
- Thanks
{{ DiscussionBoard.errors[5240780].message }}
JanelleJ 12 years ago

You will either have to put in the work or pay someone else to, simply put. Google "responsive design" if you want to see your options. It will either cost you time or money, and if you're good with code, then I'd say it's worth it to do it yourself.

With that said, I find that having a mobile subdomain is the best route. You have more control.
- Thanks
Signature

TOP-NOTCH ARTICLES FOR ECO, NUTRITION, & HEALTH NICHES
Find out why my clients say, "WOW!"
{{ DiscussionBoard.errors[5250484].message }}
dannyogolo 12 years ago

mistake Just cancelled it out
- Thanks
{{ DiscussionBoard.errors[5250835].message }}
AnnaSm 12 years ago

Conversion of website to mobile version,it's good idea to to work on mobile.
- Thanks
{{ DiscussionBoard.errors[5258263].message }}
dannyogolo 11 years ago

@Jay Moreno,
Sent you an email, awaiting reply
- Thanks
- 1 reply
{{ DiscussionBoard.errors[6209470].message }}
- Jay Moreno 11 years ago
  
  Originally Posted by dannyogolo
  
  @Jay Moreno,
  Sent you an email, awaiting reply
  
  Hi Danny - i didn't receive it for some reason, can you PM me?
  
  Cheers,
  
  Jay
  
  PS just sent you a PM too
  
  Thanks
  
  Signature
  
  Sorry, I am too busy helping people to think of a cool signature!
  
  {{ DiscussionBoard.errors[6210666].message }}

How to convert a website theme to mobile version

Trending Topics

Sudden Traffic Drop in Medical Billing Services Website

Can google crawl a password protected pdf linked to from your site?

Grand entrance!

Anyone Tried/Tested "The Negative Sell?"

Is anyone using either a co-op office space or a cafe to do biz?