Need for adjusting the layout

In the previous chapter we made our site fluid so that it alters according to the width of the browser window. But the basic layout remains the same, with a header at the top, content and the sidebar next to each other, and the footer at the bottom.

Let's review how the site is now looking on mobile devices. First, on iPads in portrait mode, as shown in the following screenshot:

The layout is looking pretty good on an iPad, but I think we can improve on it as follows:

• The social media icons and call to action button in the header are large and make the header quite deep. Some layout and sizing alterations could tidy things up a bit.

• The layout of the sidebar and content might work better if the sidebar is below the content, making the rows of text in the content wider and easier to read.

These changes won't have a big effect on user experience, but they will make the site appear neater and more polished, and the repositioning of the sidebar should improve readability...