Chris Parker | Emmy Winning Media Designer

Your 1-Stop for All Things Multi-Media

"From Start to Finnish Your Next Multi-Media Project will Sizzle"

Understanding CSS Website
Layout For Mobile Devices

Hey folks!  Welcome back to The Emmy Winning Blog.

Last time out we talked CSS, files that affect a website’s layout and design.  If you missed it then shame on you!  But wait… through the power of the Internet you can click HERE to read all about it.

Links do come in handy don’t they?

Anyway, in a nutshell, through the use of CSS we can create any look for our websites we want.  Color, type, font, layout, and shape are just a few things CSS can control.

But did you know that CSS can also create different looks on not only your computer, but on your tablet, your cell phone and even when printed out?

In other words, CSS can make your website appear one way when viewed on a desktop computer and then make it appear in a totally different way when viewed from a tablet or cell phone.  CSS can even streamline your site’s design when printed.

As the online marketplace turns toward mobile devices, understanding and controlling  your site’s design becomes even more critical.

For example, here is what my site looks like on a desktop computer.

The Emmy Winning Blog desktop layout The Emmy Winning Blog desktop layout

As you can see it’s layout is optimized for the size and width of a typical desktop monitor.

And here is what it looks like on a phone or tablet.

The Emmy Winning Blog mobile device layout

This layout uses a primarily vertical graphic interface as opposed to the desktop’s horizontal interface.  This layout takes advantage of a cell phone’s and tablet’s vertical spaces.

The beauty of this is we don’t need to create TWO separate websites, one for desktops and one for devices.  We just need to create our HTML pages once and then define our CSS based on where the content is being viewed.  This makes updates universal and content management even more streamlined.

In order for CSS to create different rules for different media, we must insert a media query.

A quick example of using a media query for devices is to define the media we want to affect.  This is done by using the “@media{}” rule.  This tells CSS that special rules will be applied for certain media.  Here is what our complete rule parameter will look like:

@media only screen and (max-device-width: 1020px){OUR RULES}

This defines that only screens with a maximum device width of 1020px will display the “OUR RULES”.  Note the “device-width” and “only screen” constrains these rules to mobile devices ONLY and not for desktop computers or other media.  The “1020px” defines our screen width encompassing most of the popular devices on the market.

Applying this to the real world, let’s say we have a menu list for our website consisting of “Home”, “Services”, “About”, and “Contact”.  Each of these menu links will take us to the appropriate web page.  Okay, first thing’s first we’ll write this list as HTML so the Internet and our browsers know what this is:

<nav id=”menu”>

<ul>

<li>Home</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

</nav>

We’ve defined our menu with the “nav” HTML tag with an ID of “menu”.  Inside our “nav” tag we’ve defined an un-ordered list (ul – meaning not numbered) with each link defined as a list item (li).  I have elected not to insert the links to keep the write up simple for this tutorial.  To insert the links you, would inside each list item insert an “a” tag with a “href” link:

<li><a href=”home.html”>Home</a></li>

The “href” defines the link while the “home.html” is the link.

Anyway, getting back to our topic, we now have a list that looks like this:

Unstylized List

Let’s now create a proper menu header for desktop layouts, which means creating a horizontal menu.

Using CSS we’ll define our menu layout as such:

#menu ul li {

display:inline;

list:none;

padding: 20px;

margin:0;

font-size: 18px;

text-transform: uppercase;

background-color:#333;

color:#fff;

}

This changes everything that is displayed within our “menu” list from being stacked to becoming a horizontal line.  Notice also that we eliminated the bullet points and reformatted our padding and margins as well as increased our font size, made our text uppercase and white and created a gray box around each item.

A Basic Desktop Menu A Basic Desktop Menu

As you can see this works well on a desktop layout and even okay for a device that is in landscape mode.  However, many cell phones are used in the portrait or vertical mode.  What Then?  Our horizontal menu will end up looking like this:

horizontalmenu_device

A little small and hard to navigate.   Well, that’s when our CSS media queries come in.  So we’ll now add the following to our CSS file.

#menu ul {display:inline;}

@media only screen and (max-device-width: 1020px)

{

#menu ul li {

display: block;

padding-left: 15px;

padding-right: 0;

padding-top: 10px;

padding-bottom: 10px;

margin-bottom: 5px;

font-size: 22px;

}

}

We’ve re-stacked our menu items as well as reformatted our padding for a more optimized device layout.

Vertical-Device-Menu

Note, because we defined a media query our desktop layout still retains it’s horizontal layout.

So there you have it a basic overall understanding of CSS media queries and how we can alter our website layout to fit almost any media platform, an invaluable resource for today’s device driven market.

If you found this article interesting or have something to add please let us know by leaving a comment.  Comments are our friends.  And don’t forget to like us on Facebook and subscribe to to The Emmy Winning Blog.

Until next time…

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.