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.
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 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 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:
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.
