Real-world Responsive Web Design: A Case Study of the mLearnCon Website

Conference Archive

mLearnCon 2014 - June 26, 2014

Tiffany Le Brun

Email/Web Developer
The eLearning Guild

Crystal Rose

Director, Web Development and Design
The eLearning Guild

The increase in mobile usage has led to an expectation in consumers to have a seamless experience across all devices. This creates challenges for designers, who now need to design content that works not only on desktops, smartphones, and tablets, but on devices with varying screen sizes within each category. Responsive design is a great solution to the fragmentation of devices across smartphones, tablet, desktop, and more.

In this session you will explore a case study of The eLearning Guild’s efforts to adapt the mLearnCon website template into a mobile-friendly, responsive site viewable across all devices. You will learn the challenges we encountered along the way and how we overcame them. You will discover best practices and methodologies to wireframe, design, and code your own responsive site. You will explore the initial design considerations and key implementation choices and issues, and see some examples of the code changes.

In this session, you will learn:

  • The core elements of a responsive design
  • How to define a site’s specifications for each breakpoint
  • How to optimize design and graphics for user interactivity and experience
  • How to utilize media queries, viewport settings, grid system, and flexible images for multiple break points

Audience:
Novice to intermediate designers and developers.

Technology discussed in this session:
PC, tablets, smartphones, HTML5, CSS3, and JavaScript.

Handouts

You do not have access to these files. Please log in or join to download these files.

 

 Back to Library
Advertise Here
Advertise Here

Upcoming Events

Guild Platinum Sponsors

Guild Sponsors

We Proudly Support

Humentum

Recent Job Postings