Today, more people than ever are using their mobile phone to access the internet. Prediction says that mobile internet use may exceed desktop internet use by as early as 2014. Due to this change in how people browse, web designers have to shift their focus to the mobile presence of their websites.
There are three main routes that they can choose to take in regards to how their website functions: Adaptive web design, Responsive web design or entirely separate mobile sites. Each have their advantages and disadvantages, and its a complicated choice as to which makes more sense for developers to use.
Separate mobile sites redirect the user to a different URL when the sites detects they are on a mobile. These mobile sites are entirely separate, with different layout and URLs, but they function similarly to the main page. They may offer similar, less, more or completely different options than the main site.
Adaptive web design fixes features on a site one-by-one in response to what deviceyou are accessing the site with. There are several approaches to adaptive sites. They can replace certain elements (such as replacing a large menu bar with a smaller drop-down menu,) add elements (such as inserting a GPS or phone button that wouldn’t work on a desktop,) take away features and content (that might seem extraneous for the mobile site) or swap elements around in other ways beneficial to the device it is being accessed on. A common adaptive change is for the images and content to be replaced with smaller images when the detected screen size is smaller.
Responsive web design is when every element of the entire main website is designed to resize and reorganize correctly based on the browser window size (or other defining factor) through which it is being accessed. This way, it’s the same site on both an iPhone or a desktop. It is made to prioritize important parts of the site, organising them in the forefront as the site elements change layout/spacing/size to neatly fit whatever browser size it’s being accessed on- which includes anything from desktops, to tablets, to mobile screens. Instead of swapping out elements for different mobile elements, like adaptive design, it simply takes the same page and rearranges it, using a fluid grid. Changing the browser window’s size on a desktop screen demonstrates this effect, as the elements rearranges and slide around fluidly in responsive to the size of the window. Technically, responsive web design is a subset of adaptive web design, but is more recent and more complex.
One crucial concept when it comes to choosing what kind of mobile site to use is that of “content parity.” Content parity is the idea that users should not be at a advantage depending on what device they are using to browse. The same content should be available across all platforms, and no pages should end with error messages reading. ” This concept not available on mobile.” In regards to this, responsive web design has the advantage. It’s a way to have the mobile and full -sized sites have all the same content, and have no discrepancies between them. Because its the same elements, getting resized and moved around, it’s almost the same experience from device to device. However, responsive design has its flaws too. Due to the complex nature of it, it takes a lot more time, money and hard work to create a responsive design–because in doing it , the entire main website has to essentially be redesigned . In addition, its complex nature means there is a lot of room for error. It is not uncommon for navigation bars or images to scale or move incorrectly on responsive websites. Another issue is that responsive web design is harder to explain to clients, since they are much more complicated than static websites of which most people are knowledgeable.
Many major business and brands now have responsive web platforms, and it continues to grow in popularity as an option. Some notable responsive sites include Microsoft, Barack Obama’s campaign site, grey Goose vodka and Boston Globe. More and more universities and business are using responsive sites as a way to tackle the issue of increased mobile.
Separate mobile website have their own strengths and weakness. Generally, the biggest issue with having a redirect to a mobile website is that the two are not hosting the same content. There is a large change for disparity between them. Also, while sending links out from a mobile site, the URL is different for mobile links. Because of this, the content often does not display correctly on a desktop if it does not know to redirect. In addition, mobile sites often leave out a lot of the elements of the main site, which can prove problematic. Aside from these flaws, mobile sites can still work, and are often utilized. If designed properly, they can be similarly as functional as an adaptive or responsive website.
Adaptive website have their advantages and disadvantages as well. Adaptive and responsive are more similar than it first appear- both tackle the same task of having the mobile experience be the same page as the desktop experience, but altered for mobile usability. Sites can use a combination of both adaptive and responsive elements. There are some problems unique to the adaptive design experience. However, one complication is the way that images are changed due to the device accessing it. The problem is that the way images display doesn’t just depend on the size of the browser. It also matters what the screen resolution of the device is, and the bandwidth–and these factors can be independent of one another, so images may not always properly adapt (with responsive design, they are resized on a sliding scale instead of being replaced). Another issue is because the adaptive site is the small full site with certain elements changed, it might be slow to load all of the site’s features.
There is no definitive answer for what the “best” approach is. Responsive web design may be popular, but it is not without its flaws. In the end, the most important fact is that many people primarily access the web with their smartphones, and the numbers are only going up, it is no longer an option for mobile experiences to be lacking. Keeping content parity, ease of use, cost and difficulty of production and other factors in mind, companies can make the right choice for what their personal needs are. As more and more people use their phones to access the internet, the blurrier the line between “full-size” and “mobile” sites will be.