Responsive Strategy

To ensure the success of a responsive website, we must start with the proper responsive strategy, just like building a solid structure requires a firm foundation.

responsive web devices

Responsive Retrofitting vs. Responsive Design

Responsive retrofitting is the process of making an already existing site or app that was initially designed for larger screens to be more responsive. These sort of sites likely had very little if any affordance for smaller screens.

Responsive design, on the other hand, is the process of starting a responsive site from scratch, designing first for smaller mobile screens and working your way up to larger screens.

Responsive retroffitting is a quick way to get fast results and make sites intended for larger screens, such as desktop monitors, to also look presentable on smaller screens. However, to get the most out of a responsive rearchitecture of a site, responsive retroffiting usually leaves way too many artifacts in the process of retroffiting and does not allow for the most optimal and scalable responsive site. Starting with a clean slate with the right strategy and building a responsive site using a responsive mobile-first approach is usually preferred. Retroffiting may have its best use in a quick and dry preliminary solution to make a site look presentable on smaller screens while a full responsive design and development is underway or quickly to follow.

Mobile-first Design

For a responsive design or app to properly scale up indefinitely and allow for the flexibility of features, components, etc. a mobile-first design is a must. Mobile-first design means we start designing page layouts for small screens first.

When we design page layouts for the smallest screens first, it forces very careful thought of component prioritization and order - which components should have the most screen real estate and which components should be prioritized at the top of the screen or with more prominent colors, etc.

This is a far more challenging than designing for larger screens, but it allows the most difficult challenges to be solved first and forces us to consider the information architecture of a site (more on this in an upcoming section), which all help make the rest of the designing and development much easier and usually more intuitive.

Mobile-first Development

Mobile-first development usually starts with itemizing of the various considerations important for a responsive site -

  • firguring out the information architecture (IA) of the site at large and each page
  • understanding how structural decisions can impact accessibility (a11y)
  • determining how internationalization (i18n)

Once these considerations are documented, establishing the main layout and setting the groundwork for the responsive pages is the next step.

How Responsive?

This site uses techniques for ultimate responsiveness. Among the responsive aspects are,

  • page grid (from Skin) for automatic fluid positioning and layout scaling
  • mobile (hamburger) site navigation display/hide
  • site navigation placement adjustment between small/larger screens
  • responsive images for optimized page performance
  • fully responsive typography that's completely fluid
  • completely fluid border radii for boxes that scales with size

While not all of these are technically necesary for a responsive site, how responsive you'd like to be with your site will depend on your needs. To end up with the most responsive site, you'd employ all these techniques.