Responsive Design

It’s probably no surprise that mobile Internet usage has been skyrocketing over the last few years. According to a Morgan Stanley report, mobile internet usage will surpass desktop usage in 2014.  While most smartphones can display regular websites, the content is often difficult to read and even harder to navigate.  On the opposite end of the spectrum, large, high-resolution monitors are much more common than they used to be.  So how do you design a user friendly website for the smallest devices, the largest monitors and everything in-between?  Initially, web designers created and maintained a second websites that that was their 'mobile' version.  But new devices with new screen sizes are being developed every day. These devices will have varying screen resolutions and orientations.  It's obvious that we can't create a different website for every device. So how do we deal with the situation?  Simple, we make our website fluid (responsive). 

The goal of responsive design is to build a single website that works effectively on a wide range of viewing devices.  It’s a design approach that provides visitors with an optimal viewing experience, whether on a desktop computer, a laptop, a tablet or a smart phone.

The UNC School of Medicine web system is built on a responsive design.  To see it in action on a desktop browser, grab the lower right corner of the browser window and slowly resize it (both larger and smaller).  You'll see the content magically adjust with the size of the browser window. 

Device Screenshots

 

Benefits of the SOM Responsive Architecture

  1. The website automatically changes its appearance and layout based on the size and orientation of the screen where it is displayed.
  2. Images will resize instead of getting cut off or distorting the layout.  Images will scale to fit the browser window but will not display larger than the actual image dimensions.
  3. At certain browser sizes, a scroll bar will appear below tables to prevent the tables from breaking the layout of the site.
  4. Having a single website that works everywhere offers significant savings over creating multiple sites targeted to different viewing devices.  It also reduces the amount of time that would have otherwise been needed to maintain duplicate websites.
  5. Adapts to future devices - the design is based on screen size, not any particular device.  This means that future devices will properly display your sites content.

 

What Does This Mean?

What you see isn't always what others will see.  Laying out a web page isn't the same as laying out a print ad. Content on a web page will reflow to accommodate the size of the browser or device.

 

How Things Stack Up

There's more to making a large site look good on a small device than simply scaling it down.  If all we did was scale everything proportionally then the text would be too small to read, the links would be too small to click and it would provide a terrible viewing experience for our visitors.  To make sites visitor friendly on small devices, elements of the layout need to be moved around and or displayed differently.

The Layout - The UNC School of Medicine web system displays up to three columns when viewed on a conventional computer screen with a maximized browser. When minimized in width, the design takes on a new layout with the columns stacking on top of each other for a vertical layout.  The second column (the content area) will display first, then the first (left) column will display next, followed by the content from the third (right) column.  You can see in the images below how the site's architecture changes when viewed on differently sized viewing devices.

The Navigation - Responsive navigation is normally very different when viewed on a mobile device in contrast to a desktop. On a mobile device you don’t have the luxury of space to expand 6-7 links horizontally across a page.  On smaller screens and minimized browsers, the navigation condenses to a single accordion menu, perfect for saving space without sacrificing critical navigation links.  

Text - When viewed on smaller screens, the text is enlarged for easy reading and the ability to more easily click on links.

Images - Images will display at the size they were added to the page, unless the browser becomes narrower than the images width.  As the browser window becomes smaller, so will the image.

 

Computer Screen          Mobile Screen

 

Not All Things Are Responsive

Fixed Width/Height

Be careful when adding custom HTML/CSS to your site which sets an item with a fixed width or height.  In most cases this will break the responsiveness of the item.  

Tables

When adding a table to your site you should either assign a percentage based width or no width at all to the table (use caution when adding a fixed width table).  Without a specified width, a table will resize to accommodate the content that it contains.  A percentage-based table will resize itself to occupy a certain percent of the screen, no matter how large or small the screen becomes.  These types of tables work well in our responsive design.  That being said, there are still times when these tables stop being responsive.  This can occur when you are trying to display a large table with lots of data on a small device.  What will often result is the table will break the design or the content of the table will display outside of the viewing area.  Neither of these situations is ideal.  To alleviate this issue we have created a style that you can add to your tables.  At small browser sizes, it will add a scroll bar below the table to ensure that all the data remains available and to prevent the table from breaking the layout of the site.  You can read more about it and get the code on our Working With Tables documentation page.

Code From Third-Party Sites

If you add code from a third-party site (such as Google, YouTube, Twitter, etc.) to your site, please ensure that it is responsive.  Simply grab one of the corners of the browser window to see what it looks like at different sizes.  

One of the sites in our web system added code from third-party sites to display a map of their location and to link to their publication.  The code from the third-party sites was not responsive and caused the content to overlap outside of it's container (the right column).  See the solution.

ENT_sample.png