Skip to Main Content

Teacher Site Style Sheet: Mobile Device Considerations

Following this Guide formatting text and other elements on your SSD website will make your sites easier to read and more engaging.

How to Simulate Smaller Screens

Shrink Your Window

More and more visitors are viewing our sites on mobile devices. With a little planning, your site can be just as effective on an iPhone as on a 21" monitor.

Place the most important information in the upper left corner of the page.

Your site will flow to accommodate smaller screens by "stacking" boxes on top of one another. The order is important to remember. It starts with the left column and stacks all those boxes in order. The second column will come next, and then subsequent columns to the right will fall below that.

See it for yourself

Grab and click on the corner of your browser and steadily make your browser window "skinnier" -- this will force the boxes to cascade and show you how your site will look on a tablet and a smart phone.

Websites Become One-Column

How Long Is This Site?

When viewed on a mobile phone, your site will become a single column of boxes. To limit the amount of scrolling a visitor must do, try to keep extra text and images to a minimum and size them small before adding them.

Use New Pages for New Content

One thing that helps users locate what they are looking for is a well-categorized page layout. The page tabs will always be at the top making this content the first thing they see.

Keep Content Short

Small Images; Big Impact

Every inch of space is valuable for mobile users. So be frugal in what you add.

Size images "before" adding them to your site.

Size images small to grab attention, but not take up too much space. Use one of the tools referenced on this site to modify the size of images prior to uploading them on your site.