What Are Best Practices For Responsive Web Design?

I'm sure you have seen your fair share of non <a href="https://en.wikipedia.org/wiki/Responsive_web_design" target="_blank" rel="noreferrer" rel="noopener noreferrer">responsive web design</a> examples online - and you're probably thinking,<!--more--> "it's 2018 - and there are STILL non responsive web design templates being used?!"


Before we dive into what are best practices for responsive <a href="https://infused.agency/">web design</a>, lets dive a little deeper into the subject in case some our audience doesn't know exactly what that means.

For those who don't know, lets dive a little deeper into the subject.

<h2>What Is Responsive Web Design? A Definition</h2>

The responsive web design definition is the ideology that a <a href="https://infused.agency/">website</a> or a web application should respond to the user's behaviour based on the size of the screen, the platform and orientation.

In other words, the responsive <a href="https://en.wikipedia.org/wiki/Web_design" target="_blank" rel="noreferrer" rel="noopener noreferrer">web design</a> template that you're using should literally shape-shift to whichever device you're using. Be it a mobile phone, a tablet, a laptop or a computer. The website you're viewing should adapt to whichever screen you are looking at it on.

In practice, responsive website design consists of a mix of flexible grids, layouts, images and smart us of CSS media queries. For example, if you switch from using your computer to your iPad, the website you are viewing should automatically shape-shift to essentially accommodate to your experience.

Now that we've explored what responsive web design is, lets head into what are best practices for responsive web design.

<h2>What Are Best Practices For Responsive Web Design?</h2>

Lets outline some of the best practices for responsive web design below:

<h4>Context Within The Layout</h4>

While it's important for the content in your responsive web design to fit perfectly and scale for the screen size that your user's are browsing your website on, you have to make sure the content is relevant for each device. There are certain elements that make sense to, for example, hide on mobile, but show on desktop. And vice versa. Having these elements properly display on each device is imperative for your website's conversions.

<h4>Navigation Must Be Scalable</h4>

More often than not, a <a href="https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/" target="_blank" rel="noreferrer" rel="noopener noreferrer">responsive navigation</a> is absolutely key to have in place. A large navigation that works as a mega menu on desktop, will not scale well if it's kept exactly the same when a user looks at it on a phone. When this happens, in most cases, it's best to hide the menu behind a hamburger icon. This way, when a user taps the icon, the menu items show. This allows for the responsive website design to be much more clean and concise.

<h4>Speed Is A Must</h4>

When getting into responsive web development, you have to take into account the speed of your website. Since one of Google's ranking algorithms is fast page speed, one of the best practices for responsive web design we can give you is keeping your pages lightweight. This means saving your images out at a medium-quality to make sure their file sizes are small in order to load fast. You also want to minimize the amount of images used on your website, where ever possible. Another best practice for responsive web design would be to leverage browser caching - so everytime a user goes to your website, they don't have to download external scripts in order to load certain portions of your responsive web design.

<h2>How To Design Responsive Websites</h2>


If you've combed through any sort of responsive web design example online, you may have noticed how smooth and fluid the sites look on any device.

However, before any developer dove into responsive web development, they would have used a responsive web design software tool to get the job done.

The two most popular as of right now, are <a href="https://medium.com/sketch-app-sources/exploration-of-responsive-design-in-sketch-part-1-1af4cf415a82" target="_blank" rel="noreferrer" rel="noopener noreferrer">Sketch</a> and <a href="https://www.smashingmagazine.com/2016/08/photoshop-etiquette-for-responsive-web-design/" target="_blank" rel="noreferrer" rel="noopener noreferrer">Adobe Photoshop</a>.

<h4>Benefits Of Using Sketch For Responsive Web Design</h4> <ul> <li><strong>Pricing. </strong>Sketch only costs a one-time fee of $99. With Photoshop, you have to pay monthly in order to use it, as it usage comes through usage of Adobe Cloud.</li> <li><b>Amazing for designing mock-ups for different screen sizes. </b>One of the best things about using Sketch, is that it's bare foundation is built upon designing for multiple different screen sizes. With this, comes the flexibility in the tools it provides.</li> <li><strong>Sketch is vector-based. </strong>This means that you can zoom in a document 1000% or more, and everything will still be of crystal clear quality. It also means that your Sketch file sizes will be drastically smaller than that of Photoshop file sizes.</li> <li><strong>Autosave. </strong>I don't understand how Photoshop hasn't implemented this yet. Forget to save a document and your computer shuts off? Don't fret. Sketch auto-saves. It's a life saver!</li> <li><strong>Industry standard. </strong>Sketch has now become the industry standard for responsive web design. This is enough to switch over from Photoshop.</li> </ul> <h4>Benefits Of Using Photoshop For Responsive Web Design</h4> <ul> <li><strong>File organization. </strong>It's simply better than Sketch. You can organize your elements with Layers, and then organize those Layers into folders. This keeps project super clean and tidy.</li> <li><strong>Artboards. </strong>Since Sketch hit the scene, Photoshop needed to up it's game for responsive web design. They introduced artboards - in essence, you are now able to design your website or app for any screen-size you would like.</li> <li><strong>Image optimization. </strong>With Photoshop, you have control over optimizing your images for the web. This is extremely important for not only search engine optimization (SEO), but also for user experience. The faster your site, the better web experience your users receive.</li> <li><strong>Image editing. </strong>You have full flexibility to enhance your images in endless ways. Sketch, lacks this feature.</li> </ul> <h2>How To Create And Develop Responsive Web Designs</h2>

So now that you've chosen a responsive web design program, it's time to create and develop your responsive web design into a full blown website.

The question is... how?

<h4>HTML5 + CSS3</h4>

The core of most websites online, is that of HTML5 and CSS3. HTML is a hyper text markup language - think of this code as the building blocks of a web page. The CSS (cascading style sheet) is where you can control things like fonts, font sizes, colour, layout and more.

In the CSS, is where you'll be focusing on making your website responsive.

Specifically within the CSS, we would be utilizing what are called <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank" rel="noreferrer" rel="noopener noreferrer">media queries</a>. Media queries allow you to target what happens at a certain screen size. So if you wanted an element to have a background of red on desktop, but blue on mobile, you would do so utilizing responsive media queries.

<h4>Text Editors</h4>

Remember Dreamweaver? Yeah, neither do we.

Text editors have vastly evolved since then. Here's a few of our favourite text editors we like to use in order for developing responsive websites:

<ul> <li><a href="https://www.sublimetext.com/" target="_blank" rel="noreferrer" rel="noopener noreferrer">Sublime Text</a></li> <li><a href="https://atom.io/" target="_blank" rel="noreferrer" rel="noopener noreferrer">Atom</a></li> <li><a href="http://brackets.io/" target="_blank" rel="noreferrer" rel="noopener noreferrer">Brackets</a></li> <li><a href="https://code.visualstudio.com/" target="_blank" rel="noreferrer" rel="noopener noreferrer">VS Code</a></li> </ul> <h4>Responsive Frameworks</h4>

Thank God for responsive web design frameworks!

These frameworks speed up your development ten fold. They're built with semantic responsive design classes in mind, and they save you hours upon hours or repetitive tasks that you would have had to do if you didn't use a responsive framework.

Some of our favourites are:

<ul> <li><a href="https://getbootstrap.com/" target="_blank" rel="noreferrer" rel="noopener noreferrer">Bootstrap 4</a></li> <li><a href="https://foundation.zurb.com/" target="_blank" rel="noreferrer" rel="noopener noreferrer">Foundation 6</a></li> <li><a href="https://getuikit.com/" target="_blank" rel="noreferrer" rel="noopener noreferrer">UI Kit</a></li> </ul> <h2>Responsive Web Design Examples</h2>

One of the best sources on the web for responsive web design examples can be found here. They provide vast amount of different industries that use responsive websites, and it's a great resource to check out.

We hope you've learned a lot about what are the best practices for responsive web design! Feel free to check out <a href="https://infused.agency/work">our work</a> of responsive web designs as well.

Connect with us for your free quote today.