• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 15 posts ] 
Author Message
 Post subject: Transforming a desktop site into multi device
PostPosted: Thu Apr 02, 2015 4:03 pm 
Offline
Forum Members
Forum Members

Joined: Sun Jul 15, 2007 1:18 pm
Posts: 87
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?

_________________
Regards,
Patrick


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Thu Apr 02, 2015 10:57 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Sat Apr 18, 2009 10:09 pm
Posts: 1427
Location: Maidenhead, UK
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:

\$1:
@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.

_________________
To copy System Information to the forum:
https://docs.cmsmadesimple.org/troubles ... nformation

CMS Made Simple Geekmoots attended:
Nottingham, UK 2012 | Ghent, Belgium 2015 | Leicester, UK 2016


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Thu Apr 02, 2015 11:30 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12674
Location: Arizona
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/

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Thu Apr 02, 2015 11:33 pm 
Offline
Forum Members
Forum Members

Joined: Sun Jul 15, 2007 1:18 pm
Posts: 87
Sounds good. But what to do with my menu?

_________________
Regards,
Patrick


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Thu Apr 02, 2015 11:41 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Sat Apr 18, 2009 10:09 pm
Posts: 1427
Location: Maidenhead, UK
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/

_________________
To copy System Information to the forum:
https://docs.cmsmadesimple.org/troubles ... nformation

CMS Made Simple Geekmoots attended:
Nottingham, UK 2012 | Ghent, Belgium 2015 | Leicester, UK 2016


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Fri Apr 03, 2015 10:37 am 
Offline
Forum Members
Forum Members

Joined: Sun Jul 15, 2007 1:18 pm
Posts: 87
paulbaker \paulbaker:
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?

_________________
Regards,
Patrick


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Fri Apr 03, 2015 12:38 pm 
Offline
Forum Members
Forum Members

Joined: Sun Jul 15, 2007 1:18 pm
Posts: 87
Is it possible to query the device width within the template? If so, how?

_________________
Regards,
Patrick


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Wed Apr 29, 2015 1:43 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Thu Jan 26, 2012 3:22 pm
Posts: 246
Location: Belgium
This js code in combination with Jquery could help

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


My CSS
\$1:
.mobiledropdownwrapper{
   height:auto;
   width: inherit;
   float:left;
   background-color:#222;
   display:none;
}


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

_________________
Kind regards,
HarmO


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Wed Apr 29, 2015 5:47 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12674
Location: Arizona
I use 2 different menus in mobile/responsive sites...

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

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

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Tue Jul 07, 2015 3:12 pm 
Offline
Forum Members
Forum Members

Joined: Sat Aug 29, 2009 3:00 pm
Posts: 221
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:
\$1:
{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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Wed Jul 08, 2015 7:58 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Sat Apr 10, 2010 4:26 am
Posts: 233
Location: Gorinchem
or use bootstrap https://www.youtube.com/watch?v=YXVoqJEwqoQ


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Thu Jul 09, 2015 7:05 am 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 802
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Fri Jul 10, 2015 3:15 pm 
Offline
Power Poster
Power Poster

Joined: Thu Jan 11, 2007 9:16 pm
Posts: 262
Location: Colorado
The zip file appears to be missing from your site. Is this correct? I am very interested in seeing how this works.

Elkman


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Fri Jul 10, 2015 4:46 pm 
Offline
Power Poster
Power Poster

Joined: Wed Aug 13, 2008 10:57 am
Posts: 802
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Transforming a desktop site into multi device
PostPosted: Thu Jul 23, 2015 8:03 pm 
Offline
Translator
Translator

Joined: Tue Jan 22, 2008 9:57 am
Posts: 170
pschoenb \pschoenb:
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 \pschoenb:
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 15 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting