Some designers shield developers from product meetings, usability sessions, and other opportunities for feedback. Bring in developers for visual and UX feedback
How does it look? What kind of validation do you need? How might the form change for touch input versus mouse and keyboard? 5. Early on, focus on the smaller details of the signup form with the dev team. Depending on the device, these elements may shift around or change in size. Imagine you’re designing a signup page with a headline, large graphic, and form. That consistency can be easier for the development team to digest. Smaller components generally present the same UX and visuals across different devices. So if you design an effective solution, it’s that much easier to re-apply it later on. Plus, small components tend to be more reusable between pages. That consistency can be easier to digest for the development team. So for developer handoffs, I like to concentrate on small and reusable components first, because they generally present the same UX and visuals across different devices. Both frameworks rely on small, reusable components as the basis for strong web architecture. My RWD workflow is influenced by Brad Frost’s thoughts on Atomic Web Design and Jonathan Snook’s SMACSS. See how the process goes and grow from there. Just altering a few image elements with the srcset attribute is a good first step. Read up on srcset and polyfills like Picturefill to ensure good cross-browser support. At the bare minimum, have a strategy for display density. Advanced responsive image techniques call for more assets for different viewport sizes.Īvoid leaving decisions on responsive image formats to the end of a project. You’ll need at least 2 assets for raster formats (JPGs): 1 for normal displays and a second for high-resolution ones. Yet for modern responsive design, that’s just the starting point.
Also, you’ll likely develop patterns for common image sizes as your web project progresses. But it’s important to agree on one format and stick with it. There’s no one right answer: everything depends on the content and resources available. You might use PNGs, JPGs, icon fonts, or SVGs for smaller elements and icons. Image formats and sizes often create stumbling blocks between designers and developers. My personal site’s top home page graphic delivers 1 of 6 different image sizes based on the viewport size and resolution. Many responsive images require multiple assets. Where specificity is less important, a brief discussion or an email describing the transitions can suffice. For especially complex layout changes, it’s a smart idea to create another wireframe or sketch to illustrate. Be proactive, and meet with your developers before they get too deep in their work. For example, when sizing down, text content may shrink and images drop into a single column.Īvoid making assumptions about what those adjustments can or should be with your development team. So almost every design has to consider the layout adjustments necessary between the specced sizes. Which means that a lot of your web audience will experience the design in its “in-between” states. There are fewer misunderstandings and less tension if tasks aren’t going as planned.ĭesign-development collaboration becomes particularly critical in wireframes and comps, it’s important to remember that responsive web design is inherently fluid. This kind of coordination isn’t just good for projects-a communicative, collaborative team is also a happier team. They resolved potential pitfalls early, delivered their projects on time, and iterated quickly. I’ve also seen novice designer-developer teams work together to deliver amazing results. I’ve seen solid designers and developers botch a project through miscommunication alone, and develop poor relationships as a consequence. Great web projects don’t succeed through good design or development chops alone-they also need communication and collaboration between designers and developers.