Minimal mobile friendly website

The following code example shows how we can create a minimal website style that fits in small screen reading.

The HTML:

<header>
  <div class="row">
    Website Title here
  </div>
</header>

<nav>
  <div class="row">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </div>
</nav>

<div class="row">
  <article>
    <header>
      <h1>Heading of the content</h1>
    </header>

    <p>Content paragraphs go here.</p>

    <footer>
      Author: Makzan
    </footer>

  </article>
</div>

<footer>
  <div class="row">
    Copyright goes here.
  </div>
</footer>

The CSS:

/* normalize */
body, nav, ul, li, p, h1, h2, h3 {
    padding: 0;
    margin: 0;
}

/* core styles */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body > header,
body > footer {
    background: #ffce25;
}

.row {
    width: 100%;
    max-width: 600px;
    margin: 0auto;
    padding: 10px;
}

/* addition styles */
ul {
    list-style: none;
}

h1, p {
    margin-bottom: .5em;
}

Note: We used box-sizing in our CSS. You may reference to the Mozilla documentation.

Please find the following screenshot showing the minimal web site display in both normal view and article view in mobile Safari.

sample-article-normal

Website showing in iPhone article view

Next Page → Mobile first approach

← Previous Page Chapter 2 – Content strategy


Last updated at 2017-04-05. Show version history

Comments

no comments yet.

Please login to chat.