Hi all,
I finally bit the bullet and decided to convert a website that had not been built with mobile phones in mind to one that could be easily viewed on a mobile. This means that the pages are now responsive and resize when viewed on a mobile. It was one of the first websites I had built and previously the text was too small to be read on a mobile and the pages overflowed on a mobile screen so a user would have to scroll right to see the full page.
The process involved introducing bootstrap to the site’s pages. Bootstrap is a form of CSS that allows rows of columns of information to be set up, and for the rows to break into columns as the screen size gets smaller. So a desktop monitor would usually show a full row of 12 columns of information. But a tablet’s smaller screen, might only show 9 columns of information of a particular row across the screen, while the other 3 columns are moved down to the next section of the screen. Similarly a mobile might only show 6 columns of a particular row. This did require some changes to the format of the page to get the pages aesthetics right.
I had to re-code the menu, so that on a smaller screen the normal menu at the top of a computer screen converts to a hamburger menu on a mobile. I also included some @media tags for items such as the banner, which allows different sized banners to be displayed depending on the screen size. So a small banner would be shown on a mobile.
All up it took me about 12 hours to convert the site and I am happy with the result at www.grahamclements.com. The image above is what the homepage used to look like.
Cheers,
Graham.
