As mobile devices and tablets became more widely used, web developers struggled with the best way to deliver a consistent look and user experience across so many possible screen sizes. There are a couple options available to folks these days but there seems to be drawbacks to each. Offering a mobile version of the site works well except it requires web developers to maintain two separate style sheets. This can be a real hassle when you are dealing with multiple sites. Plus, this approach makes it difficult to accommodate for the variety of screen sizes that exist. Apps are great for large and/or popular sites but aren’t really feasible because most people don’t want to have to download an app for a campus website. They can also be quite expensive to build. The approach that seems to provide the best user and developer experience across the board is responsive web design.
With responsive web design, your content stays the same no matter which device you are on (desktop, tablet, mobile), but as the screen size decreases, your content will wrap and flow down the page. Therefore, users no longer need to zoom and scroll left and right to view everything on your pages. There’s no additional sites or app programming necessary. Instead, developers/designers need only consider how a customer would use the site on the different devices.
This can be a difficult concept to understand so here’s a little video that illustrates what we’re talking about. By re-sizing the browser screen, you can see what this website looks like at different screen widths:
The content remains the same but flows down the page for easy viewing on a tablet or mobile device. Pretty neat!
All of our new projects are built in a responsive template known as the UW Theme. This means that the bones of the sites are mobile-friendly to start. However, there are many steps you can take as a site editor/developer/designer to ensure that your site is easy to use on any device. We suggest thinking through how your content will render in a mobile device first and go from there. How should it display? Do we want this to show up for mobile users? How would this change in desktop view? Etc.
To help in this process, we have put together a few lists of our recommended “Best Practices” for building in the CMS in the responsive template. Read them over to learn more about what we suggest and why.