Web Interactivity and Engagement

Responsive Design

As technology advances and more users are accessing the web through various devices, responsive websites are becoming more and more a standard than an exception. I personally find it frustrating when I visit a site on a mobile device only to discover it wasn’t designed mobile-first or with responsiveness in mind. With those thoughts in mind, I wanted to discuss a few best practices or tips on responsive design.

7 Best Practices of Responsive Web Design by Stephan Jukic has some great tips. One of the most influential that I have learned throughout the WDOC program is to pay attention to break points. Keeping various screen sizes in mind (<480px for smaller smartphones, <768px for larger smartphones, and >768 for anything larger such as tablets or desktops) and how your content will adjust accordingly is vital in responsive design. Additionally keeping images flexible instead of static will help not only with load times for mobile visitors, but also with how your content is displayed. In the end, keeping your site well organized and keeping true to core functions will benefit responsiveness greatly, according to Jukic.

Another crucial part of responsive designs is typography. Keeping your users in mind as well as the devices they’re using is vastly important. Responsive typography: 9 top tips from Creative Bloq points out additionally that scaling your body text for different screen sizes will help other elements flow appropriately. In addition, the article points out that adjusting line spacing and utilizing visual variations (for example how elements are re-arranged on a tablet vs a desktop or stacked on a mobile device) can aid in how your layout adapts as well as how your typography can be read. Next, and perhaps most vitally, choosing your fonts wisely can impact even the most basic site. “Choose fonts sparingly. Don’t load too much, and make sure to test real type in the browser on various platforms” for appearance, page weight and render speed. Lastly, learn from others – do some research and see what kinds of fonts or combinations of fonts other responsive sites are using, test them out and see how they respond to various scales..