The Workshop

In the Responsive Web Design workshop, participants from within businesses and organizations get an interactive overview of several key aspects of the responsive web design process.

Designed to be accessible to users who are at a beginner or intermediate level, the responsive web design workshop will concentrate on the following 3 key objectives:

  1. Understanding the content-first approach to developing websites within a content management system.
  2. Understanding what makes mobile-first, responsive websites work well through design thinking and code.
  3. Ensuring a user-centered design approach through user research and usability testing.

Agenda

Each of the three topics will be explored first through a practical discussion and review of key ideas related to the topic, followed by a hands-on, interactive group activity that will demonstrate the topic in real-world use. The activities are targeted toward beginners and are intended to start a discussion, understanding and appreciation around responsive web design that can spark new ideas and processes in the participants’ own work.

Part 1: User-Centered Design Processes

Participants will develop an understanding of the various research techniques used to ensure a user-focused, responsive website. We’ll briefly discuss surveys, user interviews, competitive analysis, card sorting and persona development. We’ll also deep dive into usability testing and how organizations can perform user testing on their own with limited resources. Participants will learn how to turn their findings into actionable deliverables.

Hands-On Activity:
Using a sample website (either chosen by participants or facilitator), groups will develop a series of key tasks to be performed on the website and then conduct a live usability study, with participants choosing roles as test facilitators, test participants and test observers/notetakers. We’ll briefly discuss some of our findings as a group.

Part 2: Content-First Design

Participants will learn why content is one of the most crucial parts of the web design process. We’ll discuss content prioritization (especially as it relates to mobile devices), content mapping and types and choosing a content management system that fits their project’s goals. We’ll briefly touch on information architecture and writing for the mobile web in this section.

Hands-On Activity:
Using a sample website (either chosen by participants or the facilitator), participants will work in groups to determine the websites key content types. They’ll then work to break down some of the key content types into their individual parts, which will help drive content management system integration.

Part 3: Responsive Web Design in Action

Participants will take a look at what makes responsive web sites work by talking about HTML and CSS, the building blocks of the web. We’ll discuss how Ethan Marcotte combined flexible grids and media query breakpoints to introduce the world to true multi-device design, and why concepts like mobile-first and atomic design result in better design decisions. We’ll briefly touch on wireframing, sketching, prototyping and design patterns in this section, and discuss the importance of involving the entire team in the design process from the beginning.

Hands-On Activity:
If computers are available, participants will work in pairs to write some actual, mobile-first HTML and CSS using an online tool called CodePen. CodePen allows users to write code and see that code immediately rendered as a web page in their browser, with no software required. Short HTML and CSS snippets will be provided by the facilitator, so no prior development knowledge is needed.

If computers are not available, participants will work in groups to sketch out a mobile-first wireframe of a sample website on paper using pencils and markers. Groups will be challenged to design in a way that places the most important content first, while ensuring the design is usable on small screens. Groups will briefly present their sketches and explain how they made their design decisions.