The process for designing for a mobile webpage isn’t that conceptually different from a desktop. It just requires you to use some extra steps.

For example you will normally follow a basic formula of:

1. Receive Project Requirements
2. Sketch out/mock-up designs
3. Build HTML
4. Test in various browsers
   1. Modify as necessary
   2. Repeat testing

The core difference is that you will be changing where you test, and how you modify your designs.

Before Responsive Layouts became popular, the two most common forms were to have a fixed with and a flexible layout system. This is because we use the same ideas in regular desktop webpages.

Your design will also most likely have a few differences. For example, on most mobile sites, you do not see side bars (aside) at all. Usually, the design follows a very linear flow top to bottom.

Fixed Width

Many sites moved to a fixed width format once browsers started to be over 1000px wide. The idea was to keep the designs from getting so wide for certain users, while allowing control.

Generally this is done by having a container that is sized then positioned either to the left, or center, on the screen.

Because the size of the containing element is known, everything can be sized for it. Your images can be designed to fit that full width, or be half.

HTML Code:

  
Page Title
  

    
....
    
  

CSS Code:

If you are careful with your layout tools, it will be easy to skip the img selector/rules as it will be taken care of naturally.

.container {
  width: 480px;
  margin: auto;
}
.container img {
  max-width: 100%; /* be at most, the full width of the container, so you don't break out of the container */
  height: auto; /* make sure the image resizes naturally with the width potentially changing */
}
.btn { ... }
h1 {
  font-size: /* and other rules, etc. */;
}

Flexible Width

In many ways, we started with flexible width designs when the first web pages were built. This is because prior to CSS, many web pages were just flowing documents that kept to the size of the web browser.

Now a days, we can use flexible design, with min and max widths to “encourage” the design to look correct. This can allow us control the flow of the page, while maintaining some consistency between devices.

Using the same HTML code as above, you may run into CSS that works like:

.container {
  min-width: 350px;
  max-width: 600px;
  margin: auto;
}
.container img {
  max-width: 100%;
  height: auto; /* make sure the image re-sizes naturally with the width potentially changing */
}
.nav a {
  min-width: 120px;
  margin-right: 15px;
  padding: 10px;
  /* other rules as needed... */
}

HTML Coding for Fixed and Flexible Mobile Design was originally found on Access 2 Learn