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.