Create a mobile/tablet different layout to desktop version possibly using Bootstrap 3

Hi

I have a client who has supplied me with a design that is only intended for 720px and smaller.

The main desktop version has a different layout though. I have tried to explain that this is not the best way to go about it, but they are insistent that they would like to show a differnt layout for mobile/desktop users.

How would I go about doing this? I would preferably like to use Bootstrap 3, but not sure how I would serve up the mobile version of the site?

Many Thanks, and I hope the above makes sense?

Hi,

It all depends on whether the smaller layout is based on the larger layout or whether its a completely different layout altogether? Remember you can’t change html with media queries so you don’t want to manage 2 sites on one page. if its just re-arranging things a bit the usual width media queries are the way to go.

You can use device width rather than layout width to target devices but your 720px doesn’t seem to correspond to common devices and will miss the ipad. Of course you may mean screen resolution width rather than device width as they are different things.

That’s the problem with dealing with devices as you never know what you are going to get and why its better to sidestep the issue altogether and design for all devices by creating fluid layouts that just fit anywhere. Of course you can move things around a bit and hide unnecessary elements on smaller devices but triggering the changes at pre-defined widths is a bit hit and miss unless the layout is already flexible enough.

Bootstrap already has mobile support built in and a lot of its grid will adapt as required but of course you need to make sure the content contained within is also managed as effectively.

Without seeing the 2 layouts you have to code its hard to hard to give a specific answer.

Maybe your client wants a separate mobile site (not recommended) and then you would detect (js) and redirect to a mobile version of the site specifically optimised for mobile and using different html and css. Generally this is not the best approach unless you have the resources to manage two sites and even then it’s not considered a good option.

Hi

Many thanks for your response. I will PM you the two designs (yes they are different) Not sure who advised their designer to do this, but I need to convince them otherwise.

Could you let me know what you think please?

Thanks again.