The Responsive Design Process

by Denis Igin | September 20, 2013 11:00 am

Three main components are necessary to build a responsive design website: content (images, media and text), a flexible grid-based layout and media queries to control how styles are applied in different applications. The website designer will work with each of these elements as they create a responsive design website. Generally, the entire process involves the following steps:

  1. User ResearchResearch is done to determine how users are likely to use a specific website and what approaches work best for a particular demographic. In some cases, a client may have already completed this step before they begin to work with a responsive website designer. This information is then used to help determine content and the best type of website to achieve the client’s goals.
  2. Structured ContentA content inventory is performed in order to determine all of the content to be displayed on the website, including navigation, images and text. There are two options for structuring content in a responsive design website:- The content can be designed to fit on a mobile device and then the view can be adapted via media queries to show better on desktops and tablets.
    – Content can be designed to display differently on each device using media queries, with parts that are hidden under a click-through or Read More button on mobile or tablet devices.
  3. Linear DesignInteractive design and development determines the look and layout of the site using page schematics or screen blueprints. This step creates a visual guide of the skeletal framework for the website.
  4. Content Reference WireframesThese more detailed layouts are developed to include a blueprint of the grids, breakpoint graphs and proportions to be used to create the website. They show the actual content to be displayed on the website, including the ways it will display on different devices.
  5. Prototype DevelopmentAn HTML prototype with screenshots is created. At this point, revisions may be made based on client input and consultation, and parts of any of the previous steps may be repeated as needed to incorporate any revisions.

Finally, the revised prototype goes into production, which is where the actual website is developed with the media queries to determine what styles are shown for the website on different media types. This is the final stage which leads to publication of the new, responsive website.

To learn more about responsive design, read the previous articles in our series, What Exactly is Responsive Web Design? and Five Reasons Why You Need a Responsive Design Website.

If you are interested in building a responsive design website, NXC can help you to create it. Contact us today[1] to learn more.

Endnotes:
  1. Contact us today: http://nxcgroup.com/Contacts

Source URL: http://blog.nxcgroup.com/2013/the-responsive-design-process/