This website stores cookies on your computer. These cookies are used to collect information about how you interact with the website and allows us to remember you. We use this information in order to improve and customize your browsing experience and for analytics and metrics about visitors to this website. If you decline, your information won’t be tracked when you visit this website. A single cookie will be used in your browser to remember your preference not to be tracked.
Blog > Images > Issues with Images

Issues with Images

The thing I have found most difficult whilst putting this site together is rendering images correctly. Some problems have been more involved or required more time to think, but I never pictured, excuse the pun, images would be something I would have to fight with. Getting them to display correctly on different devices has been a pain and the main reason for this I think is lack of planning. The best example of where I have gone wrong on this is the archive page. I had the idea of the section at the very beginning of development and started taking screen prints that looked great. The screen prints taken on my laptop looked great on my laptop.

This website is for a particular niche and I imagine most people who come to it will be on a laptop or desktop but as more than fifty percent of internet traffic being on mobile devices I should have considered this from the start.

Bootstrap 4 has a concept called break points and using their styling you can have different images display depending on the size of the device that is viewing the page. As I was building the site I would take a single screen print of the page that I wanted to display in the archive, but it would be a while before I would come back and start building the archive section of the site. My single image was not fit for purpose. I have scaled and cropped the best I can, but it doesn't look too pretty. One option that is open to me even now is to check out an old git commit and take all of the screen shots I need. Right now though there are other things I want to look at and the mistakes serve as a reminder to me that I do need some planning rather than just building as I go. If I was to gather images of an archive page now I would be grabbing in excess of fourteen screen prints.

Remedies

The first as I have already said is planning and the second is to retrospective fixes by checking out an old commit, make sure you are using source control. Another good takeaway, slightly divergent but it came out of this process as a lesson learnt, is to create a README file in the root of the project and in there document the styling rules for the site. For example all sub header are contained within a h4 tag or all images require a caption.