Responsive Web Design: The New Standard in Web Design

Responsive web design emerged in 2014 as the new standard in website development, but it is shocking that as we head into 2019 there are still millions of websites out there that are not responsive and therefore ignoring upwards of 50% of their customers that use tablets and smartphones. So, what is responsive web design and why is it important? We’ll start with the “what”.

What is Responsive Web Design?

responsive web design

Responsive web design is an approach to website development that aims to address the rapidly changing landscape of screen sizes and devices capable of displaying the world wide web. A website built using a responsive framework will automatically adjust its content and simplify the navigation structure in order to optimize the user experience, regardless of screen size or device. Responsive websites are created using existing technologies, it is an approach to website development as opposed to being a new technology onto itself.

Responsive Web Design

Responsive sites adapt content using fluid, proportion-based grids, flexible images based upon percentile rather than fixed width and CSS3 media queries.

What Are The Advantages of Responsive Web Design?

  • A responsive website greatly enhances the user experience across all platforms (desktop, tablet and smartphone)
    Gone are the eye-straining days of having to zoom in and scroll around in order to find what you are looking for. Plus, responsive sites are more uniform on all platforms and tend to have a more simplified navigation structure. With responsive design, simplicity is key.
  • A responsive website eliminates the need to build a separate, mobile-friendly version of the website
    Mobile-friendly websites were the stop gap measure used by web designers after the emergence of smartphones and prior to responsive frameworks. Many are still in use today. This required building and maintaining two separate websites, which could be sniffed out by the type of browser your devices uses and displayed accordingly. The added design and development cost of these sites plus the general frustration of having to maintain two sites made the practice cost-prohibitive. Lastly, mobile-friendly sites were basically watered-down versions of your desktop site, resulting in content duplication which will get you penalized by Google.
  • A responsive website increases your search engine optimization
    Responsive sites greatly increase the usability of a website, resulting in longer times spent on the website, a significant metric for Google in determining overall site quality. Responsive sites also tend to load more quickly, especially on mobile devices that are dependent on wireless networks. This is another significant metric for Google. Lastly, a responsive website tends to have a much lower bounce rate as users are spending more time on the site.
  • A responsive website is web standards compliant
    It is important to build your website in compliance with modern web standards, including the World Wide Web Consortium (W3C) and 508c3 government standards for accessibility compliance. A W3C-compliant website will ensure that your site performance is optimized for download speed, cross-browser and cross-device compatibility and usage on older browsers.
  • A responsive website leads to greater conversions and customer acquisition
    All of the aforementioned advantages contribute to what is likely the most important purpose of your website. A site that is search engine-friendly, accessible, intuitive, easy to read and fast to load will naturally generate more conversions, which will lead to more customers and growth for a business.

Indeed, responsive web design is the new standard in web design. It has revolutionized the web design industry and has created a consistent user experience that is finally worthy of the multi-platform world we live in today.

DEEPBLUE is recognized as a top Creative Agency on DesignRush.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

Does Responsive Web Design Slow Down the Mobile Experience?

I am often asked whether or not responsive web design can slow down or sometimes simply degrade the user experience on mobile devices due to image file sizes and other technical challenges. The short answer is no, at least not if the website was built correctly. Let me explain…

For RWD Optimization we employ a “Progressive Enhancement” technique. Most companies that are not familiar with the inner workings of RWD tend to think that it’s a one size fits all approach. What we do is focus on enhancing the experience based on the capabilities of the browser/device. For example a small device would have a smaller/more optimized image presented vs a larger version that a desktop user will see. The way other companies do this is they will serve up the same image for desktop that they do on mobile. This kills both bandwidth and performance. To them Responsive is just about scaling content down. To us its about optimizing the experience for all users.

In general responsive web design, if applied correctly, can actually reduce load times.

Here are some optimization rules we may apply:

1. Images Optimization
The final aspect of Responsive Web Design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow properties. Scaling in CSS is pretty simple to implement for both images and video.

2. Media queries
Media queries are one of the cornerstones of Responsive Web Design. By adding some filter criteria around CSS definitions, we can control under which conditions those rules are applied to web pages. There are two places to define these criteria: using the media attribute of a link tag that references a CSS file or inline on a CSS file.

3. RWD Framework
We may use top RWD frameworks like Bootstrap, Foundation, Gumby Framework or HTML KickStart to organize the page structure.

4. Grid-Based Layouts
The grid layout helps define the size of content on any screen and can be used to define layout on different screen sizes. The Bootstrap, Foundation, Telerik Page Layout and other frameworks provide various sizes for their grid columns based on the size of the browser.

5. Minimizing HTTP requests
HTTP requests are sent to every device unless you tell it not to. JavaScript and CSS resources can help with this, such as Compass.
This is an open source CSS authoring framework that allows developers to create clean markup and create sprites and extensions simply and easily.

4 Enable Compression
We may apply JavaScript and CSS as compressed formats to speed up the loading.

5. Showing and Hiding Content / Conditional loading:
Not all content is intended for all browsers. In Responsive Web Design, this is the least technical design decision. What elements should appear on each of the page sizes? Not all devices need to display the entire website, nor should they. So we may apply some areas to hide on mobile devices that are not of significance to the mobile user.

 

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Development | Leave a reply

Responsive Web Design and Progressive Enhancement: The Right Approach

Progressive enhancement is a strategy for responsive web design that emphasizes accessibility relational to the user’s device. The aim is to allow everyone access to basic content and functionality of a website, starting with the smallest of devices (eg, your smartphone) and then gradually enhancing the experience as you move up to larger devices that have more advanced browser software, greater bandwidth and more powerful processing.

With progressive enhancement a basic markup document is created that is geared towards the lowest common denominator of browsers and features. Once this has been completed a developer can then introduce new functionality to the web page, using modern web technologies such as Cascading Style Sheets (CSS) or JavaScript. Only devices and browsers that support the advanced functionality will display them. The strategy is an attempt to subvert the traditional web design approach known as “graceful degradation”, wherein designers would create websites for the latest browser technologies, then remove features so that the site would function on older browsers and less capable devices. The core principle of progressive enhancement is that basic content and functionality should be accessible to all web browsers. Web pages created using progressive enhancement are by their very nature more accessible, because the strategy demands that basic content always be available, not obstructed by commonly unsupported or easily disabled scripting. Progressive enhancement focuses on the content, not the browser.

progressive enhancement
progressive enhancement and graceful degradation

From a philosophical perspective, progressive enhancement is vastly superior to graceful degradation. As opposed to punishing us for using less capable devices and older browsers the strategy rewards us as we progress through each platform. Progressive enhancement comes from a happy place. It’s a Zen thing.

Developing responsive websites with progressive enhancement should be a best practices standard for web design agencies. Sadly, most of them still cling to the old graceful degradation legacy approach, because that is what they know. If you own or manage a website in 2013 you should be very concerned with content availability, overall accessibility and mobile browser compatibility. I strongly recommend that you take the time to learn more about progressive enhancement and responsive web design as they relate to your overall web strategy.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Strategy | Leave a reply

Don’t Be a Luddite! Embrace Responsive Web Design.

In 1779, legend holds that a youth by the name of Ed Ludd broke two stocking frames – mechanical knitting machines used in the textiles industry – in a fit of rage. Stocking frames represented the first major stage in the mechanization of the textile industry, and played an important part in the early history of the Industrial Revolution. To Ed Ludd and others of like mind, these machines forewarned of a dangerous new world in which machines would replace English textile artisans through less-skilled, low-wage labourers, leaving them without work.

Thus, the Luddite movement was born.

Dont be a luddite
Dont be a luddite

For years, the Luddite philosophy endured as the emergence of technology created a sense of fear and helplessness that coincided with the rise in difficult working conditions in modern factories. In modern usage, “Luddite” is a term describing those opposed to industrialization, automation, computerization or new technologies in general. Neo-Luddism is a viewpoint opposing many forms of modern technology; an inherent – perhaps misguided – belief that technology has a negative impact on individuals and communities. This dictates that humanity was better off before the advent of specific new technologies, labeling these technologies dangerous. These technologies are seen as so foreboding that it challenges faith in all technological progress. Because of this, Neo-Luddites are apprehensive about the ability of any new technology to solve current problems without creating more, potentially more dangerous, problems.

Technology Infiltration

During this era of technological proliferation across all facets of society and into our personal and professional lives, the luddite philosophy has manifested itself into a kind of sub-conscious, heuristic rejection of anything new. If it ain’t broke, don’t fix it – so they say. Although much of the trepidation with new technology can be attributed to the headaches and annoyance of actually having to use our minds to learn something, the intuitiveness and innovation in handling these emerging technologies makes this argument obsolete. Take the iPad Mini, for example. It is a device of supreme simplicity. Take it out of its box, hit the power button, and you are up and running. Anyone can learn how to use it in a matter of seconds. Period. No exceptions. We love our iPad Mini’s because they fundamentally destroy the Luddite living within all of us. Intuitiveness trumps primal fear.

imgres

Slaying the Luddite

This brings me to the point of this posting. Anyone can embrace and learn emerging technologies, but you must consciously confront your internal Luddite.

In 2013, Responsive Web Design will emerge as the new standard in web architecture, and DeepBlue will be at the forefront as a thought leader in this new approach. As I have proclaimed on several occasions, Responsive Web Design represents an elegant solution to a complex problem. The approach allows developers to create a website from a single-data source and adjust its layout accordingly to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to tablets to mobile phones). RWD satisfies the user experience demands of today’s multi-platform consumer. Is RWD perfect? No, and I have written previously on the subject of RWD pros and cons (see Responsive Web Design and the Acceptability Threshold: What You Should Know). However, it is our fundamental belief that Responsive Web Design is the right approach for all organizations, large and small.

responsive devices

Embracing Emerging Technologies

Although most of the folks I have spoken to regarding RWD are truly excited about the new approach, I have taken notice that a few remain hesitant. You see, Responsive Web Design represents a SIGNIFICANT departure from the “traditional” way of designing websites. It is a total reinvention of the web user experience and it is only a matter of time of WHEN – not IF – all websites of integrity and reputation go responsive. Companies, particularly the larger ones, tend to err on the side of caution and can be more reactionary than proactive when embracing new technologies. The Luddite prevails. They prefer to sit back and watch as the thought leaders seize the opportunity and establish best-practices. Then, they will play perpetual catch-up as market shares drop and they finally understand and embrace the benefits of emerging technologies and their impact. They allow the Luddite to cage the beast of Innovation until it finally devours its keeper. For any of you out there – CEO’s, Marketing Directors, IT Directors, etc. – who allow themselves to feel the trepidation of the Luddite and decide to sit this one out in 2013, allow me to share with you a small sampling of industry leaders that have already embraced Responsive Web Design:

There is a reason why these icons represent some of the most recognizable and loved brands in the world. They are thought leaders and innovators (although the case can certainly be made against Microsoft on this assertion  ) and they are not afraid to challenge conformity and set new standards. These organizations made the conscious decision to put their Luddite in its place and embrace emerging technologies, particularly Responsive Web Design.

As we head today into a new year full of questions and uncertainty, I challenge anyone out their hearing my words to heed my advice…

DON’T BE A LUDDITE!

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Strategy | Leave a reply