Tuesday, May 19, 2015

Responsive at a Glance

Web technology has changed so much in the last five years. What used to be straight-forward and simple has now gotten complex with the invention of responsive technology. The world has a jungle of devices, and the devices display many different breeds of websites. We as developers have to make decisions on how to organize our websites so that all devices in all sizes give users the same opportunities to needed information. We are, in a sense, genetic engineers.

Responsive technology does not provide a perfect viewing platform for online information. It is by far the best methodology we have for the amount of device sizes we must cater to, but inevitably there will be some things that are visually bothersome. The most important thing is to make the same information available to all devices.

With traditional publications, such as posters, brochures, and billboards, there are things we must pay attention to, such as whitespace, image placement, kerning, and content alignment. In the web world, these things are less precise, especially with responsive development. We can of course program to provide the best situations for popular screen sizes, but everything in-between can* have a slightly spaced-out, misaligned, or unnatural feel. (*some responsive developers are better at preventing this than others!)

A great example of a responsive design is the new Texas.gov website. They made things simple by
Texas.gov website screenshot
The new www.texas.gov website
putting all of the important information on the homepage (without crowding it) and making it easily searchable. The content is easy to read, and scrolling down the page is quite pleasant. They use what our office calls a "stacked" page structure, where only one section of information is available per "row" on your desktop or mobile phone. This allows for consistency of design on all platforms and makes finding information easy. Their predictive search is on par as well, providing organized categories of results including related agencies, services, search suggestions, and more.

We have taken a similar approach with Tarleton's website. Our responsive homepage is "stacked" and we provide predictive search capabilities. We try to provide a similar user experience no matter what device is used, however small differences can be noticed.

To demonstrate some of the differences in how a single page may look on different devices/screens, I am providing photos of Tarleton's homepage below. You will see differences in text/image size, space taken up by text, column sizes, content organization, navigation look, and more.

This is a mobile view of Tarleton's homepage. You will see a collapsed menu and search at the top, a banner slideshow underneath the header, and a portion of the locations section. Each content item is "single file" down the page, with the slideshow image appearing ahead of the slideshow text.

Since this mobile phone is small, there is not room for desktop-style navigation. If we did try to fit traditional navigation on the device, the text would either be too small to press with a finger or take up too much valuable real estate. We have decided to collapse the navigation menus just for mobile phones and very small devices.

This is a tablet view of the homepage in a vertical/portrait orientation. On this one you can see quite a bit of Tarleton's homepage, in fact, you can see all the way down to part of the News section. We have the normal navigation available without it being collapsed. You can also see a bit of space underneath the text on the right side of the slideshow.

We are able to see further down the page because of the size of the device vs. the screen resolution. Even though the device is smaller than most desktop screens, the screen resolution and vertical orientation allow for more vertical page to be visible.

This is the same tablet, but in a horizontal/landscape orientation. Obviously, less of the page is visible in this orientation, with only part of the locations section visible. We are able to fit in the full navigation just as with the vertical orientation of the tablet.

Here is Tarleton's homepage on an older desktop screen, with 1920x1080 screen resolution. Since the screen is more square than rectangle, you get a more narrow view of the page than a wider-screen version. You can see the entire locations section and a little sliver of the highlights section.

Since the screen is much larger than a tablet, you can see we have adjusted the text size so that it isn't too large. In doing so, we have created extra "whitespace" to the right of the image and underneath the slide text. Considering there is a different amount of text accompanying each slide of the slideshow, there can be more or less whitespace. It all depends on how long the title and teaser need to be for each slide.

Lastly, this is a widescreen desktop view of the homepage.There is quite a bit more space in header, the navigation bar, and in the slideshow text area. Again, if we were to make the text larger in order to fill those areas, the size of the text would be too overwhelming for the screen size.

As you can see, Tarleton's homepage looks different on all of these screens. However, the same information is available on that page for all devices. Given this is just a small sampling of the hundreds of screen sizes available, we can conclude that responsive technology is here to stay for the foreseeable future.

Web Services is constantly learning more about responsive technology, and has been programming some changes to the responsive templates in order to remedy some of the whitespace and issues with being "too spread out." We will be adding a "gutter" to our pages so that the main content is more consolidated and less spread out horizontally. The page will still be responsive, but should be more visually appealing and easier to follow. The homepage changes should debut sometime this summer.

For another visual explanation of responsive design, check out this blog article from FROONT: 9 basic principles of responsive web design.