Responsive Design Challenge: Trinity Senior Art Major Exhibition Website Introduction Nowadays, people usually expect responsive design from most of the websites they visit on a daily basis. Although it feels ubiquitous today, it's actually a recently adapted concept. In 2010, Ethan Marcotte coined the term "responsive design" in the article, "Responsive Web Design," published by the online magazine, A List Apart.1 StudioPress blogger, Josh Byers, said, "When a website is responsive, the layout and/or content responds or adapts based on the size of screen they are presented on."2 Web designers today should be able to create responsive sites for a multitude of screen sizes. The key piece of code that makes responsive design possible is the media query. In "Responsive Web Design," Marcotte also explains two components that make up a media query: a type of screen and a media feature plus a target value. The image below shows an example of what a media query might look like in a CSS document, which styles a web page.3

In the example above, @media screen calls a type of screen that the coder has named "@media screen." This name is simply a placeholder name that references a desktop or mobile device sized browser. "Max-device-width" is a CSS property that describes the maximum width that an element can have. This is important when users make windows smaller or bigger by dragging one edge across their screen, but also when a website is viewed on a desktop versus a mobile device. Principles of Responsive Design Responsive design doesn't just involve adjusting the design of websites for different web browsers sizes, but also all kinds of usability features. This leads to three key principles of responsive design that are relevant to this project and to any web designer: hierarchy, navigation, and consistency. The following sections will explain each principle and apply them 1

Marcotte, E. (2010, May 25). Responsive web design. In A List Apart. Retrieved from https://alistapart.com/article/responsive-web-design. 2 Byers, J. (2012, March 6). A beginner’s guide to mobile responsive design. In StudioPress. Retrieved from https://www.studiopress.com/beginners-guide-responsive-design/ 3 Gilbert, S. (2015, February 23). CSS media queries for ipads & iphones. In Stephen Gilbert. Retrieved from http://stephen.io/mediaqueries/#iPhone

to the five wireframes that were built for the Trinity Senior Art Major Exhibition’s website home page and attached to the end of this document, and were all built with the online program Balsamiq. Hierarchy The best websites let visitors know what content is most to least important, which is a concept called hierarchy. Hierarchy can come from color, font, font stylization, and other visual elements that grab viewers’ attention in some parts while subtlety provide visual information in others. Web designers can determine a hierarchy by listing key goals, features, or content that a client provides. If there is no client, web designers should consider what they want visitors to take away from their websites, or its key goals.4 For example, is a website trying to sell a product, connect people, or promote a cause? The Senior Art website was designed with a simple hierarchy so as not to distract from the most important content on the site: the artwork. On each page of the website, the hierarchy, from most to least important, consists of an image of a student’s artwork, the title’s website, navigation bar, the artist’s name, and the artist and artwork information. The design of the desktop (Figure 1) and mobile versions (Figure 4), although they appear on different sized web browsers, employ the same visual hierarchy. Changes in screen size shouldn’t affect the hierarchy of information on the website, so the design should keep hierarchy consistent, which leads to the next important principle of responsive design. Consistency One of the most efficient ways to create a responsive design website that has consistency is to start designing small and then work up to big. In other words, design the website for the smallest device size first and then the larger afterwards. It is much more difficult and time consuming to implement responsive design on a desktop browser before a smaller screen. This is because there is less space, and therefore less design options, on a mobile screen. Once the mobile website is designed, web designers can expand their options and grow their design for a larger canvas. This practice ensures that In order to achieve consistency, web designers should build wireframes before designing with colors, fonts, and shapes. Wireframes layout the design of a website in its most bare bones format. They are also helpful in ensuring that the website’s basic structure has a clear visual hierarchy.5 Navigation 4

Turner, N. (2016, January 4). 10 key mobile ux design principles. In UX for the Masses. Retrieved from http://www.uxforthemasses.com/mobile-ux-design-principles/. 5 Lana, M. (2016, May 13). The importance of wireframing for a responsive website. In Segue Technologies. Retrieved from http://www.seguetech.com/the-importance-of-wireframing-for-aresponsive-website/.

Last, navigation is the way a visitor travels from web page to web page of a greater website. Clear, consistent navigation makes the website visiting experience much more pleasant and encourages people to visit a website more than once. Therefore, responsive design should improve a website’s navigation. Responsively designed navigation features look and work consistently. For the Senior Art website, the main navigation bar always appears at the top left of web pages. When the screen changes from desktop to mobile, the navigation bar is folded into an accordion icon in order to fit the size of a person’s finger. When designing for touch screens, like smart phones, designer and blogger Neil Turner suggests not making any touchable or interactive element smaller than 44 by 30 pixels.6 Responsively designed navigation allows users to navigate a website and find the information they are looking for or that the client wants users to find. Conclusion The Senior Art website wireframes exemplify some of the best practices in responsive design, but also show that responsive design doesn’t have to be very complex. The key principles of responsive design for this project, hierarchy, consistency, and navigation all make the Senior Art website an archive of images and information that users can easily access.

6

Turner, N. (2016, January 4). 10 key mobile ux design principles. In UX for the Masses. Retrieved from http://www.uxforthemasses.com/mobile-ux-design-principles/.

Appendix

Figure 1 A screen width of 1600 pixels.

Figure 2 A screen width of 1280 pixels.

Figure 3 A screen width of 768 pixels.

Figure 4 A screen width of 328 pixels.

Figure 5 A screen width of 272 pixels.