Mobile Web
An ever-increasing number of web users are connecting from their mobile devices–tablets, phablets, smartphones, iPods. It is therefore now more than ever necessary that web content be adaptable to the various screen sizes on the large variety of devices used to browse cyberspace. You will have to consider mobile web design in order to maximize your SEO. The two major ways to accomplish this flexibility are through adaptive or responsive web design. We will look what these two design schemas are, how they differ, and how to choose which one is best for your needs.
Adaptive Design
In adaptive design, the formatting done to a website are accomplished at the server. The server detects what device is being used to connect to its site and loads the correct prefigured formatting. In adaptive design, there is therefore a set number of prefigured design layouts, one for each major device’s screen size. The three most common screen widths are
1. 320 pixels for smartphones
2. 760 pixels for tablets
3. 960 pixels for laptops and desktops
Once the site is loaded, it does not change or readapt.
Responsive Design
Responsive design, on the other hand, uses a flexible and fluid grid system – which is based on CSS3 – that changes instantly and constantly to the browser window size. If you drag and change the size of the browser, the content seamlessly changes along with the sizing. Responsive design is accomplished, then, on the client side of the interaction as opposed to the server end. Since it continually adapts to the browser’s size, responsive design allows for more flexibility in function. It is a much more dynamic and versatile solution to the problem of multiple screen sizes.
Major Differences
As we’ve seen, the biggest difference between adaptive and responsive design is on which end the changes are made, on the server side or on the client side. This difference results, however, in more or less dynamic flexibility in a website’s layout. Adaptive design figures out what type of device is browsing its site and sends one of a finite few possible templates. Responsive design, on the other hand, responds to the screen size continuously and dynamically, allowing for a more flexible implementation.
Which to Choose?
Because of responsive design’s, well, responsiveness, it would seem like the obvious choice for most sites. It is not, however, that simple. First, responsive design requires much more planning and much more technical expertise in coding in order to pull off the responsively. Adaptive design does require you code a few separate layouts, yes, but this is usually much simpler and more straightforward than the much more complex responsive design. Second, because responsive design must load one large and complex style sheet for each site, it can be much slower than adaptive design’s less complex coding. The end effect is that adaptive design is often faster and more streamlined. Responsive design is, however, more adaptable than adaptive design and overall cleaner and aesthetically pleasing to view and manipulate.
Which design should you choose for your site then? In the end, both designs are extremely useful and accomplish the same goal: web content that can adapt to a large variety of mobile device screen sizes. Both are also equally effective at implementing SEO. Which one you ultimately choose will depend upon: 1. how truly responsively adaptable you need your website to be, 2. how much time and energy you have to put into coding the more intensive and complex responsive design vs. the much more straightforward adaptive design, and 3. how fast you want your site to load. You will have to look at your resources and your site in order to pick the right mobile web design for you.
