Implementing Responsive Design

CM1
1

Hi - Does anyone have any tips or tricks when it comes to building templates using responsive design? I’m working on a new site that uses CSS and HTML to “drive” the design. There are three CSS files in the theme folder - small (ie mobile phone view); medium (ie tablet view); and large (ie PC view). The media queries are within the Template Meta Tag Additional Header Code section.

I’m having trouble creating the page templates. Right now for some reason the “small” version of the site is rendering. It does have the bulk of the CSS in that “small” file. How do I then create the template elements needed for the “large” version of the site - it has a slider that is dropped out of the “small” version? Any advice is welcome!

2

Hi Catherine,
This might be due to a problem with the media queries. If you could post those queries, that would be great. Just make sure you enclose them in these tags:

 Code goes here.
3

Hi Jon - Here’s what I’ve got:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">   
<link type="text/css" rel="stylesheet" media="all" href="/Design/web_resources/themes/identityx/small.css">   
<!--[if lt IE 9]> <br />
<script src="/Design/web_resources/themes/identityx/js/html5shiv.js"></script> <br />
<![endif]-->   
 
<!--[if (lt IE 9)&(!IEMobile)]> <br />
  <style type="text/css" media="all">@import url("/Design/web_resources/themes/identityx/css/medium.css"); <br />
  @import url("/Design/web_resources/themes/identityx/css/large.css");</style> <br />
<![endif]-->   
 
<!--[if gte IE 9]><!-->   
<style type="text/css" media="all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)">@import url("/Design/web_resources/themes/identityx/medium.css"); <br />
  </style>   
<!--<![endif]-->   
 
<!--[if gte IE 9]><!-->   
<style type="text/css" media="all and (min-width: 980px) and (min-device-width: 980px)">@import url("/Design/web_resources/themes/identityx/medium.css"); <br />
  @import url("/Design/web_resources/themes/identityx/large.css");</style>   
<!--<![endif]-->   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>   
<script src="/Design/web_resources/themes/identityx/js/jquery.bxslider.min.js"></script>   
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">```
4

Hey Catherine,

I noticed that the root directory of all your references to your CSS files begins with “/Design”. When linking to theme files in CM1, “/web_resources” should always be the root directory. Let me know if your other Stylesheets get picked up once you make this change.

5

Hi Nathaniel - Wow, I screwed that one up and I know better! That did fix that particular problem. I’ve moved to a non-responsive design approach temporarily but will revisit the responsive version next week.

thanks,
Catherine

6

@Catherine - I’ve been working on our new launch with a responsive design and I used Foundation by Zurb as our foundation (no pun intended). http://foundation.zurb.com/ . I’ve found it to be pretty nice and easy to implement.

7

No problem, Catherine. :slight_smile:

8

@Matt - Thank for you the tip. I’ll definitely take a look at it once I’ve survive this launch.

9

I’m doing responsive design templates for our end-users. For the most part, I design the entire template outside of CM1, generating a single minified CSS file along with a minimal amount of images. I put these files into a theme and attach that theme to the templates. In this way I don’t have a bunch of extraneous CSS declarations nor media queries attached through the various CM1 areas that allow CSS (i.e. Meta Data Additional Code boxes). So if I run into any issue with the design of my template, I fix it outside of CM1 and re-copy the minified CSS into the theme’s folder and I’m good to go.

From my standpoint, this was my easiest route to manage such a responsive design. CM1 just isn’t there yet to easily manage it though its interface.

I will note that my themes are extremely minimal, but it works for what we are trying to accomplish (i.e. our sites are for information purposes, ease of use, etc, not for marketing or selling anything)