Mobile Optimization Website Design

What You Need to Understand About Responsive Web Design [Video]

VictoriaChemko
ByVictoriaChemko

Today I’ll be talking about what you need to understand about Responsive Design when undergoing a website redesign project.  Keep on watching to find out all the details in this edition of the Digital Marketing Postcard.



 

What is Responsive Web Design anyway?

It is defined as the ability of websites to adapt to different screen resolutions in order to provide the best experience for users. For example, a site visitor will have a different experience on their desktop computer, laptop, tablet, or mobile phone, to name a few. Responsive design will lay a technical foundation for your site that will allow for the introduction of new browsers and devices over time, instead of having to recode for each one.

Check out responsive web design in action by going to umamimarketing.com in your browser of choice and dragging the corner of the browser window either larger or smaller. You’ll see the website reorganizing itself for best fit within each width as you go.

Here are some key considerations to keep in mind when it comes to Responsive Design:

1. Breakpoints

Breakpoints allow the layout of a page to change at pre-defined points, instead of staying the same, and adjusting to fit within whatever device you’re using to browse at any given time. For example, there may be 3 columns on a desktop or laptop, while only 1 column is displayed on mobile.

The work to define this is done in the CSS and will depend on the types of content within a page. While breakpoints can be set at any size, they are usually done at the common device sizes, for desktops/laptops, tablet landscape, and mobile landscape and portrait, at minimum.

2. Fluidity

Fluid scaling is used to achieve responsiveness between breakpoints, to maximize your real estate, as well as to maintain the flow of columns in a responsive grid. This can be done at the block or grid layout level, to create the best experience when sizing down browsers, or moving down to mobile, where 3 columns of content may then get stacked on top of one another.

Fluid images create flexibility and is also a key part of responsive design so that they don’t break or resize incorrectly on different screen resolutions.

Responsive Web Design | Umami Marketing

3. Design for Multiple Sizes

One thing that you start to consider with responsiveness is whether to design for desktop or mobile first. If going from desktop to mobile (or large to small), you’ll start to pull out content that may not be as needed from your site. 

However, it may be better to design for the opposite (small to large screens), as this may be helpful to understand limitations and inform decisions when going from one size to another and cut out anything extra that isn’t necessary from the beginning.

4. Media Queries

Different views must be enabled in different contexts via media queriesMedia Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. mobile phone screen vs. desktop or laptop screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive Web Design.

Put more simply, this set of rules allows developers to create designs that are fluid and adapt without losing quality or getting distorted on various devices. They help to take into account multiple display possibilities and the organized style rules can be modified quickly and easily.

5. Optimizing User Experience (UX/UI)

When designing and developing for responsiveness, ensure that you’re retaining the structure and order of elements from desktop down to mobile. This allows for fluid scaling while also reducing unnecessary load of duplicate elements that are hidden or shown at specific breakpoints.

As a result, your site visitors will be able to experience your website in an optimal way, whether they’re sitting at their desk, at a tablet on their couch, or lying in bed with their smartphone.

Summary

To summarize, you need to understand the following about responsive design:

  1. Breakpoints
  2. Fluidity
  3. Design for Multiple Sizes
  4. Media Queries
  5. Optimizing User Experience (UX/UI)

Now that you understand more about Responsive Web Design, please check out our recent blog posts covering more useful Inbound Marketing tips.

If you liked this video, subscribe to the Umami Marketing YouTube Channel and the monthly Digital Marketing PostcardI’ll be back again in October to answer more of your questions. See you next month!

About the Author

VictoriaChemko

VictoriaChemko

Founder & CEO
A successful three-time entrepreneur and Founder of Umami Marketing, Victoria works with companies around the world to build their digital presence and attract more customers.
Follow Me On: Facebook Twitter Instagram Linkedin

You may also like...

By continuing to browse or by clicking “Accept” you agree to the storing of first- and third-party cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Cookie policy | Privacy Policy

Privacy Preference Center

Close

Your Privacy

Umami Marketing Inc. appreciates your interest in its products and your visit to this website and respects the privacy and the integrity of any information that you provide us as a user of this Site. The protection of your privacy in the processing of your personal data is an important concern to which we pay special attention during our business processes.

Privacy Policy

Required
Personal data collected during visits to our websites are processed by us according to the legal provisions valid for the countries in which the websites are maintained. Our data protection policy is also based on the data protection policy applicable to Umami Marketing Inc. Read more

Cookie Policy

Required
Umami Marketing uses cookies and similar technologies, such as HTML5 web storage and local shared objects (all referred to as ‘cookies’ below), to record the preferences of users and optimize the design of its websites. They make navigation easier and increase the user-friendliness of a website. Read more

Essential cookies

These cookies are essential for websites and their features to work properly. Without these cookies, services such as the vehicle configurator may be disabled.

Cookies used

  • WordPress Required

Performance Cookies

These cookies collect information about how you use websites. Performance cookies help us, for example, to identify especially popular areas of our website. In this way, we can adapt the content of our websites more specifically to your needs and thereby improve what we offer you. These cookies do not collect personal data. Further details on how the information is collected and analyzed can be found in the section ‘Analysis of usage data’.

Cookies used

Third-party cookies

These cookies are installed by third parties, e.g. social networks. Their main purpose is to integrate social media content on our site, such as social plugins.

Third-party cookies