Formatting for Small Devices

Formatting to deal with small screens is done with CSS. The code for it is stored at the bottom of your regular CSS file (if you have one). I have a simple intro to CSS tutorial but I haven't done a tutorial on media work because no one has really seemed interested in CSS and I'm not very good at this aspect of it. But the basic information is that you can change the way a browser displays a page simply by changing the CSS depending on the size of the screen. The secret is  @media only screen and (max-width : XXXXpx). My monitor is hi-def (1920px) and I try to code for both that and 1600 pixels. You can follow along with this information by resizing your browser window on any of the pages I've rebuilt. The last one I did was Terrell and you'll see what I goofed up on pretty quickly.

As you add these new sizes, you start with the largest - the special code for the smallest screens will be at the bottom. Here's an example

The template that I use for all my pages is set up like this 

(styles end with a semicolon ; - my comments are in italics)

body {     most monitors are still either 1600 or 1680 pixels wide but the newer hi-def 1920 pixels is rapidly gaining and will probably overtake them next year
font-family: Candara, Roboto, Arial, Helvetica, sans-serif;
font-size: 1em;  Sets the font to the size requested by the visitor's browser preferences
color: #000;   Font color
background-color: #ddd;    pale gray - on some of mine, it's a gradient
padding: 1em 5em;   All browsers set a default blank area around web pages, I prefer a really wide blank area on the sides to keep my pages in tune with older 1600px monitors
}

So, to deal with small devices, we tell the browser to check its viewing area and follow special rules. The first break-down I use is at 1050 pixels. At that screen width, the wide padding around the page disappears. It's the only thing that changes at that width. The FireFox browser has a special tool that allows you to see what a small device sees - It's under More Tools and is called Responsive Design Mode. Just keep in mind that RDM and resizing the browser window aren't EXACTLY the same as viewing the page on a phone and forcing a phone to see CSS changes isn't easy.

@media only screen and (max-width : 1050px) {
body {
padding: 0;
}
}

The next break-down comes quickly at 1020 pixels. I have two <div>s that I call "wrappers" on my pages that allow me to adjust page widths, add borders, change background colors, etc.

#outer-wrapper {

I have two more break-downs for the pages when they get down to 820 and 750 pixels, which is an average height for a phone screen. The visitor turns the phone on its side and the screen adjusts to the wider width. (Smallest screen widths are about 320px but the average is going back up each year with newer phones at about 414px.)

The biggest problem I had when I started all this was tables. Tables don't do well on small screens. A good example is our county list on the TXGenWeb site. If I hadn't changed it - it would have run off the right side of the screen and a visitor would have to scroll to the right to see all of it. Some phones won't give you the option to scroll - you have to pinch and resize. I told the browser to break the table at 1200 pixels. At that point, the table cells forget that they're table cells and just become a series of boxes inside the table rows and they wrap to the next line when they run out of room. So, even at the narrowest, nothing hangs off the right side - font colors change, the cell border color fades, the row border becomes a thicker red and the table looks completely different. You can see the CSS at http://www.txgenweb.org/ includes/txgenweb.css and search for table-county.

A LOT of our CCs use tables to create their pages and those tables create a problem on small devices.

The other option is to actually build a completely different site for small devices and use the .htaccess file to redirect mobile visitors to that page.

I hope this isn't too much information, I didn't realize how much room it was going to take up. Maybe it'll help you to understand the process and I'm more than happy to discuss it more or answer more questions. Rather than try to deal with my communication deficiencies, you can Google topics like "how to use @media only screen" or "formatting CSS for small devices". If you run into something you don't understand, I can probably help. I found that the best way for me to start was to make a separate copy of my Rusk County site and jump in. My first attempts were terrible and I still have some counties that need to be upgraded to HTML 5 but Google's page cops quit bothering me a while back.

Oh, and I don't memorize all of this, I search for it on Google as I need it. The important part is knowing that it can be done and then searching for how to do it. The longer I use CSS (about 10 years now), the more I remember.