Sidebar Details That Drop Below Everything on a Phone

A booking button above the footer

On a computer, a bed and breakfast's site shows its rooms in a wide column, with a narrow sidebar beside them: a booking button, the winter offer and the phone number.

On a phone, the same page shows the welcome, every room, the breakfast menu, the directions and the cancellation policy. The booking button appears last, just above the footer.

The owner, who checks the site on the office computer, has never seen it there. Phone visitors who wanted to book have, and some give up scrolling long before they reach it.

Why the sidebar falls to the bottom

A responsive layout rearranges the same page for different screen widths. On a wide screen, the rooms and the sidebar sit side by side.

On a narrow screen there is only room for one column, so the columns stack, one above the other, in the order they appear in the page's code.

The rooms were written into the code first and the sidebar second, so the sidebar goes under everything.

The layout is doing what it was told, and nobody decided what a phone visitor should see first.

What phone visitors reach last

Sidebars tend to hold the details that matter most to someone ready to act:

• The booking button, the reason many visitors came.
• The seasonal offer, which only works if it is seen early.
• The phone number and the hours to call.
• Rates or availability, often in a small table.
• A short review or award that reassures a first-time guest.

On a computer these sit beside every room description. On a phone they arrive after the last word of content, where only the most determined visitors find them.

The order of the code is the order on a phone

Every page is written as a sequence: header, then content, then sidebar, then footer, or whatever order the designer chose. Style rules arrange that sequence into columns on a wide screen.

Take the columns away, as a narrow screen effectively does, and the sequence is all that is left. It is also the order a screen reader reads and a keyboard moves through.

So the order of the code is a design decision in its own right, and it decides what phone visitors meet first.

Setting the order on purpose

Start by deciding what a phone visitor needs in the first screen: what the place is, how to book, and how to call. Those details belong early in the code.

The booking block can be written before the room descriptions and placed to the side on wide screens. A computer still shows the familiar sidebar, while a phone shows it near the top.

Newer style rules can also reorder blocks on screens that support them. Use them sparingly.

When the visual order and the code order differ, keyboard and screen reader users meet the page in a different order from everyone else, and focus jumps around the screen.

A worked example

An ATV tour company on a ranch outside a Thompson-Okanagan town runs two-hour, half-day and full-day guided tours from April to October, and sells gift certificates all year.

Its responsive site, built last year, describes each tour in the main column. The sidebar holds the booking button, the phone number, a short safety note and, this month, a line about gift certificates for Christmas.

On a phone, all of that appeared after four tour descriptions, the equipment list and the common questions. Phone visitors called to ask how to book, and nobody connected the calls with the layout.

The booking button, phone number and gift certificate line now come first in the code, as a compact strip under the header on phones and as the top of the sidebar on computers.

Each tour description also ends with its own booking link, and the safety note and the map follow the content on phones. A phone visitor now meets the way to book before reading a single tour.

Keep the sidebar short

A sidebar collects things over the years: an archive, a weather widget, social icons, an old award. On a phone, every one of them sits between the content and anything useful placed below it.

Review it as a list. Keep what a visitor on that page needs, move what matters most into the content's path, and let the rest go to the footer.

The seasonal offer needs an owner as well. A winter line still showing in July tells phone visitors, who now see it first, that nobody is minding the site.

Checking on a real phone

Open each main page on a phone and scroll from the top, noting where the booking button and the phone number first appear. Then try a second phone of a different size.

The Mobile Usability report added to Webmaster Tools at the end of October flags small text and links placed too close together. It cannot tell you that the booking button comes after everything else.

Then ask someone outside the business to book on their own phone while you watch. Where their thumb hesitates is where the order needs work.

The counter-case

Some sidebars hold only secondary material: archives, related articles, links to social profiles. On a phone those belong after the content, and stacking them there is correct.

A site whose header already shows a booking button and phone number at every screen size has covered the essentials, whatever happens to the sidebar.

Either way, the test is the same: whether the code puts first what a phone visitor needs first. Check it on a phone rather than assuming.

Putting booking details first

1. Scroll each main page on a phone from the top.
2. Note where the booking button first appears.
3. Decide what a phone visitor needs in the first screen.
4. Move those details early in the code.
5. Place them beside the content on wide screens.
6. Add a booking link at the end of each description.
7. Send the rest of the sidebar to the footer.

Step four is the real fix. Style rules can only arrange what the code provides, so details written early in the code reach phone visitors early, and keyboard and screen reader users too.

Clearing out the default widgets a sidebar may still carry, and filling it with what a customer on that page needs, is shown in a log in link in the sidebar of a business site.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.