Responsive Web Design: One Site Fits All

Why You Need to Show Up On Screens of All Sizes

Is your business website mobile-ready using responsive web design for today’s fast-changing communications technology? With the explosion of smartphones, how the web is viewed has drastically changed in the last few years. People want to browse the web on their mobile devices as well as their home computers without the loss of speed or content.

According to a recent article, 72 percent of consumers believe it’s important for businesses to have a mobile-friendly website; however 96 percent have come across at least one site in their browsing routine that was clunky and difficult to navigate on their phones and tablets. [1] The creation of separate mobile-friendly websites was initially viewed as the solution to the changing web-viewing environment. However, the cost and complexities of maintaining two independent sites proved to be draining for many companies. A better solution that could address the navigation issues created by the ever-widening array of screen sizes and resolutions was needed.  Responsive web design (RWD) meets the challenges and makes the transition to the mobile world smoother.

The Need for Responsive Web Design

Mobile users expect companies to have a fully functional mobile website, not a watered-down, ad-hoc version of what they see on their computers. This not only demonstrates to consumers that you’re capable of embracing changing technology, but it also helps you form a closer relationship with them. Responsive web design helps you cater to these expectations, while allowing you to save money on future web development costs. It offers browsing continuity between mobile devices and shields you from having to constantly update a separate mobile site to accommodate new devices.

2 circular statistics showing 72% and 96% of consumers believe websites should be mobile-friendly and have found websites difficult to navigate on mobile devices

What is RWD?

In 2010, Ethan Marcotte introduced RWD (responsive web design) by comparing it to responsive architectural design. [2] Just as a room would automatically adjust for the number of occupants, he reasoned that a web page could be structured to adapt to its browsing environment. RWD is a web development approach that configures websites to accommodate all mobile devices and changes how sites are displayed on different screen sizes.

A web page must now be seen as a liquid that takes the shape of the viewing device.

Using solid front-end planning, a site is created with pre-set definitions that adjust for words, images, screen sizes and orientations.  This offers the following advantages:

  • One specific location – URL- for all content
  • Customized viewing for all devices
  • Greater long-term cost efficiency
  • Easier tracking and analysis

Responsive web design relies on a unique way of thinking. A web page must now be seen as a liquid that takes the shape of the viewing device. The programming has the same functionality whether the user is on a laptop or a smartphone. Using fluid grids, flexible images, and cascading style sheets (CSS) media queries, RWD’s resolution, images and other content adjust for the browser’s capabilities.

Fluid Framework

animation showing generic web page looking the same as it dynamically changes to conform to any size media device

Responsive Web Design (RWD) easily adjust its content for any screen size.

With new mobile devices coming out every day with different capabilities, how does one design a website that will function everywhere? In addition to portrait and landscape orientations, the introduction of hundreds of various screen sizes is creating a vast set of viewing options. A website with a flexible framework is needed to meet these needs. To create a fluid layout, the relationship between the individual elements should remain constant as the entire page shrinks or expands to accommodate the viewing device.

How does a fluid grid resize within the browser?  Think of a fixed layout as a sheet of paper with a predetermined pixel size. The content on the sheet is either a fixed pixel size or a percent of the sheet size. The key concept to note is that everything is fixed, and size is maintained across browsers. For a non-fixed layout, a grid with a maximum size is defined. The grid is then subdivided into elements. Each of the individual elements has dimensions based on percentages. This allows them to adjust to the screen resolution of the device.

To Hide or Not to Hide

Depending on the website, not everything can be accomplished by changing the relative size of the contents. In some cases, it is necessary to hide contents using a drop-down menu or rearrange the contents. The best practice for viewing in the mobile world has to include visibility. Part of Responsive web design is giving the user the ability to pick and choose the displayed content.

A Picture Paints a Thousand Words

A flexible image shrinks within the confines of the fluid grid. With a simple line of code, an image can be set to a maximum value based off of its initial pixel size. This will keep the image from becoming either stretched or pixelated.

It is important to take the size of the image into consideration. If the original size is large, the download time and storage space on a mobile device would unnecessarily bog down the processing time. However, with a little planning, the image that best represents your company and doesn’t slow down your site can still be used.

Setting Limits

Google has also endorsed responsive web design as the best approach to mobile search engine optimization.

A media query is the most basic part of the programming structure. It can be viewed as either true or false. Nevertheless, it is an essential component of the RWD because it determines the limits for the viewing device. The queries determine the maximum dimensions, orientation and resolution of the viewing area.

Media queries are not a new technology. They have been available as part of CSS technology for several years. For RWD, they allow CSS to be used if and only if certain conditions are satisfied. So, queries are set up to have different CSS’s load depending on the mobile device that is being used.

Responsive Web Design: Is It Worth It?

While initial costs for an RWD maybe more, the long-term gains are substantial. RWD eliminates the need for constantly adjusting the programming to contend with the introduction of new technology. According to a leading information technology (IT) company, responsive websites create an opportunity for customers to differentiate themselves from their competition—and win the battle to engage mobile viewers. [3] One company saw a 188 percent increase in revenue after switching to RWD. [4] Google has also endorsed responsive design as the best approach to mobile Search Engine Optimization. [5]

Now that smartphones and tablets are more affordable, they are an essential part of our daily lives. Whether looking for directions or trying to find the closest Mexican restaurant, mobile devices are where we turn for instantaneous answers. More than just engaging, your website needs to be optimized for mobile navigation.

Mary Pomerantz Advertising has implemented RWD for numerous clients, including Rutgers University and Access Self Storage. Whether your customers are viewing on a laptop, Kindle or iPhone, let MPA make your mobile impression your best impression. Contact us today at 732-214-9600 to get started.

Your browser is out-of-date!

Update your browser to view this website correctly.Update my browser now

×

Read previous post:
Integrated Advertising Campaigns Should Be a Key Part of Your Marketing Blueprint

Close