The days when our worries were related strictly about how our site will look in IE are gone… Not that IE turned into a better browser and we don’t have to worry anymore but because now we have a more complex subject to think of when we start designing and building a website: how it will look on different mobile devices.
This is how the “responsive” trend appeared. Even if it’s been a while since this happened i’m afraid not all the developers and designers have a clear understanding of what a responsive or an adaptive design means.
I will give you an example I had to deal with few days ago: someone in the office bough a “responsive” theme from Theme Forrest. This theme was not responsive at all, it was just adapted for 3 screen resolutions (which by the way they weren’t matching any common mobile phones or tablets resolutions). This theme was using a slider for the home page. On iPhone the slider was showing almost fullscreen in the vertical position but when i was rotating the phone the slider was remaining the same size, taking just 60% of the screen.
So, i think at this point we have 4 major design types:
- Fixed – the website’s width is set to a fixed number and it won’t change when the browser is resizing or when it is vewed from different devices with different screen resolutions;
- Fluid – the website’s structures are defined with percentages for widths so when the browser is resizing or when the website is viewed from different browsers the website width is scaling in a fluid way;
- Responsive – starting from a fluid grid, it is using media queries for a better control of the resources and the design. The website will respond to whatever platform you are using or regardless of resolution and orientation and depending on them it may change how certain elements are displayed. This is usually possible entirely through HTML and CSS;
- Adaptive – the website is using the CSS3 media queries to define the layout for different resolutions. So, i f you already have a site built with fixed dimensions for a desktop screen, you can just adapt the styles with media queries to match certain screens as well, like for example iPhone and iPad. For these sizes the size will look optimal but between them the layout sometimes may have issues, like excessive empty spaces, too small or too big images and texts etc.
Probably an adaptive design is easier and cheaper to implement and test because you have just the cases you define, while a responsive design is more complex because you have to test as much cases as possible in order to make sure everything is working the way it should.
Personally I prefer the responsive approach. The user’s experience is not limited to just some screen resolutions and he can enjoy the site on his device to the maximum, but i don’t think it is correct to say one method is better than the other. This depends on the client’s needs and requirements, on the time or the budget allocated for the project etc and probably in many cases a mix between the two concepts is the right way to do it.