Responsive web design is quickly becoming today’s standard for web design –and rightfully so, this type of design simply makes sense. Where websites were once built to appear on standard desktop monitors, times have changes and web design standards have as well. Today, it’s becoming increasingly important to design websites to load properly on mobile screens as well. Responsive web design involves making websites easy to browse –and use, on multiple screen sizes. If you’re curious about what’s changed in the world of web design in the last few years, let’s take a look at some of the key differences between standard web design, and responsive design.

‍

Navigation

How we navigate or browse has changed a lot with responsive design. Here are a few examples of how navigation has changed.

• Old version: The navigation on early websites was largely limited to left and top-hand navigation.
• Responsive Web Design: With the new responsive design, the old fashioned left-hand navigation only shows up for subpages.

• Old version: With earlier versions of websites, the top navigation was a fixed width and always visible to viewers.
• Responsive Web Design: With responsive web design, the top navigation is hidden when it is viewed on mobile phones. Generally, there is a universal symbol for menu (toggle icon) that alerts the viewer to the navigational bar that is available.

‍

The Width

The width that the website is rendered on a browser or mobile device has also changed. The width used to be largely a fixed dimension, but with responsive web design, it’s possible to view a website –or a version of the website on different screen sizes –such as mobile devices, without sacrificing quality.

• Old version: The old version was a “what you see is what you get” type of system. The width was very much fixed –and depending on your screen size, you would have to scroll in order to see the rest of the site.

• Responsive Web Design: With responsive web design, the website’s size changes from device to device. Your view changes based on breakpoints –especially ideal for mobile and tablet users. It is also possible to use the website in landscape or portrait orientation.

• Old version: Old versions of web designs with calendars were also at a fixed width that didn’t allow them to be viewed easily on mobile phones.
• Responsive Web Design: With responsive web design, the calendar is resized based on the screen’s available width, making it easier to navigate, read, and follow the calendar regardless of the size of your screen or device used to view it.

• Old version: The images on the old version were fixed, meaning that regardless of how small your screen was –you were going to get the full-sized image. This made viewing certain websites frustrating, since often there would be large blank spaces below the picture.
• Responsive Web Design: On a smaller screen the image will decrease. But as a certain breakpoint is met, the image could get bigger.

• Old version: The ‘Contact Us’ forms were a fixed width as well, and they weren’t user-friendly for people on mobile devices.
• Responsive Web Design: With responsive web design, the fields are sized to fit the screen width and still be user-friendly –making them an all-around better option for users.

As you can see, there are significant differences between old designs and responsive web design. The great thing about responsive web design is that it’s designed for screens –both big and small. No matter which new devices come out in the future, a responsive website will appear perfectly on screens of all sizes –exactly as it was intended to. If you’re in need of a website, be sure to ask your designer about responsive web design –and make sure your website is built for the future. For more information on websites for towns, contact Town Web Design. We provide responsive web design and website management for small and medium-sized municipalities.Image: UltraSlo1