You may seen the word “responsive” bandied about when describing websites, themes, or templates. Do you know what that word means?
Responsive describes a website that adjusts how it displays based on the device and screen size on which it is being displayed. So how a site lays out will differ depending on whether the screen is a large desktop computer monitor, a mid-size screen tablet or laptop, or a small smartphone screen.
The goal of a responsive website is to optimize how the content is displayed so the website visitor can view or interact with the content meaningfully on the size of the screen they are using. For example, large image backgrounds or huge, high resolution page images that look great on a home or office computer monitor may be disabled on a small smartphone screen where they would just clutter up the content and eat up the user’s data bandwidth, which the user may not appreciate.
Or suppose your home page has three columns of content across the top. On a responsive site those columns will stack into one column on top of each other on a smaller screen so a user can actually read each column’s text easily and scroll vertically through the content to see all of them.
Some themes and templates allow you to change the settings for different areas of the site so you can control what you want to display on a desktop computer or a tablet or a smartphone.
How can you tell if a site is responsive?
Of course you can view your site on your smartphone and tablet and see how it displays. If on a smartphone your site looks like a tiny miniature version of the desktop site, your site is not responsive. If the site has adjusted, the menu has switched to the smaller phone menu at the top, the content is legible and adjusted for your screen.
Another quick way to see if you site is responsive is to check it on a desktop browser. Take the corner of your browser and just move it to the left to make the site narrower and narrower in your browser window. The content should collapse with the window and ratchet down into vertical boxes. The menu will change to a small button type menu, usually on the top left of the screen.
In this image you can see this responsive website in fullscreen mode on a desktop monitor.
As the browser is narrowed, the large images at the top go away, the three horizontally columns with my main services stack vertically, the menu and logo change to a smaller, mobile menu layout at the top.
