Jennifer introduces the emerging responsive design workflow and concepts that will set the stage for the conference.
Day One / November 4, 2013
Our speakers present alternative approaches to web page mockups that separate the visual design language (the “look and feel”) from they layout of specific pages.
SLIDES: Get 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)
It’s becoming clear that it’s preferable to transfer your designs into code as early in the process as possible, and using a grid or a framework can give you a head start. But how do you use them? Jared introduces the best options and translates a sketch to an HTML prototype before your eyes!
SLIDES: Getting Real with Responsive Wireframes (PDF)
SLIDES: Mo' Pixels, Mo' Problems (PDF)
We designers aren’t the only ones needing to adapt to a changing web ecosystem. Our clients and bosses also need to change their expectations around what a “site design” entails today and what deliverables will be provided during the design and development process. Every member of our panel has experience selling responsive design to clients and adjusting deliverables and payment schedules in an appropriate way. They’ll share their experiences and welcome questions from you and your fellow attendees.
SLIDES: How to Set Client Expectations (PDF)
Day Two / November 5, 2013
When we create for the web, we participate in a kind of public art. We code, we design, we build for an audience, shaping digital experiences that provide a service, or that create joy, or that simply connect readers with words written half a world away. But in this session we’ll look at some ways in which our audience reshapes the way we think about responsive web design, and see where they might be leading us—and the web—next.
When approaching the design of a responsive website, old habits might focus you on sidebars and footer regions for placing content. It's natural to assume the best responsive solutions are to be found in moving those regions around the page as whole units. But that way of thinking could lead you miss the best stuff about responsive design. Let go of the old habits, and discover how focusing on content can drive far superior responsive layouts.
As code becomes an integral part of the designer's toolbox, it becomes increasingly important for designers to “play well with others.” Git is the most popular version tracking system in the web development world and you’ll learn how to use it! This session gives you basic GIt training including what Git is, how it looks on the command line, how to find your way around GitHub, and services that provide a friendly front-end interface.
SLIDES: GitHub for People Who Don't Code (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)
• Font services vs. self-hosting (smackdown-style)
• Where they work (and where they don't)
• Performance (and how to get more of it)
• Icon fonts (even MORE resolution independence)
• Mobile use (benefits and bear traps)
• Fallbacks, FOUT & Freakouts (don't present to clients without this)
• Super Fancy (ff)eatures (ligatures & other Open Type goodness)
Don't get me wrong—I love web fonts and good typography—but it is still a bit ‘Wild West’ out there, so it pays to be prepared.
SLIDES: Designing with Web Fonts: Type, Responsively (PDF)
DEMO: Google Web Font Demo
Kevin and Sophie reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way. Find out what worked and what they learned. In the end, it should be clear that this is a time for experimentation and finding new approaches for new tasks.
SLIDES: A New Toolbox (PDF)
Brad wraps up the first ever ARTIFACT Conference by reminding us that the web is about people.
SLIDES: PEOPLE (PDF)