Converting Desktop Website to responsive one

Tagged: ,

This topic contains 15 replies, has 3 voices, and was last updated by  polaris 7 years, 5 months ago.

Author Posts

polaris

Hello,

is there a guide or some directions to convert a traditional desktop website to a responsive mobile friendly one, please?

I don’t know which elements are mandatory so that the new website can be considered by Google as mobile friendly.

On 21th April we should all be ready for new ranking changes in SERP… The hope is to have for that date a mobile friendly website.


mwdonnelly

I have a responsive theme on my website, but I’m also using Microthemer to tweak it to make sure that it all is ready for the new mobile-friendly Google algorithm. Here’s a blog post that came across my radar yesterday:

http://adsense.blogspot.com/2015/04/is-your-website-ready-for-mobile.html


Sebastian

@mwdonnelly thanks for sharing your knowledge. I think the mobile friendly testing tool is a particularly useful resource. It will help polaris identify what needs to change.

@polaris I’m working on a beginners guide to designing responsively with Microthemer. Unfortunately it’s not ready yet. It’s a big area. I started trying to write a brief article but soon realised that I could only do that by omitting important details. I want to do it properly.

Given the rapidly approaching April 21st deadline the best advice I can give is to install WP Touch, JetPack, or WP Mobile Detector. All of which are WordPres plugins that show mobile users a completely different mobile optimised theme. Desktop users still see your current theme. The advantages of doing this are:

  1. It’s an instant and easy solution
  2. It will buy you some time to make your regular theme responsive without losing lots of mobile traffic in the meantime

The disadvantage is that the mobile theme won’t match your current branding. It would be great if Microthemer could be used to tweak the appearance of dedicated mobile themes. I emailed WP Touch today to see if we can work something out. I haven’t looked at JetPack or WP Mobile Detector yet but I’ll get onto those too.

I’m sorry I haven’t got a more ideal suggestion at this stage. I hope that helps a little.

Cheers,
Sebastian


polaris

@mwdonnelly @sebastian, thank you so much for your replies.

I guess I cannot use Sebastian’s suggestions, because my website is highly customized and it is using meta customs fields to retrieve datas and to show them in posts (we use customized single.php and front-page.php files).

I was able to change other elements on screen using microthemer, for example the sidebar now is moving at the website bottom when I try to resize the screen (I guess it is a good thing!).

At this moment my bigger issue is related to my main MENU: so maybe I should look to some plugin that can convert a static menu to a responsive one.

Or do you think that I can tweek it using MT, please?

Thanks!

Cheers,
Francesco


Sebastian

Hi Francesco,

Well done on shifting the sidebar down!

I recommend using a WordPress plugin to get the responsive menu functionality to make life easy for yourself. You should be able to customise the look of the mobile menu via Microthemer (the only reason you can’t currently style WP touch themes etc with Microthemer is that they show mobile content based on the device e.g. a phone not just the screen width).

You could try the following mobile menu plugins:

  1. https://wordpress.org/plugins/responsive-menu/
  2. https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/
  3. https://wordpress.org/plugins/mobile-menu/

I hope that helps. If you have any more questions please let me know.

Cheers,
Sebastian


polaris

Hi Sebastian,

thanks for your suggestions: I tried the first plugin, but no responsive menu in shown.

Maybe because my theme is customized and does not support wordpress menu (but my menu is built inside usual WordPress Menu settings in Admin).

I will still continue to make tests.

Cheers,
Francesco


Sebastian

Hi Francesco,

Thanks for reporting back. If none of them work I’d be happy to log into your site and see what the issue is. I would have thought they would work if your menu is set up in the WordPress admin area…

Cheers,
Sebastian


polaris

Hi Sebastian, OK thanks!

I just sent you a message, through contact form, with access details.

Cheers,
Francesco


Sebastian

Thanks for that Francesco, I’ve had a quick look at your site. I notice that with no mobile plugin enabled your site hides the main menu on smaller screen sizes. It wasn’t immediately obvious to me what was causing this. Was it something you applied in Microthemer? If so, that could explain why the mobile menu plugin wasn’t working. If you’re not sure why the menu is disappearing I’ll do some digging.

Cheers,
Sebastian


polaris

Hi Sebastian,

thanks for your time.

That was a change that I applied later, because the responsive menu plugin didn’t work and so I decided to temporary hide menu on mobile device, waiting to find a better solution.

But, of course, if you delete that MT menu directive, as I did just now, you will see that the plugin still doesn’t work, and no responsive menu is shown on website.

Cheers,
Francesco


Sebastian

Hi Franceso,

I just logged into your site again to take another look and possibly try a different mobile menu plugin. However, I see that you’ve installed WP Touch which has it’s own mobile menu. Do you still want to get one of the mobile plugins working though?

WP Touch seem interested in making Microthemer work well with their plugin. I’ve discovered how to do this but it requires a modification at their end. They need to prevent the mobile preview from jumping out of Microthemer’s preview window (which is what is does by default when the WP Touch theme finds itself inside an iframe).

I’ve emailed them some code to address this in an attempt to ease their workload (I’m sure they’re extremely busy right now). Hopefully we can make the two programs work together very soon.

Cheers,
Sebastian


polaris

Hello Sebastian,

I installed WPTouch only as an emergency plugin, but as you probably seen it is not able to show my custom posts (bingo numbers) and it cannot shown ADs by Google (it is a paid plugin if you need ADs).

So, I am still interested in converting to responsive my website and, as a temporary workaround to avoid Google penalty, I used WP Touch.

So I will still appreciate your help, if possible.

Thanks!
Cheers,
Francesco


Sebastian

Hi Francesco,

For some reason none of the mobile menu plugins aren’t working. I can’t be sure why this is. But I wonder if it might have something to do with this script: http://toolbar.mywebacceleration.com/sources_v_2.0.0.123/infra/js/insertion_pc.js

It sometimes throws as Javascript error if I inspect the frontend of your site with firebug. I noticed that on some occasions it was preventing Microthemer from successfully saving styles too. But only sometimes, I managed to input few styles.

Do you know what that script does? Is it essential?

Cheers,
Sebastian


polaris

Hello Sebastian,

I cannot find that JS… where can I see it in my code, please?

Thanks for help
Francesco


Sebastian

Hi Francesco,

I can’t seem to find that error anymore. But I can see a new one that looks related to a caching plugin:

ReferenceError: $ is not defined
http://10elotto.biz/wp-content/cache/minify/000000/1eace/default.include.a996a2.js

Did you recently enable a caching plugin?

Cheers,
Sebastian


polaris

Hi Sebastian, Yes, I always used W3 Total Cache.

I temporary disabled W3 only when I installed MicroThemer because it prevented me from using your plugin, but I was not able to convert my theme from desktop to responsive one (I thought to be able to do this task using MT), so I reverted to my previous configuration.
I will wait to see if there will be a way to convert to responsive using MT.

You must login or register to reply to this topic.