Monday, February 4, 2013

Responsive Web Design: Of Resolutions and Rearranging


We currently approach an interesting era in technology and human interfacing; vastly different mediums exist, of different controls and sizes, all capable of reaching the grand space of digital information, the internet.  What once started as connecting people through phone lines with text has evolved to pictures, sounds, and layouts. These layouts are visible as printed media from a computer or from screens as small as a mobile phone device and as a big as one can make a screen interface (which at this point is virtually limitless with the ability to use multiple screens to act as one). Because of the variety of methods and the way that one interacts with them, whether with a touch screen, a keyboard, or a mouse, different ways of displaying that information becomes necessary, in order to maintain the usefulness and the attractiveness of websites and pages. Welcome, the responsive web design (which you can learn about a bit here), a way of working out webpage to use different styles and layouts depending on the type of situation is needed.

Response web design allows a great deal of control over how a website can be seen visually. Not only can you classify how things can be laid out in a way that works towards optimal design, but also you create an adaptive form that can prioritize the proper elements in any situation. What this opens up is the ability to display what is most important regardless of screen size; a small screen can avoid isolated blocks of a page, or over-sized navigational interfaces, while large screens will not have to deal with wasted spaces. What is important is the ability to define the restrictions for which these layouts take effect. For a webpage, defining media for CSS designer's can chose what layout and styles are visible for what specific instances. Not limited to the difference between screens and print, designers can also expand into setting page widths, allowing set limitations based on the resolutions of the media.

Defining different designs is only part of the goal with responsive design, it is not only the option to define separate layouts but the ability to maintain accessibility to the important points in a website that makes the responsive layouts so effective. Once defined, every style-able part of a website can be redefined, this allows for changes in size and position including excluding of certain elements included in larger designs to add aesthetics and mood which is of lesser priority in a smaller visible field.  The removal of these extra graphical elements for smaller interfaces can allow for cleaner visibility of information, while not requiring a separate interface. For the mobile device user, the removal of graphics can be a benefit in terms of saving bandwidth, as mobile users often access pages using internet which charges based on bandwidth used. In addition, removing aesthetic and/or optional graphics is useful for developing print views, as those extra options can be hindrances for printing in terms of readability and ink conservation.

The way websites are interacted with can also be emphasized using changed layouts. When properly defined for devices, which emphasize small streamlined mobile device viewing, users, tend to prefer linear layouts which favor simple flicks or scrolls on the vertical access for viewing. By rearranging the layout in favor of these interfaces, the usefulness and reliability of a website is expanded towards another medium and possibly a different audience.

Responsive web design is not without its flaws, we may support responsive web design as a future technological method because it appeals to several different types of people and media, yet it present different challenges along the way. Even though we are adapting a single site or set of pages with unifying designs and layouts using CSS, we are still requiring several different arrangements be created. It is not the same as creating whole new pages all together, but by having several different types to cater to, once is forced to create several layouts which are only used a fraction of the total views of a website. Essentially, web designers can be said to be making 2-3 layouts for a single type of page based solely on the way one looks it (print vs. small screen vs. large screen for example).

Consistency is often a double-edged sword when it comes to trying to appeal to all users and to cater to their own personal style. For a user, revisiting a specific website in order to find familiar information based on past visits can be made more difficult if the specific layout were to change. Once a user visits a page in one medium, it sets up a mental image of the page and how to reach certain points of information in their memory, visiting it later through a different medium can be made more disorienting as it clashes with the memory created in that first visit. This can be expanded into issues regarding conveying the website to other users, if one user were to assist another in accessing information, the difference in medium used and layout could make the task more difficult.

The extended variation in layout can also create overhead when designs need to be modified. Whether it is because a client wishes to change the design for the sake of a new image, or because of issues with the layout that is made evident by user response, any modification in layout or design is made more problematic once different layouts for different situations are involved. Modifying elements in one design which occur in another, could create issues when modified, especially for common areas which are not usually modified through layouts (for example main contents of an article). More consideration is needed in modification in order to avoid the conceptual "fix one thing, break another" situation.

Personally, the idea of response web design feels both powerful and dangerous. Being able to set designs for multiple situations can be a wonderful potential to optimizing information and applying impressive design aesthetics regardless of the media. At the same time it requires almost extensive work in an attempt to maintain the view for any situation, regardless of the medium. This problem, especially in terms of resolution, is not a new one. Monitors have varied in resolution for several years, between SD and HD, and the various potential aspect ratios. The problem that occurs now is that the differences exist several times over. I can see this being a great step towards appealing to multiple types of interfaces, and multiple people, at the same time the greater amount of work required can be a greater task for beginners in the field. Whether this can be used well, is greatly dependent on the time one is willing to dedicate to it, and the development of the different ways that one can see these sites.

A good question might be, how many websites have you noticed that have responsive designs? And have you ever made use of it?

No comments:

Post a Comment