Static Photoshop comps no longer cut it for responsive web design. But if not Photoshop, WHAT?! This talk describes the new responsive workflow and what deliverables make sense.
CONFERENCE DAY / Wednesday, March 19, 2014
Design deliverables can be challenging in a multi-device world. Front-end developers have had their day playing with fluid grids, flexible content, and media queries. Now it's time to let the rest of the team in on the job.
In this session, we'll investigate how to get design approval in the context of a responsive process. We hope to challenge you to get into our medium earlier in your process, demonstrating the benefits of in-browser design review and "Style Prototypes." In addition, you'll learn how these kinds of deliverables can help educate your clients and establish appropriate expectations early in a project.
SLIDES: Dissecting Design (PDF)
Yesenia presents alternative approaches to web page mockups that separate the visual design language (the "look and feel") from they layout of specific pages.
SLIDES: Getting Your Visual Style On (PDF)
Many digital style guides are ancient relics, created for the designer as a way to properly dictate the use of visual elements. However, we live in a world where our digital products and services are judged not just how they look, but by what they do and how they behave. So a relevant style guide needs to speak to a larger audience, including the UX designer and developer, to create the attribute that all brands should strive for: consistency.
We will explore:
• The problems with current style guides
• What other companies are doing
• The essential components
• Where to go next
SLIDES: Evolving the Digital Style Guide (PDF)
Not too long ago, being the best web designer around was synonymous with having serious Photoshop skills. But having to design for a bajillion devices, you've likely been told \"you can't use Photoshop anymore\". In a HTML5 and CSS3 world, is there any room for our old friend? Absolutely. This session is chock-full of ideas, including an in-depth look at some great tools for repurposing Photoshop in your Responsive Web Design workflow.
SLIDES: Photoshop's New Groove (PDF)
It's clear that responsive web design demands process. It is also clear that elaborate Photoshop comps at endless breakpoint variations just don't cut it when designing for the flexible, multi-device web.
Reassessing our methods for web design gives the opportunity to develop better process and deliverables, not just for responsive design, but for the web in general.
In this presentation Matt Griffin (founder, Bearded) will explore a more iterative, collaborative process for responsive web design, utilizing a variety of deliverables ranging from HTML/CSS wireframes and low-fi static mock-ups to full-blown in-browser comps. He'll show case studies from his company's own work, showing their own transition from Photoshop-dependency to front-end fluency.
SLIDES: Working Closer to the Medium (PDF)
Have a question you didn't get a chance to ask? Our speakers will close out the day by taking questions from the stage.
WORKSHOP DAY 1 / Thursday, March 20, 2014
Everything You Wanted to Know About Responsive Design...And Less! is a full-day workshop that takes a deep dive into the world of responsivewebdesign, covering everything including broad concepts, strategy, how responsivedesign affects process, responsivedesign patterns and principles, and development best practices and considerations.
Oh, and the "...And Less" part? Responsive design is a huge topic so unfortunately it's impossible to pack everything about it into a single day. But that doesn't mean we can't try, right? Here's what will be covered:
- The ever-shifting landscape - The web landscape is getting more diverse every single day, and this section will address why responsivewebdesign is becoming increasingly essential
- Approach - There's more than one way to skin this mobile web cat. We'll look at the various strategies being used to address the zombie apocalypse of devices
- Foundations of Responsive Design - Responsive web design 101. Fluid grids, flexible media andmedia queries make up the core of responsive web design
- Principles of Adaptive Design - What beyond layout do we need to concern ourselves with when creating great multi-device web experiences? We'll cover how ubiquity, flexibility, performance, enhancement and future-friendliness are powerful principles for making great adaptive web experiences.
- Atomic Design - Atomic design is a methodology to help you create robust design systems. We'll go over how to break an interface down into its atomic elements, and why that matters for designing for the multi-device Web
- Strategy and Workflow - Our new reality means that we need to adapt our process and workflow to match. This section will tackle thorny areas like convincing your clients, changing the behavior of your colleagues and designing in the Post-PSD Era.
- Responsive Patterns - Creating adaptive interfaces is challenging, but thankfully the web community is hard at work creating flexible, downright innovative design patterns. We'll look at how to tackle layout, navigation, images, tables and more.
- Development Best Practices - The way we build websites has changed. This section will discuss mobile-first development, conditional loading and more to help you develop future-friendly web experience
WORKSHOP DAY 2 / Friday, March 21, 2014
Build Responsively introduces workshoppers to the mindset and techniques necessary for embracing the fluid nature of the web. The full-day workshop provides a broad sweep across the major topics involved in building responsive websites, including:
- Responsive Web Design 101
- Web Design Process for Responsive Sites
- Project Deliverables
- Techniques for Structuring Code
- Flexible Content Considerations
- Shifting Interaction Models
- Navigation on Responsive Sites
- Performance Considerations
- Responsive Thinking
Across each topic, Ben Callahan from Sparkbox will provide a good starting point of best practices, relevant examples, recent industry developments, and challenging hurdles. Throughout the day, workshoppers will have opportunity to dig into code examples and exercises, but content will also be accessible for non-developers.
We ask that all workshoppers bring at least a basic understanding of HTML/CSS, a laptop, and an opinion.