“Stop thinking in pages. Start thinking in systems.”
~ Jeremy Keith
Do you regularly browse the internet on your mobile phone and/or tablet? When on your phone/tablet, do you feel inconvenienced by expanding and scrolling the screen to view the content you’re interested in? How do you feel when a website is optimized for the smaller screen sizes on which you using to view the web?
Web development has come a long way over the last few years, mainly because of the widespread use of smartphones and laptops. Thankfully this little quandary of expanding and scrolling is no longer an issue thanks to responsive website design.
In recent years, many web developers saw the need and began programming mobile websites specifically. For some, this may still be the way to go. For others, a relatively new programming method called responsive website design may be a better option. At Rave Retailer we offer both.
Simply put, responsive web design allows readers to view your entire site in an optimized way no matter what device they are using. The site adapts to whatever screen size it’s being displayed on – PC, tablet, mobile. Responsive website design is good news considering tablet sales are expected to exceed $100 Million this year (Mashable). And if these stats by our friends at SnapHop don’t tell you to convert, we’re not sure what will.
- 75% of customers prefer a mobile friendly site
- 31% of mobile internet users “mostly” go online using their phones
- 79% of large online advertisers do not have a mobile optimized site
- 61% of customers who visit a mobile unfriendly site are likely to go to a competitor’s site
RWD In Action
When a screen gets smaller, elements within a website stack differently, allowing you to see all aspects of the site but in an optimized format. Take a look at the example below of the Boston Globe website. To see it in action, go to the site and reduce your browser window smaller and smaller to the shape of a tablet, then a smartphone. Or simply view it on each of those devices directly.
Viewed on Mac or PC
Viewed on Tablet (columns get thinner)
Viewed on Mobile (content gets rearranged with most important on top)
Scrolling further down in Mobile retains content but reformats it in an optimized way
RWD (responsive web design) is a concept widely attributed to Ethan Marcotte. Without getting too technical, there are three key ingredients to RWD: the fluid grid, media queries and flexible media.
The Fluid Grid
The grid is something well known to designers of all types, and in web design that grid is typically created in pixels. Typical websites in the past were most often created in a 960 pixel framework that fits the majority of the screen. The screen can easily be separated into thirds, giving it an ascetically pleasing look. The fluid grid, however, moves away from thinking in pixels into using percentages which allows designers to think in terms of design relative to screen size.
Media Queries
Media queries look at the device being used to view the website and checks the following: whether the device being used is portrait or landscape, screen resolution, and height and width of device. The device will load the appropriate version once the media queries have been determined.
Flexible Media
Flexible media primarily refers to images within a site. The goal is to enable them to load differently on different sized devices. A web developer’s job is to manage the image to an appropriate size for a mobile device (small enough so it’s viewed by the smaller screen) and large enough to be viewed showing all detail on a PC. Web designers use various tools to make this happen, which creates flexible media within the RWD framework.
Check out what your current site looks like on various screen sizes using this cool tool by Screenfly. Stay tuned for our next blog highlighting the pros and cons of responsive web design. Contact us to learn more about what RWD might mean for your business or organization.