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. 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. A desktop monitor would usually show a full row of 12 columns of information. However, a tablet’s smaller screen might only show nine columns of information of a particular row across the screen, while the other three columns are moved down to the next section of the screen. Similarly, a mobile might only show six columns of a particular row. The changes I made did require some adjustments to the format of the page to get its aesthetics right.

I had to recode 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.

Overall, the conversion process took about 12 hours, and I’m pleased with the result. You can view the updated site at www.grahamclementsauthor.com. The image above shows how the homepage used to appear.

Cheers,

Graham.

The post Converting an existing website so it can be viewed on a mobile. appeared first on Wangaratta Website Design Services.