Designing websites for smartphones is easy compared to retrofitting those already in place. More than that, it’s embarrassing how, almost eight years after CSS gained practical acceptance, a lack of foresight haunts those of you who write HTML. Converting older websites to responsive design causes headaches not because small screens are difficult, but because most HTML documents were written under an assumption about screen size.
Let’s say you’re employed by a large company. Surveys indicate that many customers are more likely to visit your website with a smartphone. The large company is planning a redesign of their existing site. Before sketching icons, perusing responsive grids or cramming HTML5, one fact threatens to derail the redesign project. The content isn’t just ill-formatted for small screens — it’s ill-formatted for anything other than desktop browsers less than 960 pixels wide. The more pages a website has, the more likely it has variations. One solution does not fit all variations, especially when some were intended for a specific screen. You could divide ill-fitting pages into multiple pages for mobile devices, but not without consequences. Designers who practiced table-based layout may remember how headaches up front lead to more flexible code later. This time around, you can think beyond today’s move to mobile. Responsive design bridges the gap with use-case instructions.