Responsive Design: Created CSS for different viewports, not responding

[toad78]

I've created a series of CSS queries for different viewports, but I guess I'm not getting the results I want.

On the iPad tablet device in landscape mode the site looks pretty good. Not so great in Portrait. I could use some pointers on how to fix that.

The Android in landscape mode not so hot. The menu flows underneath the first menu items, so I'm not sure how to fix that issue, plus a slight gap on the right of the site. Ditto for portrait view.

On the iPhone in landscape mode, it looks okay. The menu still flows underneath the first main menu item like the Android does and the 'Announcements' on the bottom needs some space between the 'Announcements' heading and the menu links. In Portrait it looks pretty good with the exception of the main menu item flowing underneath the first menu item.

I thought that if I modified the font-size to be 70% that would've fixed the problem and the padding around the main menu items, but I guess not.

Any pointers?

[Greg Baka]

I looked at the page on a full-sized monitor, then started pulling the screen width narrower to see how the "responsive" feature responded...

But all I saw were big alterations in the layout at certain widths (from monitor to tablet width, and then from tablet to large phone width)

If you stick with this partial method, you will miss out on most of the advantage of a completely responsive site. For one thing, the partial method won't work well on all devices (which I guess you are already noticing). Also you may find yourself having to re-build the site in a couple of years when some other popular device comes out in a new screen width.

Here is a page that is fully responsive: http://www.easydigging.com/Garden_To...Grape_Hoe.html view it on a big monitor, then grab the right edge if the screen and slowly shrink the screen width. Notice how the pictures shrink and expand and restack themselves to always look acceptable. The text size stays consistent, but the line length changes. There are big alterations at tablet size, iphone size, and at small phone size - but there is also continous resizing of images and text BETWEEN those jumps. This means that the page does not have to be rebuilt later when some new width device is introduced.

This page was built with Twitter Bootstrap. It handles all the responsive stuff. The web designer just needs to stack the content so that it rearranges itself in an attractive manner.

[toad78]

So to be brief, should developers keep with fluid layouts from now on? It seems quite a hassle to take a fixed width design and convert it to a fluid layout for mobile devices, wouldn't you think?

[Greg Baka]

From what I see, the answers are Yes and Yes

Once upon a time, we could make one design that fit a laptop screen and let that work for the bigger monitors too. Those days are over. The range of device sizes is now too broad for that approach. So yes, we should do fluid layouts from now on.
*there may be a couple of niches that will only be on certain size devices, like an ecommerce site selling phone apps...

And yes, it is a hassle to make a fixed width site into a fluid site. But we have to if we want to properly serve all those who view the site. Mostly it's a learning curve thing. Once you've converted a dozen pages or so to fluid design it gets easier

[benbob]

...Here is a page that is fully responsive: http://www.easydigging.com/Garden_To...Grape_Hoe.html view it on a big monitor, then grab the right edge if the screen and slowly shrink the screen width. Notice how the pictures shrink and expand and restack themselves to always look acceptable. The text size stays consistent, but the line length changes. There are big alterations at tablet size, iphone size, and at small phone size - but there is also continous resizing of images and text BETWEEN those jumps. This means that the page does not have to be rebuilt later when some new width device is introduced. ...

This is very impressive indeed.
Is there a tutorial somewhere that explains how to code this? I try to stay away from templates and wisywig software and would love to learn how to code this.

[Greg Baka]

Hi benbob. Thank you for the compliment

I am re-building the old EasyDigging pages to be responsive. If you dig a little deeper into the site you will start seeing some pretty ugly old fixed width pages

The responsive pages are built with Twitter Bootstrap, which has already figured out all the basic CSS to make it responsive. Twitter Bootstrap (TB) has some tutorial pages at their site, which I definitely made use of. The rest I taught myself, with occasional help from the good folks here at SitePoint Forums.

Here are some tips I learned...

1. Never mess with the two Twitter Bootstrap CSS files. One is general CSS rules, the other is responsive CSS rules. Instead create a 3rd CSS file for each site that overrules particular small bits of CSS from the TB CSS files
2. build a responsive page in horizontal layers, like a cake.
3. build each layer from left to right.
4. build on a wide monitor, with the TB device widths marked on the top of the monitor frame.
5. Use % widths for images where possible. In TB the % width is a % of the invisible column the image is placed in. So a 90% image will shrink with the screen width, but never stray out of it's invisible column. And 4 images each sized at 45% will always appear as two rows of paired images (a block of 4) that all shrink proportionally to the screen width.
6. Use square images if possible, especially when images are displayed side-by-side and you want them to all vertically align. As the screen width narrows and the pictures shrink, the heights will continue to align.
7. If you must use rectangular images in a side-by-side arrangement, first use a photo editor to first make them all proportional. Like all the heights are exactly 3/4 of the widths. This allows them to stay vertically aligned as the screen shrinks.

These were probably the most important rules. The other technique is this:

After every major addition or edit grab the right edge of the screen and narrow the width through the full range.
a) You will see that each "cake layer" gets narrower and taller. (if there is text in the layer, if there are only images then layer will get shorter)
b) At the different device widths you marked on your monitor (PCs&laptops / Tablets / Big-phones / Small-phones) you will see noticeable jumps in the layout.
c) Tablet views can get might skinny. You may need to set a few "tablet only" CSS rules
d) Phone views turn any columns inside your "cake layer" into a new set of cake layers. If a layer has a right, middle, and left column then on a phone it will display all the right content on top, then all the middle content below that, and finally all the left content. So make sure you put them in a logical order when building your initial wide-screen layers...
e) frustration can be minimized by using Text Only layers and Images Only layers. This is because text and images behave in opposite ways as the screen width narrows (text gets taller, images get shorter)

Twitter Bootstrap is free. It's easy to use. I suggest just downloading it and playing with it. Experiment with re-creating one of your old fixed width pages. I mostly just cut-n-paste text from my old fixed pages into my new responsive pages. Though I do have to spend a little time using a simple photo editor program to crop the old photos into squares or equal rectangles

[toad78]

In The CSS3 Anthology, beginning on pg. 366, it does give some great pointers on how to calculate fluid widths and how to create responsive design layouts with percentages. We can't be perfect for every device, but it does explain how we can make sites work with different device widths flexibly (if that is even a word). I'm kicking myself because I've had this book for about a year and forgot that this information is covered!

Time to brush up on my reading once more!