<tip c n>Note: This page is specifically made for instructing on how to show a larger banner for larger screens, and a smaller banner for smaller screens. But these same principles can be used for creating any custom content / layout that you wish to be "responsive" to the screen size.

In fact, when our developers originally created the new default RWD templates and CSS, they followed the exact same basic underlying steps as illustrated below.</tip>

About using RWD: You will not find one large section of CSS for "one common device size" and another for "another common size". Instead you will see several different break-point media queries in the default CSS that are based around the content and what layout works best for that content depending on the screen size. This approach is important now and even more so in the future, because there are so many different devices that all have different screen sizes. There is no longer one "standard" size for mobile phones, one "standard" for tablets, these days mobile devices come in all shapes and sizes. Well, testing at several "common sizes" is a good idea, but it is very important to recognize those are not the "only" sizes out there, and it is not a good idea to base designs 100% on those common sizes. Instead base them on what looks good for the content.

In other words, base the break-point sizes on what looks good for the content, not based on specific common device sizes.

We have several different "break points" that are based on when that "thing" needs to be switched from one layout to another… And since there is not just "one for mobile, one for desktop" type of mentality, a lot of times when you are adding your own custom content, it is a good idea to do the same thing rather than just tacking on to one of the other break-points that already exist. If your own content is somehow interconnected to the default layout, for instance it needs to be displayed above the menu in larger screens but once the menu changes to a top menu bar, switch to another layout, by all means use the same breakpoints as the default design. But if the content you are adding is independent, we would recommend to find your own best break-points as is described on this page.

<tip c w>Warning: This method results in a banner ad being hidden using CSS (based on screen size). If you are using an ad company (like Google Ads) rather than banner management software (like Adpeeps), check their Terms of Service (TOS) or user agreements to make sure doing so is not against the TOS. You may want to contact them directly if you are not sure, and be sure to explain this is purely so that it can show the right sized banner based on the screen size, one banner will be hidden while the other is displayed. Times that it is against the TOS are usually to prevent you from hiding the banner and still getting credit for impressions or something similar to that.</tip>

These are the overall basic steps simplified, see the proceeding sections on this page for detailed explanation of each step. While the specific examples given will instruct you how to set up different banner sizes to show on different screen sizes, these overall steps can be used for any type of custom content being added to the page.

1. First, set up the "global" CSS that will apply for any screen size.
2. Create a break-point and set up the CSS that will "overwrite" the global CSS when the screen is large enough. During this stage use a break-point of 1em.
3. After both "versions" of the CSS are complete, "dial in" the break-point size based on what looks best.
4. Test everything on multiple screen sizes, multiple browsers, and if you have access, multiple devices (mobile and tablet).

First, you will set up the overall "global" CSS that will apply for any screen size. But note that parts of it are "overwritten" for larger screen sizes, it is still best to think of this as the global CSS so that you don't forget that it will apply to all sizes if there is not something overwriting it.

In other words, this is going to be the CSS used for smaller screen sizes, but also larger screen sizes for any parts of the CSS that are not overwritten in a media query break-point.

So for this example, we'll set up 2 classes, one for the "large" banner and one for the "small" banner size. The CSS may look something like this:

/* ==========================================================================
   Custom - Banners
   ========================================================================== */
 
.banner-small {
	/* small version of banner for smaller screens */
}
 
.banner-large {
	/* large version of banner for larger screens, hide globally */
	display: none;
}

This sets up 2 classes, banner-small for the smaller sized banner ads that would fit smaller screens, and banner-large for the full width banners that would fit better on larger sized screens or desktops.

Now you add the HTML to the template, if you were adding it near the top of every page, you might add the HTML to header.tpl. You would add something like this:

<div class="banner-small">
	<!-- Small Banner Code Here -->
</div>
<div class="banner-large">
	<!-- Large banner code here -->
</div>

Be sure to insert the appropriate HTML snippet, provided by banner management software, in the applicable places within that snippet. Basically you add a <div> around the 2 snippets, the snippet for the smaller banner you use the banner-small class, the snippet for the larger banner you use the banner-large class on it's div tag.

<tip c n>Tip: If you notice, there are no special "smarty tags" in that example HTML snippet. This is a good time to point out if you were not already aware, that with RWD, the HTML sent to the visitor's browser is exactly the same, no matter what screen size. The layout changes using CSS, not by using different HTML.</tip>

Now view the page, and if you are on a desktop, make the screen width small, about 300 pixels or so to simulate what it might look like on smaller screens. If you need to add additional CSS style to the banner-small CSS, for instance if you want to make it center aligned or similar, do that now. Make sure it looks right in the smaller view, and that the "larger" banner ad is properly hidden.

In the custom.css file, right below the other CSS you just created, set up a media query break-point, starting off using "1em" as the minimum width for now until we dial in the exact size (next step). In this breakpoint, you will be hiding the smaller banner and showing the larger one. It should look something like this:

@media only screen and (min-width: 1em) {
	/* ==========================================================================
	   Custom Breakpoint for Banners
	   ========================================================================== */
 
	.banner-small {
		/* Hide the smaller banner on larger screens */
		display: none;
	}
 
	.banner-large {
		/* Show the larger banner on larger screens */
		display: block;
	}
}

<tip c n>Tip: Things in this section only need to overwrite what is changing from the "global" CSS. You will notice that it sets display:block for the "banner-large" style. This is because the main CSS we already added in step 1 acts "globally", and in the main CSS it sets display: none. So in order to make larger banner show on larger screens we must overwrite the display CSS by specifying display: block.

This also means that for more complex CSS, you do NOT need to re-specify every single part of the CSS that is defined in the "global" CSS. If something does not need to change for larger views, there is no need to add that part. So for instance, if you specify "color: red" in the "global" CSS that is not inside a media query, and you want it to stay red in larger screens, you do not need the "color" in the media query because it is already set. Doing so is redundant¹⁾, if you already have something set for CSS "globally" and it is not changing for larger screens, you can keep it out of the media query section.</tip>

Now that sets up a break-point at the 1em level, the EM unit is based on character width. So 1em is "1 character wide at the current font size". Yes that is way too small to be of any use, but it is just a temporary "start" to allow us to style things for the larger screen sizes.

So now just as before, view the page, this time use the full desktop width. Make any adjustments to the CSS if needed so that things look just like you want.

This section does not apply for the simple RWD banners, these are things you will need to know if creating more complex RWD contents.

If you need to adjust HTML: Remember that you already set up what it looks like for smaller screens, so if you find that you need to adjust the HTML for whatever reason, be sure to re-test what it looks like on smaller screens. That is why it is important to use as "pure HTML markup" as possible, meaning to use HTML markup based on context, not on styles… For instance the default design primarily uses <nav> with <a> links inside for the menus, then sets the layout and how everything works using purely CSS and JS. The "order" things are in might matter a lot but "how" things are marked up should not change very drastically if you did things right the first time.

If you are Using Multiple Break-Points: Repeat steps 2 and 3 for each break-point. What we mean by multiple break-points: A good example of this in the software default templates, is the footer. It has 2 break-point levels, one for when the links change to go inside the blue box, and a secondary break-point for when it shows the contact us blurb on the right hand side of the links instead of below. To do something similar, you start off with the "smaller" break-point and work your way up, first "making it look good" (step 2) then "dialing in" the size (step 3) for each break-point as you go.

Now you will be changing that 1em to the right size, but you need to figure out what that size is. How you do that, is pull up the page on the desktop, and change the window size. Gradually make the window size smaller and smaller, until the layout no longer "works" or looks good. In the sample of the banner ad, this might be when the page layout starts to mess up because of the banner, or it might be when you start to get a horizontal scroll bar²⁾. Once you get the window small enough that something is not right, start making it wide again, until things "look good" again. So make it a little bit larger, until there is no scrollbar or until the page is not messed up or whatever the case is.

Once you have found the minimum window size that things look good, that is the breakpoint to use, now you just need to find what the actual pixel width is for the window. If you are using Google Chrome, you can see the window dimensions when you are changing the window size, just have the developer tools open (hit F12).

Now take the pixel dimension, and convert it to EM units. You do that by dividing the number by 16 (which is the default "overall" font size, so 1em = 16px at the top level). If you get a really long number like 123.234234 round it to one decimal place, be sure to always "round up" as you want to err on the side of starting the larger layout a little bit "too big" than starting it a little "too small" and having some viewers see a messed up layout.

Stick that number into the media query. In this example, if it just so happened that the pixel width was 500px as the minimum width when the larger banner ad fit entirely in the screen and didn't mess up layout, converted to EM that is 500/16 = 31.25em.

End Result if you did end up with that 500px / 31.25em size, the entire CSS for the banners in your custom.css might look like:

/* ==========================================================================
   Custom - Banners
   ========================================================================== */
 
.banner-small {
	/* small version of banner for smaller screens */
}
 
.banner-large {
	/* large version of banner for larger screens, hide globally */
	display: none;
}
 
@media only screen and (min-width: 31.25em) {
	/* ==========================================================================
	   Custom Breakpoint for Banners - 31.25em / 500px is when larger banner starts
		to fit correctly on the page without any ill effects
	   ========================================================================== */
 
	.banner-small {
		/* Hide the smaller banner on larger screens */
		display: none;
	}
 
	.banner-large {
		/* Show the larger banner on larger screens */
		display: block;
	}
}

You might notice that we also added a small note about the size in the CSS comments - this is a good idea to "remind yourself" why it uses a specific break-point size.

Test first on the desktop, one good tool is using Firefox with the Web Developer addon, there is a tool specifically for RWD that shows many "common screen sizes"³⁾. Also change the browser width and make sure the "change" to the layout (or in the example, the switch to use one banner size or the other), happens at the correct place and that everything looks good.

Also test on any mobile phones or tablets you may have yourself, or borrow a friend's device, etc. Basically test it in as many different environments as you can. There are also a number of places online that you can use to "simulate" different mobile devices, if you are using a really complex design that might be a good option for you as well.

Tips on Testing Goals:

Focus on "working / look good" not on "looking exactly the same": With the plethora of different devices, browsers, etc. if you try to make your site look exactly the same on any browser or any mobile device, you will have a never ending task. Even if you do accomplish it somehow, you may need to further change things in a week when the next iPhone or whatever comes out and things look slightly different… Our own philosophy on the matter, which is a goal-post for RWD in general, is to take advantage of a browser/device's capabilities rather than focusing on making it look the same… In other words focus on what a specific device "can do" rather than trying to get it to match what it might do on other browsers.

Focus on "working" for older (IE8 and before), don't expect older browsers to have as good as an experience as more modern browsers. If you try to do so, either you will be forced to design based on the "lowest common denominator", simply not using any newer CSS3 or HTML5, or you have to add in hacks for older browsers that will result in slowing down the page for all of your visitors. That is why in the default design, we make sure it "works" but older browsers will not have nearly as good of an experience as using a more modern browser.