The web is constantly evolving, web design techniques are changing with it. In the last several years, desktop computers gave way to laptops, and laptops are giving way to tablets and smartphones with an astonishing amount of power.
As phones got better and tablets like the iPad were released, mobile users could view a webpage in much the same way that a desktop or laptop user could. The only problem was that the page often did not fit on the screen, requiring users to scroll side to side and up and down more than their stationary counterparts.
As more users began accessing the web from mobile devices, we began to see the rise of mobile friendly websites. Plugins or scripts often served a unique URL, in the form of “m.mobilefriendlywebsiteexample.com”. The site fit on the screen, but lost functionality.
While this was a fine stopgap measure, the real need was for something more responsive. Enter the rise of responsive web design.
Responsive Web Design In A Nutshell
A websites that is designed to be responsive is just that. The page will respond to the size of the screen on the device used to access it. If a user is on a desktop with a large screen the size of a small TV, the page will adjust to fit that screen. In the even that they are on a tablet or phone, the screen will then adjust to fit these screens as well.
The only difference, is that a site designed to be responsive will rearrange elements on a page to make room for the content. This usually means that navigation is either arranged differently or is even moved to a new location on the page. The bottom of the page is where most elements are moved.
The Benefits Of Responsive Web Design
There are three important benefits to responsive web design.
The first has to do with user experience design. Users enjoy getting the logical experience as much as possible. A mobile site can be simple to use, but the normal elements that make a page special and worth visiting are often omitted.
The extra code required to run plugins and scripts is often inefficient with regards to the use of bandwidth. Page speeds slow down, and the user gets a different feel than they are used to.
Second, search engine optimization is preserved through responsive design in opposite where mobile sites are often not indexed. If a user on a smartphone finds a piece of content that they enjoy and then chooses to save it to share later, they will be saving the URL everyone else is using.
With a mobile dedicated site, the off-site link equity is compromised. A user who clicks a link to the mobile dedicated version of a page may experience one of two possibilities. The first is that they will get the mobile page on their desktop or laptop browser. This page usually has a plain design.
It also often lacks advertising, which is crucial to many website’s ability to continue operation.
If they are not presented with the mobile version of the page, they may be redirected to the “regular” page. In this case, a 301 redirect takes place. Some link equity is preserved, but Google has confirmed that some of the value of off-site links is lost when people and Google’s crawler bots have to pass through the redirect.
Finally, there is often a loss of consistent branding with mobile dedicated sites. A page designed responsively will still have the normal header, typography and other elements that make it identifiable and worth remembering.
Understanding Responsive Web Design Techniques
Responsive web design is rendered through CSS. CSS is responsible for the majority of how things look on the web. Colors and typography are the two big elements covered by CSS, but CSS can also be used for responsive web design.
Currently, a designer may develop a page, then re-size their screen to get an idea of how the page will look on different designs. The “jump” from size to size can be harsh, but proper use of CSS can make this smoother for the designer and also for the user who may change their device from a vertical orientation to a horizontal one.
Designers are also exploring ways to render images and videos in different sizes and resolutions to better fit different screens. CSS can also be used to set a maximum width of an image or video to ensure that there is some consistency from screen to screen.
Finally, the current trend of rearranging essential page elements like sidebars and navigation menus is shifting. Some are stacking menus on one another. Others are sticking with the current practices.
One thing that is certain is that responsive web design is evolving at a rapid rate. The current crop of websites and pages designed responsively will likely look much different than the design we see in another year or two.
Responsive web design is far from perfect. It is still an evolving technique that can be crude at times, but is better than any other technique currently in use.
To see examples of great responsive web design in action, take a look at the rather complex websites of General Electric and Microsoft. The BBC also has implemented responsive design on some of their web properties. These may serve as motivation for what is possible with some imagination and determination.
When you are ready to take your company website in responsive direction, give us a call, we will be able to help and guide you thru the process.