The first version of allhouseprices.com was not mobile friendly at all. On smaller devices, the navigation would go above the logo, half of the search form will hide behind the page, and the results will cramp together.
Google’s mobile frindly tool failed the site, showing the home page in a very wrong way.
So I decided to fix that, and here are the steps I took:
The Header
On big screens the logo and navigations are within two floated divs, the logo floats to the left and navigation to the right. I found the cut-off width of the page, behind which the header will be all messed up. Using the media queries I removed the floating from the logo and navigation and centered the header.
The Search input
At first the long search input had 100% width, but padded largely to the left to accommodate the magnifying glass icon. This didn’t make sense, as in most browsers, excluding IE, the width does not include padding, resulting in the form being half hidden in smaller screens.
I felt the form needed a full revamp. So I included the input text within a div element and kept its width to 100%, so it could take all space available. The containing div was also wrapped within a div, which contained the search icon too. These changes made the form very flexible, without using media queries.
The Chart
The chart was first built with divs elements absolutely positioned. This made its layout quite rigid, so another overhaul was required. I made the divs to float to the left, and using media queries, halved the width of the columns, behind the cut-off page size.
The Results
The results were first showing as a simple table. But as we know, tables are not responsive, and the columns would show quite narrow in smaller windows. To fix this, I turned the table cells into divs, styled as display:table-cell, within containers styled as display:table-row. This way, the big screens would still show the results as a table.
For smaller screens, I changed the styles ‘display:block’ using the media queries, and stacked the cells of the row on top of each other. Adding some padding and border, separated the purchase details quite nicely.
The Footer
The footer took the same treatment as the header: centring and stacking the logo and navigation above one another.
After releasing the changes live, I used the Google’s tool again, and now the site passed the test.