Responsive Design: Changing Norms

The ’90s were a simpler time for electronics: phones were analog, pagers were commonplace, and you couldn’t talk to your TV remote without looking insane. Nowadays, everything is ‘smart’ and you’re the crazy one for NOT talking to your inanimate electronics. Everything has internet access and no screen size is the same, from your Smart TV browser to your curvilinear computer monitor and all the different smartphones released year after year. All of these devices have a different aspect ratio. 

Responsive Design | Three Screens - Desktop, Tablet, Mobile

Kind of a weird concept? Yeah, we know. 

With all of these different users accessing your website from different devices, the actual layout used is almost never just a normal desktop anymore. Most users are using a mobile device now –  64% actually! Since phones are so readily accessible, this number has been rising over the years and is expected to continue its ascent. 

Now we understand the change that’s happening in the industry, we need to be reactive. We don’t want to see a website showing up at 2000px wide on 300px screen – there’s going to be a lot of horizontal scrolling and improper rendering on effects. You may have noticed this if you visited an old site on your phone. It just doesn’t work.

But How Does It Work?

We have to be aware of all the possibilities that we may be dealing with. This is called responsive design. If you’re unfamiliar with web jargon, think of responsive design as a response to the viewport of a site shrinking. Things respond and rearrange themselves programmatically so that you always see the optimal layout for your device. If you are on a desktop right now and shrink the size of the browser, you can see this happen in real-time. Ideally, elements of the site will nest and be hidden under menus and stack on top of each other as the window gets smaller.

As we design, we constantly consider what will happen on small screens. This also helps determine if a design is viable at all. If design elements are on an extreme angle or perfectly fit into one another, as you would see in print design, they can turn into a huge development undertaking. Media queries are used to define different positions of onscreen objects, dependant on the current screen size. They are applied to all the elements, text, images, and shapes. When placement gets hyper-specific, it entails a ton of media queries to be done by the developers. So when there is a clear vision in mind, things move much quicker and you don’t run into hang-ups on tablet or mobile where the design just simply doesn’t work.

The Designer as a Clairvoyant

Design as Responsive | Responsive Design

Anticipating the ease of development to stay within the budget requires a great deal of foresight in designing. If your beautiful, full-width container has text intermingling with the background, don’t anticipate it staying that way! This isn’t to say you can’t be creative with your design; you always want to try to push your design as far as it needs to go. Since the web world has had to adapt to this responsive constraint, you’ll notice increased use of the modular layout and sections working together to create a larger framework. 

On the web, modular is often synonymous with a boxy layout, utilizing many rectangles and squares to define spaces for image, text, and shape. Being able to break out of a purely modular layout and retain a smooth responsive design is a valuable skill. People respond to things that are different and memorable. We aim to make every site a unique reflection of the brand so that users can remember their experience with the site and want to come back. So remember, always design a few steps ahead!

Share Your Thoughts

How are you making sure your design concepts stay a few steps ahead of the trends and competition? Share with us below in the comments. If you have questions, you would like answered or would like to start a Design/UX project, send us a message.

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts