Meet the Authors:

Vivian Rashotte is a digital marketer at Three Point Turn. She's a writer and a visual artist who's interested in digital strategy, brand management and creating compelling web content.

Trishan Gunness is lead developer at Three Point Turn. He shares insight on enterprise development, system design and development culture. He lives in Oakville, Ontario.

Nafeu Nasir has a versatile set of skills in graphic design and software development. He's currently pursuing a degree in Computer Science at the University of Toronto.

Anderson Hung recently graduated with a degree in mental health studies. He's a web development intern who's lending a hand with marketing projects at Three Point Turn.

What is responsive web design?

Posted on: November 6th, 2014 by


 

What Is Responsive Web Design?


The world is going mobile and the way people consume content is rapidly changing. Mobile internet usage has exceeded desktop internet usage for the first time since the internet began and it doesn’t look like a passing fad. To keep up with this trend, your website needs to work with a growing number of devices, platforms and browsers. One way of accomplishing this is through responsive web design.

What exactly is responsive web design?

To understand responsive web design you need to be familiar with the most common methods of web design used by designers and developers today. Let’s take a look at three web design methods:

  • Responsive web design
  • Adaptive web design
  • M.dot mobile website

 

Responsive web design allows designers and developers to build websites that adapt to every screen size including desktops, tablets and mobile phones. Let’s say a user switches from their laptop to their iPad, responsive design will automatically change the website to accommodate for resolution, image size and scripting abilities. Put simply, a responsive website adjusts itself for different screen sizes. It’s one site for every screen.

“I always explain to managers that responsive websites ‘flow’ content around the screen based on predetermined screen resolutions, called breakpoints. For every pixel change in resolution, content belongs somewhere. Those changes can be subtle until a significant device change is imminent, and that’s when you might see content frames ‘snap’ into brand-new positions to accommodate that device layout.”

(Rhys Mohun, Marketing Manager at Three Point Turn)

 

Adaptive web design relies on predefined screen sizes. Both responsive and adaptive methods allow websites to be viewed on desktops and mobile devices, but adaptive web design typically uses a completely different set of designs and templates for each platform being targeted.

“Unlike the responsive design which changes the page layout on a per-pixel level, adaptive sites will pull a different version of the page when specified breakpoint resolutions are met. Developers use media queries, basically asking the user‘s device questions about itself (like what resolution the window is currently running) to determine which page to display. Adaptive sites can be very cost-effective to develop due to the few lines that need to be made to the code and the ability to easily make changes to the site after it’s launched.”

(Rhys Mohun, Marketing Manager at Three Point Turn)

 

An m.dot mobile website is a separate mobile-friendly version of your website; understand that it’s not the same thing as a mobile app. These sites are named for the prefix before the domain, “m.yourdomain.com”, an automatic redirect when a mobile device is detected.

“The unfortunate thing about m.dot websites is that social sharing for device-specific content isn’t fixed yet, meaning a mobile user sharing a link to her laptop-using brother isn’t going to direct the brother to a laptop experience; he’s seeing the mobile site on a 24-inch screen.”

(Trishan Gunness, Lead Software Developer at Three Point Turn)

Do you need a responsive website?

Responsive web design is Google’s recommended method for “going mobile,” but it’s not the only method. With the number of mobile users growing every day, you should consider what kind of mobile site would best fit your business needs. Our next article covers The pros and cons of responsive web design.

If you’d like a review of your own website to discuss multi-device responsive design, contact us here.

 

 

Vivian Rashotte is a digital marketer at Three Point Turn. She's a writer and a visual artist who's interested in digital strategy, brand management and creating compelling web content.


Tags: , , , , ,

Leave a Reply