Transforming a desktop site into multi device

pschoenb · Post by **pschoenb** » Thu Apr 02, 2015 4:03 pm

Hello,

since Google soon will demand sites to be mobile ready, I have to address this problem.

My site (see signature) still will be targetted at desktop users but I need it to be at least viewable on mobile devices.

I don't have much experience in mobile sites, neither from the development perspective nor as a user. Therefore, I am looking for a pragmatic solution. I am willing to invest some time, but I don't want a complete redesign of my site. Especially, I am wondering what to do with my rather long menu.

What would be a good approach to transform the site that is not too time consuming?

Post by **paulbaker** » Thu Apr 02, 2015 10:57 pm

Depends how much time and effort you want to invest. But basically you want to make it responsive - so the site responds to the amount of width it has to play with.

You do that by adding something like this at the end of your stylesheet, in your case:

Code: Select all

@media screen and (max-width: 782px) {
   /* add stuff here that only applies on a small screen */
   #links {
      ...float it differently and give it different width (100%?)
   }
   #content {
      ...similar
   }
   #rechts {
      ...similar
   }
}

Now refresh the site and narrow the width of your browser. When you get to 782px and below, the layout will change according to the rules you set.

Fiddle around with the new CSS until it looks decent! Best to make widths 100% so it fills the very narrow width fully.

You can also add different break points so the site behaves differently at different widths.

The beauty of this is that your desktop design is unaffected.

That's the general idea...

You will need to do something with the width of #header too.

Dr.CSS · Post by **Dr.CSS** » Thu Apr 02, 2015 11:30 pm

A lot of it has to do with not setting fixed widths as in width: 1024px instead they should be max-width: 1024px where they can be and then other widths inside this are done in % which changes at certain break points, I'll even give you my special adapt start up style sheet...

This goes in the <head>...

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

New style sheet that should be the last one attached to template...

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 960px) {
}

@media screen and (max-width: 800px) {
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 720px) {
}

@media screen and (max-width: 667px) {
}

@media screen and (max-width: 640px) {
}

@media screen and (max-width: 600px) {
}

@media screen and (max-width: 568px) {
}

@media screen and (max-width: 480px) {
}

@media screen and (max-width: 375px) {
}

@media screen and (max-width: 320px) {
}

@media screen and (max-width: px) {
}

So it's:
@media screen and (max-width: break pointpx) {

#pagewrapper {
the different style calls
}

}

Most of the default themes, not ncleanblue/simplex, just change the #pagewrapper width call to max-width and your 90% there...

pre 6.0
with this in the head...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
http://multiintech.com/default/

pschoenb · Post by **pschoenb** » Thu Apr 02, 2015 11:33 pm

Sounds good. But what to do with my menu?

Post by **paulbaker** » Thu Apr 02, 2015 11:41 pm

Quick solution: Leave it as it is. It will display above or below your content depending on how you code the CSS.

Long solution: Do something fancy like turn it in to a drop down list at a certain width. A bit like Twitter Bootstrap does: http://getbootstrap.com/

pschoenb · Post by **pschoenb** » Fri Apr 03, 2015 10:37 am

paulbaker wrote:Long solution: Do something fancy like turn it in to a drop down list at a certain width. A bit like Twitter Bootstrap does: http://getbootstrap.com/

How could this be done in CMSMS?

pschoenb · Post by **pschoenb** » Fri Apr 03, 2015 12:38 pm

Is it possible to query the device width within the template? If so, how?

HarmO · Post by **HarmO** » Wed Apr 29, 2015 1:43 pm

This js code in combination with Jquery could help

Code: Select all

$(document).ready(function(e){
 
	$('#mobilemenutogle').on('click',function(){
		//event.preventDefault();
		$('.mobiledropdownwrapper').slideToggle();
 
	});
 
});

My CSS

Code: Select all

.mobiledropdownwrapper{
	height:auto;
	width: inherit;
	float:left;
	background-color:#222;
	display:none;
}

html

Code: Select all

<a id="mobilemenutogle"><i class="fa fa-bars fa-2x"></i></a>
<div class="mobiledropdownwrapper">
	{menu}
</div>

Dr.CSS · Post by **Dr.CSS** » Wed Apr 29, 2015 5:47 pm

I use 2 different menus in mobile/responsive sites...

http://staceyjaswad.com is a select menu...

http://demosthatrock.com is a Show/Hide menu...

Guido · Post by **Guido** » Tue Jul 07, 2015 3:12 pm

My solution is a two step rocket:

- I use {mobiledetect} to do the first filtering. Remember to place this tag both directly after the </__body> tag and at the top of you template. You can then use:

Code: Select all

{if $device->isMobile OR $device->isTablet}
{* Your phone and tablet stuff *}
{else}
{* You desktop stuff *}
{/if}

This has the advantage that the server doesn't have to perform operations you're not using on mobile devices (in stead of just throwing everything at the device and hiding it via css).

You can use this code to differentiate between desktop and mobile stylesheets as well, this is where the second part of my strategy comes in. I use media queries (you can find a lot of device targeting at csstricks.com) to style my content separated by tablet, phone, portrait or landscape.

Hope this helps.

andre_designer · Post by **andre_designer** » Wed Jul 08, 2015 7:58 pm

or use bootstrap https://www.youtube.com/watch?v=YXVoqJEwqoQ

janvl · Post by **janvl** » Thu Jul 09, 2015 7:05 am

Hi,

you could put the menu in a togglebox for small screens and use a fluid design with media-queries.

Fo a site like this that is not too hard. Forget Bootstrap which is a bootload of bloatware, you do not need it.

Look at http://www.drhelmreich.at that is cmsms and simply responsive (would be your solution),
or look at http://www.responsivedesign.eu.

Here is a theme to try, just put it there because the theme-site here is broken.
http://cmsmadesimple.website/was-ist-es/freebie.html

Kind regards,
Jan

elkman · Post by **elkman** » Fri Jul 10, 2015 3:15 pm

The zip file appears to be missing from your site. Is this correct? I am very interested in seeing how this works.

Elkman

janvl · Post by **janvl** » Fri Jul 10, 2015 4:46 pm

on the german page the word "Theme" is the link to the ZIP-file.

If this does not work then send a PM, I will send it to you.

Kind regards,
Jan

10010110 · Post by **10010110** » Thu Jul 23, 2015 8:03 pm

pschoenb wrote:since Google soon will demand sites to be mobile ready, I have to address this problem.

Just a note on the side: Google doesn’t demand anything, and you also don’t have a problem. This whole “mobile ready” thing is just scare tactics to get people to do something Google wants them to do.

What this new “rule” effectively says is that websites that are optimized for mobile devices will land further up in search results when searched from mobile devices. This is mainly important for websites with a high competition and requirements for conversion (such as mainstream e-commerce sites, etc.). If your site is addressing a special niche and/or out of massive competition you don’t have to worry about a thing.

pschoenb wrote: My site (see signature) still will be targetted at desktop users but I need it to be at least viewable on mobile devices.

And this is the second thing: Your website is primarily targeted at desktop users. And in case you didn’t know: Mobile devices display unoptimized websites exactly as they are designed for desktop. Of course you have to zoom in but it’s not like it’s completely unusable.

And as a last tip I suggest you stay as far away from Bootstrap as far you can unless you really know that you need it to increase your productivity. I call it “Bootcrap” because it is adding unnecessary bloat to a site, especially if people just use it without knowing why because they think it magically makes their site responsive and whatever. Bootstrap is just a tool, and if you don’t know how to use a tool then it doesn’t help you.

CMS Made Simple Forums

Transforming a desktop site into multi device

Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device

Re: Transforming a desktop site into multi device