So our website suffers a bit from what we call ‘shoemakers shoes’ syndrome. We’re so busy creating fabulous online marketing tools for our clients, that our own site tends to suffer. This weekend, our team decided this needed to change, so we’ve been hard at work on a new, responsive version of the site, and here it is! Wait – it looks exactly the same? That’s the idea! Instead of a huge overhaul, we’ve simply added in some responsive styling, so on smaller screens visitors have a better experience. Responsive websites basically just rearrange their content in order to display at its best on all screens, from huge monitors, all the way down to the smallest smartphone.
So, without further ado, here is the new website at it’s normal, full-sized version:
This is the next size down. If your screen is less than 1024pixels wide (smaller monitors, Facebook frames), you’ll see this version. The main differences are that the grey background is hidden, so the content has a bit more room, and the logo is snipped slightly on the left. If you visit the site, you’ll also notice that at the bottom of the site the four footer widget areas are two by two, instead of four across.
The smallest size, which works for smaller tablets, smartphones, etc. kicks in if your screen is less than 660pixels wide. I’ve included two screenshots here, one at the larger and one at the smaller size. You’ll notice that this one looks different than the previous two. Some of the items from the top have been removed, so the main content isn’t pushed down too far. The navigation is now a single drop down menu, which is much more user-friendly for touch screen visitors. If you’re looking on a smaller screen, you’ll also notice that the four footer widget areas are now stacked on top of either other, instead of side by side.
On our website, we’ve used all the same code from the original custom theme, and added a few small tweaks using ‘breakpoints’. Breakpoints are basically the sizes where the layout changes. We’ve only used 2 on our site, but you can add as many as you need. There isn’t a solid rule for how best to decide this, you’re best to work with your designer to figure out where the design needs to change.
Wondering what your site looks like on smaller devices? You can check this by simply dragging in the sides of your browser window. Some sites may have more advanced mobile detection, in which case you’ll want to try looking at them on one of the devices, or using an emulator. I’ve been using the Opera Mobile Emulator, which works really well.
Need some help developing a responsive design for your existing website? We’d love to help. Please contact us to learn more – 1-800-579-9253.
If you have any thoughts about our new version, please leave them in the comments below!