At the end of 2012, Mashable reported that 2013 would be the year of responsive web design. In the month of November of 2012, Mashable reported having been accessed on more than 2,500 different devices, and that they could build apps to reach a good number of the platforms, but probably not all of them. There are a number of different devices from the well-known iPod touch, to the new Kindle Fire HD. Each device provides a unique set of criteria for both web design and development, and as more and more devices enter the market, it becomes less and less viable for web design and or developers to address devices on an individual basis. As a result adaptive and responsive web design solutions have become increasingly attractive options, but there are other options to consider as well.
The increasingly common question web developers and designers are asking is “Will this be optimized for mobile?” As a solution, they are becoming mobile optimizing authorities, confident in their recommendation and process for any client and project. They unddferstand different methods for mobile optimization such as mobile friendly, separate mobile site, adaptive design, and responsive design. But which are future proof? More devices of different shapes and sizes are sure to come into the industry, and the web world once again will have to adapt, and a responsive design seems to be the best solution.
A responsive design fluidly changes to fit any device size or device agnostic. The site is built initially in such a way that it responds to whichever device it is accessed on whether it be a desktop, smartphone, or tablet. A responsive web design is accomplished by using a combination of fluid-grip layouts, media queries, break points, and flexible images.
Responsive design is good because it is less expensive, easier to maintain and update because it is a single set of content, and has a single URL for all devices. For now, it is relatively “future proof” for new devices and is the most consistent experience across all devices. Responsive design is bad because pages are more time consuming to plan, design and develop, making prototyping and testing more complex. There is also less exact control over visual design on specific devices and screen sizes. It is best to use responsive design for your clients web project when the time and budget constraints allow for it, and when the decision is made at the kickoff of the project. A fully responsive designed web page will have the best visual design quality on all size devices.
Responsive design calls for fluid layouts; which opt to define widths of pages and components by percentages opposed to pixels; which are used in fixed layouts. The scales for fluid layouts adjust to device size but it is still difficult to control and predict exactly the way the page will be laid out. As a result, there can be exceedingly small images on smaller devices without use of other techniques.
Media queries are also important for responsive design. They deliver different renderings of a webpage to different devices. They are a coded statement that initiates variations in styles and layout based on various device parameters such as browser size, device orientation, and device resolution. All desktop browsers may not currently support Media queries, but they are heavily supported amongst mobile devices.
As a site is rendered across different devices, various site elements can shift position, be revealed, or be hidden. Content choreography determines the final arrangement of repositioned items and is usually achieved by media queries. Break points are the points at which media queries are initiated to make changes to the layout of a website. Device size is often the first break point to consider, however it is equally, if not more important, to consider break points on the basis of the site content. Generally, the more break points the better, but each additional break point will typically require additional design, development and planning.
The new considerations of different device shapes and sizes, and the future of what is yet to come, necessitate the need for early, comprehensive planning of web design. While it is important to understand your fluid grids from your media queries, it is even more important to remember that the decision to make a responsive design is a major one and should be treated as such, start to finish.
