What is Responsive Design?

Responsive design simply means that a web layout adjusts to the size of a device's browser window (including the screen resolution). So no matter if a user is viewing your page on a desktop, laptop, iPad, smart phone or TV, your important information is sized to the screen in a readable form. 

Even better for designers, there’s only one layout to create, not one for regular screens and then another for a mobile version. 

How does this Work? 

Responsive design uses a “media query” to detect the height, width and resolution of the user’s browser and then adjusts the layout accordingly through the Cascading Style Sheet (CSS). Properties such as display width, page orientation, pixel resolution and other device features determine which style sheet is used to render the page for a user. 

As the browser window narrows, columns/containers stack one on top of the other so that the page narrows and lengthens to fit the screen. Font size and images are reduced. For larger devices, columns, fonts, images and other features expand to their fullest size into a more horizontal layout. 

Rather than a “one-size-fits-all” solution for the size of a web page, a media query allows a designer to target styles based on device properties like screen size or layout orientation. 

All of this resides in the default page code, so ECU’s department designers are no longer required to 

  • Create separate mobile versions of their web pages 
  • Manually update two sets of pages 

What do ECU webmasters need to know? 

  • This feature is now live, a mobile version is now automatically available for new pages created using the 960-pixel templates.
  • Pages based on the old 770-pixel layout cannot take advantage of the responsive style sheet. 
  • Images for new pages should be cropped and sized for the space—not scaled—so they load faster and display appropriately on any size device.