Digital Marketing Postcard Website Design Website Marketing

What is Responsive Design and Why Is it Important? [Video]

VictoriaChemko
ByVictoriaChemko

What is responsive design, anyway?

Responsive design is an approach that suggests that website design and development responds to a user’s behaviour and environment based on screen size, platform and orientation. This ensures content will look good and be easy to use across multiple devices, such as desktops, tablets, or smartphones, using flexible grids and layouts.

Nowadays, search engines take responsive design into consideration within their algorithms, and if a site is mobile-friendly, it has the potential to rank better than other, non-mobile friendly sites. As a result, it’s become more important than ever to make sure your website is setup responsively.

What this means for you is there are additional complexities to consider in terms of various devices and how users will view your site. Here are some key considerations to keep in mind.

It’s Different Than Desktop-only Design

You need to consider that viewers will be looking at your site differently depending on their device – that’s the whole point of responsive design. So while you may consider something that will look really unique and cool on desktop, how will that translate once someone is viewing what you’re trying to portray on a tablet, or on their even smaller mobile screen while browsing in bed? What used to be design that only had to take into account one version of the user experience, you must think more broadly and creatively to understand how you want to portray your content to your audience who now have access to your site on a multitude of devices.

And another thing to keep in mind is that just because your current site visitors are not generally on mobile (as seen in your Analytics), it’s not necessarily because they aren’t on the increase – it may be due to your current site being too difficult to use from mobile, and thus people leave the site immediately due to frustration, or else won’t visit at all from small devices. You may find your stats change once your site becomes easier to use.

Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone.png

Ensure Your Designer & Developer Understand Responsiveness

Some designers and developers are used to thinking about design within a single view only, from traditional print media to the websites of the past. When selecting a vendor to help you build your new website, make sure they really do understand all of the intricacies involved from design to development across the user device spectrum.

If they don’t, you’ll end up with a poor user experience, and a site that doesn’t work well on various devices, so you may have to go back to the drawing board or spend a lot of time and/or money redoing all or parts of it, getting it done the right way.

Choose the Right Images

There are a lot of possibilities to ensure that images are fluid and can work across different screen sizes.  But you must keep in mind how an image may appear when it’s in full size on a desktop vs what can possibly show up within a smartphone, for example. Will you be able to see the details of that image once it shrinks down to a smaller size? When on a tablet vs a desktop, will parts of the image be cut off or not show what you ideally would like? For example, when sourcing out an image for that new blog post, think about what it’ll look like at various screen sizes, and not just what you are viewing when creating it.

Also keep in mind the size of images, and how it will affect loading times and performance across all possible devices, as this is another key ranking factor.

File Formats Across Devices

Another thing to think about is how video or other large files may be downloaded on a desktop vs a mobile-phone. For example, if you have a page with a looping video, you may want to make it show up as an image instead for mobile-devices, so as not to use up all of a person’s data if they’re not on a wifi network.

This also is a factor for other large file formats that you want to have show up on desktop, but not on smartphones. How will this change the user experience? What about performance? Will this still convey the message and action you are trying to get across?

Responsive-Web-Design.png

Consider Mobile First

Mobile-first design was common prior to the uprise of responsive design and is recommended here as well. The idea is that when a page created, think first about how it would be viewed on mobile before determining how that could be enhanced to work on larger devices, like the desktop or tablet.  It’s easier to scale up then scale down. Will you be able to read that headline on the smallest screens, and will the form need constant scrolling before it can be filled out and submitted? How does the navigation work?

This can also help the overall user experience since it will drive more simple, direct focus on the action that you are hoping for the visitor to take. Mobile users want fast-loading websites to research quickly, take an immediate action, or make a purchase while possibly on the go.

Summary

To summarize,  when Implementing Responsive Website Design, key considerations include:

  1. It’s Different Than Desktop-Only Design
  2. Ensure Your Designer & Developer Understand Responsiveness
  3. Choose the Right Images
  4. File Formats Across Devices
  5. Consider Mobile First

Now that you understand more about what to think about when setting up your Responsive website, please check out our recent blog posts covering more useful marketing tips.

If you liked this video, subscribe to the Umami Marketing YouTube Channel and the monthly Digital Marketing Postcard. I’ll be back again in 2017, to answer more of your questions! Happy New Year!

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