Trade -Offs in Responsive Website Design

Responsive websites must look right and function well on a variety of screen sizes: generally from a phone-sized screen all the way up to a big desktop screen. To achieve this responsive websites always consist of elements which move about, resize, and sometimes disappear or radically change at different screen sizes. One of the most basic trade-offs to consider in designing a responsive website is just how perfect visitor experience will be at which screen sizes.

It’s quite possible to make a responsive website that looks absolutely perfect at every conceivable screen size. However to do that would rarely be a reasonable trade-off because it would require extremely extensive CSS styling unique to each screen size. That would be very time-consuming and therefore costly. In addition, this would yield a level of perfection that would only be fully appreciated by other web designers.

One aspect of making intelligent trade-offs is to understand how visitors will generally view and interact with the responsive website. For example if a client’s main goal is to market Cloud Migration services to IT managers at medium and large size businesses we can assume that this client’s website will generally be viewed on desktops and larger-screen laptops, rather than tablets and phones. In this case I would design a website that was dead perfect on screen sizes of 12 inches on up and just very, very good on smaller screens. The Responsive Beach website is constructed exactly like that, which you can see for yourself if you have several devices handy, or if on a larger screen, you drag the window narrower. 

The most common element that demands critical thinking about trade-offs are menus. Conflicts between standard horizontal header menus and logos are very common on responsive websites. Some designers feel that a minor conflict only on one particular screen size ought to be accepted. Personally I do not feel that way, and I design responsive websites with menus that look just right and are easy to use at every screen size. On way to resolve a trade-off like this is to think very carefully about site architecture, and nest several pages that could be top-level menu items into a single drop-down submenu thereby reducing the total number of horizontal menu items without making navigation of the website less intuitive for the user.