Responsive vs Dynamic Web Design
When you’re looking into having a website built, you may be asked by your web designer if you’d like it to be a dynamic website or a responsive one. This question usually relates to making the website mobile friendly and the different ways to do so as dynamic websites and responsive websites achieve those results in different manners. Granted, there are other reasons besides mobile devices to maybe use a dynamic website but for many people it comes down to that alone. It’s important to understand the difference between the two as both have pros and cons depending on what you’re planning to do. That also means having at least a very basic understanding of how the internet works.
In the simplest terms, when you type in a website in your computer it sends a signal to another computer. This computer has all of the files for the website. That computer grabs all of the website files needed for the web page you requested, and sends them back to your computer. You can think of it as sitting at a table in the library, and each book being a web page. Whenever you want one, you get up and walk over to grab it, and then walk back to your table. Again, in the very simplest terms, this is how the internet works. This leads us to a responsive web design vs a dynamic one.
When doing a responsive website design, whether you go to the website on a desktop computer, a table, or a mobile device, you’ll always grab the same files that make up that web page. Once the files get to your computer, the code that’s in the files you were sent tells your device how to arrange everything. If it’s a small screen you can tell the code to hide things such as a side bar so that the article isn’t squeezed into a small area. If an image is wider than the screen, the code can shrink it down to the size of the screen so that you don’t have to scroll to the side to see the whole image.
An example of this is our Black Door Media you’re viewing right now. You’ll notice the pages that show multiple articles with images to the left of them on a desktop or laptop change to show the images above each article clip on a mobile phone. The title of the website at the top of the page also moves from the left hand side to the center as the screen shrinks. You can test this yourself right now by grabbing your browser window and pulling it to make it more narrow. All of the code, and the files sent to you stays the same. It’s just that the code tells the design to move things around as the screen shrinks or grows to make everything more readable.
Dynamic website design works a bit different. It starts like a responsive website when you type in the web address and it sends a signal to get the files for the website. Instead of always grabbing the same files to send back, it checks the type of device and sends files based on that information. Let’s use the library example to simplify this again. You’re sitting at a table and decide to get a book (send the signal to get files). You walk over to the shelf and go to grab the book. Instead of acting like the responsive website where the same files are grabbed for everyone, it instead checks you and decides that you always get the red cover version of the book, where someone else may get a blue cover. It basically bases the cover of the book it gives you based on who you are.
A dynamic website does the same thing based on which device you are using. This means you can design one version of the site for mobile phones, and you can have a completely different looking of version for tablets or desktops. The website Fit and Fashionable we designed is a dynamic website. If you go to the website on a desktop or laptop computer, you’ll notice each article category like Fitness or Tech shows the 3 most recently posted articles and the 3 most popular articles based on views for that category. If you go to the same website on your phone though, you’ll notice each category only lists the 3 most recent articles. If you remember the controversy with airlines offering different prices based on if you were using a Mac or a Windows computer, they were using a similar setup.
So what are the advantages and disadvantages for a dynamic vs responsive website? To be honest, a responsive design is a bit more consistent and easily controlled to give you want you want at different sizes since it looks specifically at the screen size and not the device. Because a dynamically designed website has to check which device something is before deciding which files to send, it may not always choose the right files for that device. This is particularly problematic as new codes to distinguish different devices are being added constantly which means there is a constant upkeep to make sure the device is checked for properly before deciding which files to send. We’ve seen a few instances where the code it checks for thinks the device is a mobile device and sends those files, when the device is actually a table with a much larger screen causing it display on screen in a way that was not intended. Score one for responsive design.
On the other hand, most people have data caps and such on their mobile devices or tablets. It also tends to take longer to load pages through them. Websites can also have a ton of files it has to send back to the user before the page is fully loaded into their device to view. With responsive website design every file has to be sent every time someone goes to that web page. That means if your hiding something like a sidebar or an image, the data has to be sent first (using up a users data plan) before it can be hidden through the code.
Let’s use the Fit and Fashionable website above as an example. We mentioned that when it was sent to a mobile device it only sends the 3 most recent articles instead of the 3 most recent and 3 most viewed articles as it does on a desktop or laptop. You’ll notice each article it mentions in each category also comes with a picture and the title for the article. Each picture is a separate file that has to be sent to the person going to that website, and as we all should know each file takes up a certain amount of space.
If we had used a responsive design for that, we could have made the page look exactly the same on a mobile device by just hiding the photos in those categories once the page was loaded into the users browser to see it. There are 5 categories though and 3 articles/pictures for “most viewed” in each category, which means for that website page to fully load the person viewing it would have to wait for 15 extra pictures to be sent to the mobile device and they wouldn’t even get to see them because they’d be hidden.
As we mentioned, responsive websites also resize images so that they fit inside your screen nicely. This means making large images appear smaller. Larger images are larger in data size too which adds another slow down for loading a website for someone trying to view a page on a mobile device, along with eating into their data plan. This is because they have to download the larger image to your mobile device, and then it resizes to shrink it to fit nicely. With a dynamic website, instead of having the large images being grabbed and then shrunk, it can instead be set to grab smaller images which will not only download faster but will save data on the web visitors plan.
Those are the main benefits and cons between a dynamic vs a responsive site. Obviously there are others, but for most websites the choice of which type to use will come down to those issues. Our recommendation is that if you’re using a photo heavy website, use a dynamic design to increase loading times and save your users data plan. Remember, if you’re eating up a users data plan on a mobile device, there’s a good chance that if they find out they won’t be coming back to visit. If your doing a website that isn’t image heavy, and you only need to hide small pieces here and there to make the layout work, then a responsive design is likely the way to go as it gives you more control based on the actual screen size without having to worry about all of the devices being accounted for.
