Just when we started to get familiar with the phrase "Mobile Web", a new term have emerged which is "The Responsive Web".
Perhaps best explained by Kayla Knight: “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.”
The front-end designs that comes out of iBuildit are designed for the smartphone first. We design for the least capable device first, and build from there. This website is an example of responsive web design. As you scale this window, the image to the left will shrink. The image on the bottom will disappear under a certain window width. The front page also looks completely different depending on the size of your screen. Content is king, but other things can be omitted for the smaller screens, leaving room for the more important things.
The method used by iBuildIT means that you will be working with one website, but it will be well-represented on not only all the major browsers (Firefix, Chrome, IE, Opera, Safari) on all the major platforms (OS X, Windows, Linux) and all the other various mobile devices out there, and there are thousands of mobile devices to cater to. Another fun aspect is that you can simulate the mobile view on a desktop screen by narrowing the browser window, which sometimes is a good thing.
Responsive web design uses CSS3 media queries, fluid css grids and separated css stylesheets to dynamically change the layout to add or omit information, images or other content depending on the browser or device used to render the page. Responsive design is ideal for the vast majority of websites, but as always there are a few exceptions such as mobile-specific sites or apps, a highly complicated app like Facebook or a site with extreme traffic where every single byte counts.
There are some huge cost savings in the responsive approach which makes it a really great candidate for almost anyone who is redesigning their site.
One example is that with responsive web design, the display is resolution-based, not device-specific. You don't have to care about all of the thousands of manufacturers out there, which unfortunately is the case with mobile websites in general where you need to do really extensive (and expensive) testing for a ridiculously wide range of screen standards.
Another example is the single code base. One code base means less maintanence costs, less developer costs, less feature compatibility headaches in the future, happier managment, happier development team, more focus on customer delight and so on.
If you have questions or would like a quote on your next project, contact us here.
