duda
The Different Types of Responsive Design

Cody Zimmer • Feb 26, 2014

 

Let’s be honest, the world of web design can be confusing. It’s an industry that seems to change by the second, and understanding what exactly the latest and great technologies are (along with their pros and cons) can be difficult. So we figured we’d take a few minutes to outline exactly what words like “adaptive” and "responsive" mean in regard to web design and website builders.

 

 

Let’s begin with our own product…

 

 

Duda is completely built with the responsive design concept. This is a fancy way to say that the website automatically adapts to fit the size of the screen it is viewed on. But, there are many different ways to build sites that work on all devices; let’s cover a few of the options.

 

 

Adaptive

 

Adaptive websites will deliver different websites depending on the device type that visits the site. This means the mobile site will be totally different than (and separate from) desktop.

 

Adaptive sites have the nice advantage of being able to load content that is just for specific devices, and don’t load anything unnecessary. Essentially it is a second website customized for a particular experience. Nothing will beat the customizability of having different websites for each device, but maintaining two sites can be a challenge. 

 

Responsive

 

Responsive design is a way of building websites so the content rearranges itself depending on the size of the screen. You can tell if a site is responsive by resizing your browser window. Does the content rearrange itself? If yes, then the site is responsive.

So did you catch the difference between responsive and adaptive? Here’s an easy way to keep it straight:

  • Adaptive = 2 websites/Device Type/Changes Content
  • Responsive = 1 website/Screen Size/Doesn’t Change Content

Now that we’ve got that handled, let’s continue…

Responsive sites load all of the code necessary for viewing the website, no matter the device being used, every single time. This can lead to some content bloat, and slower load times on spotty cell phone connections.

Behind the scenes, responsive websites use a new feature of CSS3 called media queries, to detect the screen size, and style the website differently according to the different sizes. Typically a designer will break content up into blocks that rearrange themselves at certain screen sizes. So the site will apply one set of CSS styles for screens above a certain size, and a different set of styles to viewports below that size, and so on. On smaller screens, content blocks will stack on top of each other for easy mobile viewing.

As you can imagine, building a responsive website is not exactly an easy task, as you have to test on many different devices and screen sizes. However, we have seen a rise in Responsive/CSS frameworks that make it much easier for front end developers to code these kind of websites. Solid knowledge of HTML & CSS is still required to build a good-looking website with these frameworks, but the task is much simpler. Two of the most popular are Twitter’s Bootstrap and Foundation.

These responsive frameworks arrange website content in a series of rows and grids. Developers can then define breakpoints, which the framework will use to determine when to display the predefined styles.

Responsive plus server-side support

The next step in responsive design, is responsive plus server-side support (sometimes called RESS or dynamic serving). This means the website will check which type of device is being used on the back-end, before the site is loaded, then displays responsive content specifically tailored for that device type.

So here’s short formula for this one:

RESS = 1 website/Device Type/Changes Content

For example, an RESS website would detect a user is browsing from a mobile phone, then display a responsive website with content and features just for mobile. And since the website is responsive, it will display well and give a great user experience on a wide array of mobile devices, in either portrait or landscape mode.

RESS can be much faster than simple responsive websites, as they can detect and load resources just for the device they are being viewed on. This means less code to download, smaller images, etc., which makes users with questionable data connections happy.

RESS websites also enjoy all the benefits of responsive design, with a single URL for all devices, and a site that responds and looks great on any device browser.

Here at Duda, RESS is our approach of choice. DudaOne utilizes a heavily customized version of the Foundation framework as the basis of websites built on the platform, and adds server-side support to them. This means no coding skills are required, making it easier than ever to build a truly responsive website.

The word logo is written in pink on a black grid
By Renana Dar 28 Mar, 2024
Agency owners manage logo requests alongside website builds, navigating diverse types of logos. Learn to streamline design processes effectively with our comprehensive guide.
Duda for SaaS
By Shawn Davis 26 Mar, 2024
Small businesses are increasingly expecting specialized SaaS platforms to be one-stop-shops for all of their digital marketing needs — including websites.
Growth hacking for SMB SaaS
By Renana Dar 25 Mar, 2024
You have to get creative when selling to small and mid-sized businesses. That's where growth hacking comes in. Read the article for a complete list of growth hacks for SMB SaaS providers.
Show More

Latest Posts

Share by: