Responsive Images

You have no idea how much effort this took

Brief: Change the website to an image from the wedding with a thank you message. Should also be mobile responsive.

Effort estimate: 1 day

Me on day 1

Actually if 1 day = 12 hours than that was a remarkably adroit estimate on my part. To be honest the reason it took so long is my fault. I wanted to use srcset because I haven't used it before. I did not want to use a background image and a div because I have used that before.

Time creating a mobile-version of the site and selecting and image: 1 hour

Time making the text float and move around as the media queries came into play: 1 hour

Time trying to get srcset to do something that would be easier with a background-image and div: 8 hours

Time spent editing images, finishing site and uploading final site: 1 hour

Well - it is mobile responsive and tiny (pictures are the only external files) which is what I wanted. I got to play around with responsive images and make something simple enough that I didn't have to spend all that much time on it.

I was also really surprised about how much I've learnt since putting that original site up. My meta-tags weren't closed, the visited and unvisited links were the same colour (accessibility no-no). My Mum also complained that when she looked at the site on desktop she saw pictures she hadn't seen before - the result of the main part of the image not showing on mobile. It's amazing how much of a difference a few months has made. 

Read More