Can this existing layout be made responsive?

HTML & CSS
1

I had started a topic in Website Design, but if I am going to entertain the idea of trying to move to a responsive design, this might be the better forum.

Basically, we’re making a long overdue attempt at getting our site work better on mobile devices. There’s three main parts – a forum running on IPB, a wiki running on MediaWiki and a regular website running ExpressionEngine – but there’s not much use worrying about the forum since they’re soon moving to a new version with a heavily redesigned base skin. MediaWiki … well, we spent the whole day wrestling with that and had to roll back because inserting ads into the latest skins turned out to be very complex.

But, that’s largely a tangent, since the part we possibly can do something about is the regular site. The problem is that we don’t have the option right now to work on a completely new look for the site, so what we would be hoping to do is to turn the current layout - or something very close to it - into a responsive layout.

So, to start at the right end, is this an obtainable goal?

The site in question is www.westeros.org, though www.westeros.org/Citadel may be the better example as has enough sub-sections to need a more complex menu at the top.

The template:


<html>

<head>

</head>

<body>

<div id="Wrapper">

<div id="Top">
{embed="Westeros/Layout_Header"}
{embed="Westeros/Layout_Menu"}
</div>

<div id="Main">

<div id="MainLeft">
{embed="Westeros/Layout_Sidebar_Left"}
</div>

<div id="MainMiddle">

<div id="MainMiddleInner">

</div>

</div>

<div id="MainRight">
{embed="Westeros/Layout_Sidebar_Right"}
</div>

<div class="Clearer"></div>

<div class="MainLeftFix">
<div class="ColumnTop"></div>
<div class="ColumnBottom"></div>
</div>

<div class="MainMiddleFix">
<div class="ColumnTop"></div>
<div class="ColumnBottom"></div>
</div>

<div class="MainRightFix">
<div class="ColumnTop"></div>
<div class="ColumnBottom"></div>
</div>

</div>

<div id="Bottom">
{embed="Westeros/Layout_Footer"}
</div>

</div>

</body>

</html>

The CSS for the template:


body {
background:#500000 url(http://www.westeros.org/Graphics/bg_leather.png) repeat;
color:#000000;
font: normal normal normal 16px/1.2 Cambria, Georgia, serif;
height:100%;
text-align:center;
}

#Wrapper {
margin:0 auto;
max-width:1200px;
min-width:1000px;
padding:0;
position:relative;
text-align:left;
width:100%;
z-index:1;
}

#Top {
background:#D3A664 url(http://www.westeros.org/Graphics/bg_parchment.png) repeat;
height:150px;
margin-bottom:10px;
position:relative;
z-index:5;
}

#Top h1 {
height:115px;
left:200px;
margin:0;
position:absolute;
top:10px;
width:600px;
}

#HeaderLeftBG {
background:transparent url(http://www.westeros.org/Graphics/header_left-bg-westeros.png) repeat;
height:150px;
left:0px;
position:absolute;
top:0px;
width:500px;
}

#HeaderLeftShield {
height:150px;
left:0px;
position:absolute;
top:0px;
width:190px;
}

#HeaderRightBG {
background:transparent url(http://www.westeros.org/Graphics/header_right-bg-westeros.png) repeat;
height:150px;
position:absolute;
right:0px;
top:0px;
width:500px;
}

#HeaderRightShield {
height:150px;
right:0px;
position:absolute;
top:0px;
width:190px;
}

#Bottom {
background:#D3A664 url(http://www.westeros.org/Graphics/bg_parchment.png) repeat;
height:150px;
margin-top:10px;
position:relative;
z-index:5;
}

#FooterLeftBG {
background:transparent url(http://www.westeros.org/Graphics/footer_left-bg-westeros.png) repeat;
bottom:0px;
height:150px;
left:0px;
position:absolute;
width:500px;
}

#FooterRightBG {
background:transparent url(http://www.westeros.org/Graphics/footer_right-bg-westeros.png) repeat;
bottom:0px;
height:150px;
position:absolute;
right:0px;
width:500px;
}

#Main {
clear:both;
overflow:hidden;
position:relative;
width:100%;
z-index:4;
}

#MainLeft {
display:inline;
float:left;
padding:10px 5px 10px 5px;
position:relative;
width:180px;
z-index:1;
}

#MainMiddle {
display:inline;
float:left;
margin-right:-380px;
padding-bottom:20px;
padding-top:20px;
position:relative;
width:100%;
z-index:1;
}

#MainMiddleInner {
margin:0 410px 0 30px;
min-height:0;
overflow:hidden;
}

#MainRight {
display:inline;
float:left;
padding:10px 5px 10px 5px;
position:relative;
width:180px;
z-index:1;
}

.Clearer {
clear:both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

.MainLeftFix {
background:#D3A664 url(http://www.westeros.org/Graphics/bg_parchment.png) repeat;
bottom:0;
left:0px;
position:absolute;
width:190px;
z-index:0;
}

.MainMiddleFix {
background:#D3A664 url(http://www.westeros.org/Graphics/bg_parchment.png) repeat;
bottom:0;
max-width:800px;
min-width:600px;
left:200px;
position:absolute;
right:200px;
z-index:0;
}

.MainRightFix {
background:#D3A664 url(http://www.westeros.org/Graphics/bg_parchment.png) repeat;
bottom:0;
position:absolute;
right:0px;
width:190px;
z-index:0;
}

html>body .MainLeftFix, html>body .MainMiddleFix, html>body .MainRightFix {
top:0
}

.ColumnTop {
background:transparent url(http://www.westeros.org/Graphics/bg_enamel-gold.png) repeat;
height:10px;
position:absolute;
top:0px;
width:100%;
}

.ColumnBottom {
background:transparent url(http://www.westeros.org/Graphics/bg_enamel-gold.png) repeat;
bottom:0px;
height:10px;
position:absolute;
width:100%;
}

Of course, I am aware that there are many other aspects of the site that break down on mobile sites – images, font sizes, certain graphical elements – but if I know whether the overall layout can be made responsive, then the rest will hopefully be a lesser problem. But right now I don’t have a good enough handle on responsive design to be able to even say whether what I am looking for is obtainable or not.

2

Base on my experience, it 's possible but I think you should change the way to approach to responsive layout. Instead of using % for responsive, I recommend you capture the screen size to define the css for elements. It will look like this

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

As you see, with max width 1024 you have a css file and do the same for other size, you can hide some elements or change size to look better in the width of device.

3

I think I get how to define different stylesheets for different screen sizes, but I am not sure how it works to hide certain elements? Lets say I want to change from a menu with graphical elements and/or drop the sidebars at a certain size. How would I approach that?

4

Let me show you a simple example. We have a css class normal-menu and mobile-menu.

We define styles.css for general style (all of style with width > 600), it will look like this

<link href="styles.css" rel="stylesheet">

.mobile-menu{
    display: none;
}

And now we define css to hide normal menu in mobile size in styles-600.css

<link href="styles-600.css" rel="stylesheet" media="all and (max-width: 600px)">

.normal-menu{
    display: none;
}

Let 's try and see how it work

5

Great, thanks. Its past midnight for me at the moment, but I will try this out tomorrow and see how it goes. :slight_smile:

6

Hi,

I wouldn’t go chasing devices and device width but instead carry on with the methodology you already have and just remove the min-width from the wrapper. Close the window until content looks odd or doesn’t fit and then throw in a media query at that breakpoint and re-organise the content. Just carry on like that until you get down to 300px width approx.

For example in a few lines of code we can make the mid section of this page scale down to one column.


#Wrapper {
	min-width:240px
}
@media screen and (max-width:1000px) {
#MainMiddle, #MainRight {
	float:none;
	margin:0 0 20px 190px;
	display:block;
	width:auto;
}
#MainMiddleInner {
	margin:0
}
}
 @media screen and (max-width:850px) {
div.Index ul li {
	display:block;
	width:auto;
}
}
 @media screen and (max-width:550px) {
#MainLeft, #MainMiddle, #MainMiddleInner, #MainRight {
	float:none;
	display:block;
	margin:0;
	width:auto;
}
}

You would of course probably want to hide the ads on smaller screen ,remove various backgrounds and tidy up the layout a bit but the general idea is pretty straight forward. It’s just a matter of re-organising and changing rules as you go but of course you can’t actually change the html with css so there are compromises to be made along the way or make design changes that allow flexibility where needed.

One important thing to remember is that none of the above is of any use to mobile unless you add this viewport meta tag in your page.


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

Without that tag mobiles will assume the layout is 980px and your media queries won’t get triggered properly.

7

I’ve seen other comments along these lines, that it isn’t a good approach to try and change the layout based on identifying devices and/or device width, though I admit, I am not quite sure why? Specific devices I can see being limiting and in need of constant updates, but device width would be easily limited to a few selected widths, wouldn’t it?

In any case, concentrating instead on media queries, you say that I should remove the min-width from the wrapper, but in your example you include a min-width of 240px? Or is that a safe lowest min-width to use?

Looking at the example, precisely how do the various “@media screen and (max-width:XXX)” rules work? It means the style is only applied if the current screen is less than XXX or wider than XXX? I am trying to make sure I really know what I am doing before I am starting; its taking a bit to wrap my head around the whole concept.

It seems to me that the sidebars might be the hardest part to deal with. At a certain size, they just won’t make sense at all.

8

No there are hundreds of devices all with varying viewport widths and resolution, not to mention different landscape resolutions also. This list has over a 100 listed but is probably already out of date. There is also the issue of whether these widths include the scrollbar in some devices and not in others so you may have to double the amount of checks.

Suffice to say that checking for devices is out of the question unless you want to pick a choose a few common ones but then most likely you would have missed the ipad and ipad mini if you did that a year or so ago.

What you really want is a site that fits on all widths and you can do that on your desktop following the approach I mentioned and you will collect all devices automatically. Why leave desktop sites with a scrollbar at smaller widths? Let them have the better fit display as well. I always have about 3 browser windows open at the same time so they are all about 700px wide and when viewing responsive sites they are easy to use at small widths unlike sites that change only at device widths.

In any case, concentrating instead on media queries, you say that I should remove the min-width from the wrapper, but in your example you include a min-width of 240px? Or is that a safe lowest min-width to use?

There are some old phones smaller than that but most smart phones don’t go smaller. A lot of people take 320px (iphone) as the smaller width but it depends on the design and you probably don’t need any min-width at all in some cases.

Looking at the example, precisely how do the various “@media screen and (max-width:XXX)” rules work? It means the style is only applied if the current screen is less than XXX or wider than XXX? I am trying to make sure I really know what I am doing before I am starting; its taking a bit to wrap my head around the whole concept.

When you use max-width media queries it means only viewport widths smaller than xxpx will be applied. If you use min-width media queries then the opposite is true. I prefer to use max-width media queries and work from large to small when dealing with existing sites. If you were building from scratch then you would use min-width media queries with a mobile first approach and then get larger. Its 6 of one and half a dozen of the other. I just prefer the max-width media queries.

Remember though that the cascade still applies and if you were to apply rules after the media query then they may overwrite the rules in the media query. Generally you will create a header section and then at the end of the header section throw in a media query to style the elements for smaller viewports. Some people like to throw all their media queries at the end of the document but I find that doesn’t make it easy because you are jumping up and down the stylesheet to see what the previous rules were. Again its just a matter of preference and organisation.

It seems to me that the sidebars might be the hardest part to deal with. At a certain size, they just won’t make sense at all.

[/quote]

Your sidebars were around 180px wide IIRC and may look odd at full width if you still keep the content narrow. However, you don’t have to keep them narrow you can turn the content into inline content and have it go horizontal when reducing 3 columns into 2.

If you add the code I gave you to your site and see how the columns go from 3 to 2 and then to 1 column in just a few lines of code. (for testing just use the css terminal bookmarklet and then you can see changes without changing the existing code). I just knocked those up quickly without much thought but there’s no reason why instead of going to 2 columns you stay at 3 columns but divide the screen by a third for a while until it gets too small and then go to 2 columns. The choices are endless (well a few choices anyway :)).

It really is just a matter of testing and see what happens and then addressing the issues you see.

More info Here:

http://www.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

http://www.amberweinberg.com/responsive-design-isnt-breakpoints/

9

Alright, that makes a lot of sense. The main reason I was giving it some consideration was that there were a few plugins for my CMS that would allow me to set conditionals in the actual HTML based on device width, which would have made stripping parts of the page out pretty easy.

Thank you, now that part is a bit clearer. And that is some very good advice on how to structure the stylesheet, I can see how to work with that. Time for a lot of experimenting, but now I at least feel I know where to start. :slight_smile:

Btw, I did go ahead and added the viewport meta tag and I am bit confused by the initial result. Before I added the meta tag, the site seemed to render fine on my phone. It rendered the whole page, not just the leftmost part, and it seemed to be at 100% zoom. It also re-rendered the page just fine when I changed orientation of the phone.

After adding the meta tag, it renders the same way initially, but if I change the orientation, it doesn’t re-render at 100% zoom; instead I have to zoom back out to see the whole width. Is this expected behaviour?

10

Without a meta tag a mobile browser will look at your page (no matter what size it is) and assume that it is 980px (or 960px) wide. It will then scale that 980px down until it fits in the mobile viewport resulting in your 3 column layout being only about 3 inches wide with text very small and impossible to read without zooming back out again. It has to do this because that’s the only way it can fit the site in the window.

When you add the meta tag you say to the mobile browser “Stop it! I will control the layout width myself”. However if you don’t then have media queries in place to control the layout for the smaller screen it will appear broken.

You only add the viewport meta tag when you are using media queries to control the display or have a site that is already completely fluid (raw text perhaps).

As an exercise create a page that is just text content with no width and then view it on a mobile with and without the viewport meta tag. Without the tag the text will be zoomed really small as though the page was 980px wide yet you have added no width. With the meta tag the text will be normal size and readable and the lines will wrap with the true width of the viewport.

11

Alright, now I get that part. :slight_smile:

Since font size is definitely an issue on smaller devices, I presume I should also change from defining font sizes in pixels? Or should that also be changed via media queries?

12

You can change it via media queries although I would recommend you use percentage based font sizes to accommodate a wide variety of sizes, and also allow some fluidity to the page. Or use “ems” as a unit of measurement.

13

As Ryan said you should be using fluid font-sizes for your readable text and usually it is an idea to knock the text size up a little bit for mobile. 13px or equivalent is readable but 15px would be better. I usually set the size of my 'content text" via the body.

e.g.
body{font-size:font-size:93.7%;/}/* respects users settings (and would be about 15px if user has not changed defaults)*/

That means for most of my content I don’t need to set any font-size again because the bulk of the ‘content text’ is now already set. For headings and other things you can still use percentages but pixels would not be a disaster either. As long as most of the readable text is in ems/% then you can keep most people happy. It then means that to change all your ‘content text’ for mobile you just have to throw in a media query and bump up that default that was set.

14

Ah, thank you both so much, that was a lot less daunting than I expected in terms of taking care of the fonts at least.

Edited to add: One thing that came up as I was discussing this with my site’s co-owner was the question of ads. If I am using media queries to hide the ads on smaller devices, do those ads still count as being loaded in terms of impressions on the ad? I wouldn’t want to run afoul of any terms of service violations.

15

I don’t know anything about ads I’m afraid but google does offer responsive ads to fit in with a responsive site. No idea how well they work though. :slight_smile: