BeSafe.unc.edu is a new site that is centered on providing a “comprehensive source for safety information at Carolina”. Using our Avada theme, the site is automatically responsive. However, it is responsive without being specific to the content on the site itself which leaves room for improvement. To start, what does “responsive” mean?
“Responsive Web Design or RWD as it is commonly referred to, implies the formatting of Website design in a way that it most optimal for viewing and navigation across a wide range of devices, including traditional PCs, smartphones and tablet devices.” Read more…
Difference in Mobile vs Desktop Views
Try pulling up BeSafe.unc.edu on a computer. View the image below to see what the first part of the site would look like on your computer. Click the image to expand the image.
Now try pulling up BeSafe.unc.edu on your phone! View the image below to see what the first part of the site would look like on your phone. Click the image to expand the image.
Before and After CSS Tweaks
To show what the site looked like on an iPhone 5 before and after any custom CSS edits were made via the Improved Simpler CSS plugin, view the following images and take note of the accompanying descriptions to understand what decisions were made and why.
Before: Blue Border After: Green Border
Pay attention to the differences in the size of the logo. Decreasing the logo size on mobile/tablet allows the user to begin looking at content that matters to them instead of a logo that is too large.
Already at this point there is more information being shown on the “After” view than “Before” which saves both time and space.
The focus on decreasing excess space may seem minor when viewing a site on a computer but on a mobile/tablet space is a valuable commodity. Treat it as such and make sure to view your site on a tablet/mobile to see what users are seeing.
Notice that the paragraph text seen on the Before version is removed on the After version. The decision to do this was based on the fact that having a smaller screen size makes the content posted even more important. This content was playing an introductory role and is not necessary enough to warrant making space for it on the mobile/tablet view.
CSS was in place on the site to force the footer widgets to stay at a certain height so that they were uniform on the site. Because of this, the Before mobile version shows the same which causes a lot of extra white space to show that makes for extra scrolling for the person viewing the site. Adding in a media query specifically for the mobile and tablet versions of the site allows those version to render widgets that have a height that corresponds to the amount of content. This decreases extra scrolling and white space which leads to a better mobile user experience!
At this point, the “After” view is done. These final two images show the extra space that users would have had to scroll if CSS tweaks hadn’t been added to optimize the experience.
With just a few customization, the site is now much more user friendly and in line with the goal of giving members of the UNC community the resources they need to be safe!
Lynda.com: Sign in with your Onyen and password and watch tutorials on Responsive Web Design!
Responsive.is and Responsinator: Two wonderful websites that show what your site looks like on different devices in both portrait and layout view. As you are building your site, this is an easy way to see what your users will be seeing when they access your site on different devices. It also allows you to view your site on devices that you may not have!