Dynamic Serving vs Responsive Design is a question that many webmasters and programmers have to face. To be honest there is no all in one solution to find out the right method, whether it is Dynamic Serving or Responsive Design. But of course there are some advantages and disadvantages of both methods which will help you making the right decision. This blog post will help you to distinguish if rather Dynamic Serving or Responsive Design fits the needs of your individual project.
This article is about the important online marketing topic Mobile SEO. Therefore I will cover some useful methods that will let you provide a mobile friendly website, Dynamic Serving and Responsive Design.
When you take a look at your web analytics software I am pretty sure you will recognize that visits from mobile devices have increased over the last months. This is very common to most of the websites out there. The reason is the string increasing distribution of smartphones and other mobile devices like tablets.
The conclusion of traffic that comes from several devices is that you need a website that has to fit the different screens of that devices. In the past it was easy to design a website with static heights and widths declared in pixels. Most of the screens had more or less the same size, so there was no need to implement dynamic heights and widths or in general dynamic CSS containers. But nowadays this is totally different. Imagine a website with a static width of 700 pixels showing up on your smartphoneâ€¦
Concerning to Search Engine Optimization (SEO) the area of creating websites for several devices is part of Mobile SEO. Mobile SEO is basically about implementing a clean infrastructure, especially when it comes to URLs. There is one thing you have to keep in mind. The ranking of your website depends on the URL of the desktop version (at least until today). This means the ranking of your website on mobile devices is estimated by the SEO factors on the desktop website, not on the mobile website. Therefore you need a good ranking desktop website to get much mobile traffic.
The following 3 methods are basics to manage Mobile SEO:
- Responsive Design
- Dynamic Serving
- Separate mobile website
In this article I will explain you the difference between Responsive Design and Dynamic Serving.
What is Dynamic Serving?
Dynamic Serving as well only needs one URL per webpage. The difference here is that the HTML code varies depending on the User-Agent. This means that the webserver delivers different versions of your website to the different devices. This is realized via the HTTP-Header declaration Vary: User-Agent. Here are some cases when you can use the Vary: User-Agent HTTP-Header:
- Use the Vary: User-Agent HTTP-Header when you dynamically serve different content for the same URL or
- when you redirect mobile users to a different mobile URL but
- do not use this header if you are always sending the same content for the same URL like you do with Responsive Design
This is how a Vary HTTP Header in general looks like:
GET /page-1 HTTP/1.1
HTTP/1.1 200 OK
Here are some ways how to implement the User-Agent header.
How to implement Dynamic Serving
Keep in mind this is more complex than CSS media queries. So if you are not sure of what you are doing you probably should ask for help.
Set up Vary: User-Agent in .htaccess
When you want to set up the header via the Apache .htaccess file you have to include the following line of code into your .htaccess:
Header append Vary User-Agent
Set up Vary: User-Agent in WordPress
To set up the header in WordPress you need a little bit more coding skills. Go to your functions.php file and include the following piece of code:
Set up Vary: User-Agent via PHP
Here is how you set up the header via PHP:
header(â€śVary: User-Agent, Acceptâ€ť);
Note: In case you use a Content-Delivery-Network (CDN) the use of Vary: User-Agent may cause some problems. The declaration may be interpreted the way that you do not want to cache content.
Further functions of the Vary HTTP Header
In general there are 2 more functions of the Vary Header:
- It controls the usage of the server cache. This means it is possible to decide which content will be loaded on different devices. It might be useful to not load huge images when requesting a website from a smartphone. This will make your website way faster!
- It also helps crawlers of search engines to find content that is optimized for mobile devices. This prevents search engines to crawl wrong content. Imagine you put a lot of work in a mobile optimized website that you want to deliver via dynamic serving and the search engines indexes your desktop versionâ€¦
User Agent Sniffing
When you decide to provide your mobile content via dynamic serving, then you have to keep in mind that dynamic serving is kind of error-prone. The problem is the recognition of the correct User-Agent, the User Agent Sniffing.
To recognize a User-Agent, the server has to make a comparison of the actual User-Agent and the ones saved in the Vary Header. Normally User Agent are saved in the Vary Header with lists. This means every available device has to be written down in this list. The problem is that almost every day a new device gets on the market. Therefore it is very hard to keep this list up to date.
The next problem is that the step of the comparison of the actual User-Agent and those in the list is very error-prone. This means it is very likely that mobile content for an Android smartphone is delivered to an Android tablet. Well you might say this is not too bad, but actually it is!
The last thing is that the â€śforbiddenâ€ť technique of Cloaking also uses dynamic serving. Which means that when you did not implement your dynamic serving 100% correct, Google might suppose that you are cloaking some content. This could lead into bad penalties.
Dynamic Serving: Pros and Cons
So after all I will give you a short overview of the Pros and Cons of dynamic serving:
|1 URL||huge technical complexity|
|no need for redirects||problems with CDNs|
|individual optimization for mobile search behaviour||error-prone|
|Mobile First UX||high costs|
|Â faster page load times|
|perfectly customized user experience because you can design all layouts specifically to a range of device|
What is Responsive Design?
Responsive Design is the automatic and dynamic adjustment of the containers and elements on a website to the size of the actual screen. The huge benefit of Responsive Design is that the URL stays the same, no second URL will be generated. When talking about the Googlebots this means that the crawl expense will not increase. Furthermore there is no risk to generate duplicate content, which would probably have bad impacts on your rankings. The implementation of Responsive Design is actually very simple. It is done via CSS media queries. The following image shows a small example of a media query:
As you can see the syntax of media queries is very simple. In case you are already familiar to CSS you definitely will not have any problems implementing it. But keep in mind, depending on the amount of the lines of code it might be a lot of work. The best way to implement a Responsive Design website is doing it from the scratch. It can be very frustrating to integrate those media queries into an already running system.
Responsive Design: Pros and Cons
I will explain you in this paragraph what I personally think the pros and cons of Responsive Design are.
|1 URL||Large websites that are good for desktop may be too slow for mobile|
|No changes in HTML needed||Implementation with media queries can take a long time|
|Cheap to implement||Implementation can be very complex on large websites|
|All the SEO equity goes to your one website||Implementation has to be done perfectly correct, otherwise you could get duplicate content|
|Because of only 1 URL there is no need for complicated device detection|
Get more detailed information about Responsive Design in the following book recommendations:
Dynamic Serving or Responsive Design?
At the end it is up to you if you rather prefer a responsive or dynamic website. You have to consider many factors before you make a decision. In case you already have a huge grown website project it might be very complicated to use Responsive Design and change the whole website into a responsive website.Â In this case it might be better to use Dynamic Serving.
On the other hand if you build a brand new website I recommend you to use Responsive Design rather than Dynamic Serving. Dynamic Serving is more complex to implement, more expensive and error-prone.