One thing you know for sure — if you want your service to cover as many people as possible, go online. It’s the Internet where your potential clients are looking for the service you can provide. The next truth is that if you want to cover even more users, go mobile. So, you have probably considered creating a website with dedicated web design, and iOS / Android apps with dedicated mobile app design. It seems pretty costly.
However, we have a better option for you. Instead of creating both above-said products: a website and apps, make your website accessible to anyone and here is how. The website that is responsive (or adaptive, depending on what you choose by the end of the article) can generate more loyal users than a website and mobile apps together, and save your money.
What is Responsive Web Design (RWD)
According to the most credible source on the topic, the book written by E. Marcotte “Responsive web design”, the concept of RWD is to create a single website for all possible devices and browsers. The design adjusts to the screen size and looks as though it was created just for this particular device, no matter whether it is a desktop or mobile browser. Let’s now see how designers achieve this.
Components of the Responsive Design
To meet the requirements of the responsiveness, the website should have at least one of the following features:
- Grid-based layout, also known as a flexible layout. The website layout changes in proportion to the screen size. It is possible due to percent-based sizing. The main unit of measure is percent and em (for fonts), not pixels. This means if you have a table on the page and the column takes 30% of the screen, it will be so for any screen.
Note! Keep in mind small mobile screens and huge TV screens. Set a minimum and maximum width in order not to make your responsiveness look weird.
- Flexible media. Images, videos, and any other media content should change proportionally to the size of blocks where they are placed. Take into account that media files also may require minimum and maximum values.
- Media queries. Being a part of CSS standard, they let the page get optimized according to the screen resolution of a particular device.
Mobile responsive website
How to know if the website is responsive? Just drag the browser’s corner changing its size. If the content looks good on different screen sizes, it means creators took care of users, making the website automatically conform to changes. Summing up the main properties of the responsive web design, we can conclude that it doesn’t actually care about a device it’s going to be opened on. Mobile responsive sites are a bit longer to design and develop, however, the benefit of much longer survival is worth waiting.
What is Adaptive Web Design (AWD)
Unlike responsive web design, adaptive design is grounded on creating design for pre-specified screen resolutions of different devices. Let’s say you can create a website optimized to the most popular screen widths (320px, 480px, 760px, 960px, 1200px, 1600px) or analyze your target audience to know for sure what devices they might use working with your website and create all necessary layouts.
Adaptive design strategies and techniques
Progressive enhancement and graceful degradation are the two main strategies used within adaptive design approach. Let’s find out the essence of each.
Progressive enhancement strategy implies creating versions of your website from the oldest of browsers in use. And then gradually website versions are created for more contemporary browsers. The main benefit of such approach is that you get a working product very early. That you make your website with static content more complex and dynamic.
Graceful degradation strategy follows the same principles but in an opposite way — you create a website for the most modern browsers and then adapt it to the older versions of browsers.
Another principle you can adhere when creating a website is a Mobile First prinсiple аfirst mentioned in L. Wroblewski’s book. The Mobile first principle is very similar to the progressive enhancement strategy. Everything is simple here — the design is created for a mobile look (the content usually has a concise and simplified view). Then, the mobile website is enhanced, getting more content and dynamics.
Adaptive design summary
Adaptive design is characterized with multiple design layouts for certain groups of devices. So the web design that is created following adaptiveness may have these features:
- Website design may be different on different devices.
- Website content may vary on different devices.
Comparing the design strategies
Let’s sum up and try to fetch out pros and cons of both Responsive and Adaptive web designs.
Responsive web development
- Single URL which simplifies website promotion.
- Google regards RWD as a mobile-friendly strategy and improves website SEO rates.
- Easier and cheaper maintenance.
- Overloaded screen for mobile devices.
- Unified product for all devices (lack of customizability).
Adaptive web development
- Improved targeting. You can specify the content of your website according to the device.
- Customized design.
- Costly and complicated development.
- Complex maintenance.
Responsive or Adaptive: How to make the final decision
It’s worth mentioning that there’s no definite opinion which one is better. That depends on your objectives. However, let’s try to draw a line with a few recommendations.
The Responsive website is suitable when:
- You are limited in time and money.
- You strive to create a simple and clean website design.
- You want to simplify the process of updating and maintenance.
The Adaptive website is suitable when:
- You are sure about devices your target audience uses.
- You are not limited with time and money resources.
About the author
Nataliia Kharchenko is a Marketing Copywriter at Cleveroad Mobile and Web development company. We are focused on helping startups, small, and medium businesses create competitive and winning software.