Well, maybe it’s not a galactic guide but we thought we would share some of our favorite tools and resources that our design team uses for responsive design.

For Inspiration

Mediaquir.es: This website houses a collection of websites using media queries and responsive web design. Curated by Eivind Uggedal, we love checking this site our weekly to see what people in the industry are doing.  We gain inspiration for navigation structure, creative design, and layout flow.  Through this site, we discovered responsive sites like Starbucks.com, the Center for Investigative Reporting and TravelOregon.com.

For Wireframing

Wirefy: As part of our typical development process, we provide our clients with wireframes for key pages of their new site. Wireframes are black and white blueprints showing where content will live on a page, which we present in static image format.  For responsive projects, wireframing can be tricky because you have an infinite number of screen sizes and break points to account for.  Enter Wirefy.  Wirefy is a “rapid responsive wireframing tool” used to create clickable wireframes that demonstrate a site’s responsive nature.

For Design

Style Tiles: As we think about our design process and how the design process must change (become more flexible and less static) to accommodate responsive design, this tool becomes more vital.  Style Tiles “are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.  They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.”  Instead of designing a static page, you use style tiles to create a mood board that describes the style or visual brand of the web site.

For Testing

Responsive.is: This is a site that easily shows how your website looks in different sized devices.  As you can imagine, the best case scenario for testing responsive websites would be to have access to every mobile and tablet device in the market, but that can become very expensive!  So, instead, web-based tools like Responsive.is have been developed to simulate various screen sizes.

Need more?   Call us and we’d be happy to talk through your project’s requirements.  703-548-3433 x21.

With offices in Washington, D.C. and Los Angeles, Ca., New Target provides digital strategy, digital marketing, web design, web development, branding, website hosting, and creative services for prominent nonprofits, companies, and government.