It was only 9 months ago that I launched my new updated website, and I’d never have imagined that I’d be changing things so soon after all the work I put into developing a single unified look and feel for my entire site. But Google had other plans, and I’ve been back in web developer mode again for the past 6 weeks so I could learn how to meet the new Google requirements for a mobile-friendly website by their deadline of April 21st.

Here’s how Google saw PlanetJune before today:

Old site: not mobile friendly 🙁

It’s been a huge task but I’ve finished with 5 whole days to spare(!) and I’ve just launched the new, responsive, PlanetJune website. (If you’re reading this by email or in a feed reader, please do click through to see the site!)

If you’re using a desktop, laptop, or large-screened tablet, you may not notice any difference in the site – I’ve tried to keep everything as consistent as possible while making it easier to use for those of you using smaller screens. If you previously had to zoom into the pages to read and navigate my site, you should now find that everything loads in a clean, clear format so you can read everything without needing to zoom.

Here’s how Google sees PlanetJune now:

New site: I’m mobile friendly!

The screenshots above are from Google’s Mobile-Friendly Test page – as you can see, PlanetJune.com is now Google-approved for phone and tablet users! (If you need help finding out how to make your site mobile-friendly too, I recommend you check out Google’s Mobile-Friendly Websites guide as a starting point.)

Although I wasn’t delighted to have to to take on such a steep learning curve and large project with only 6 weeks notice, I’m pleased to have done it. Acquiring new skills is always fun and useful, and the more new pages I tested on my phone, the more I appreciated the simplified design for smaller screens. It’s hard to show this in a screenshot, but in case you’d like to get a better idea for how it works, here (below) are 3 side-by-side snapshots of the new homepage at 3 different screen widths (separated by black bars for clarity).

This is called responsive design – instead of you deciding between seeing a full ‘desktop’ version and a pared-down ‘mobile’ version, my page will detect how wide your screen is, and modify the page layout to fit your screen, so the text is always large enough for you to read without zooming in. If you rotate your phone or tablet from portrait to landscape, you may notice that the layout changes as your screen becomes wider!

L-R: instead of shrinking the page to fit the full site onto a narrower screen, now the elements automatically move around to fit your screen at a readable size.

Of course, you don’t need to worry about how it works – the end result for you should just be a seamless and enjoyable browsing experience, whether you use a desktop or laptop computer or any size of smartphone or tablet.

I’d like to thank the many helpful volunteers in the PlanetJune Ravelry group who’ve spent the past few weeks helping me test the functionality and layout of the new site on every device, operating system and browser we could find, to try to ensure it’ll work smoothly for everyone! This rigorous testing hopefully means that I’ve ironed out all the bugs before launching this new site. However, there’s always a chance that something won’t work for you, and I’d be very grateful if you could email me immediately if you find anything that looks strange, wrong, broken or unusable, so I can fix it.

I do hope you enjoy the new PlanetJune mobile-device experience – please let me know if you like it!