Recognise problematic design patterns before you start building a responsive site and create better designer-developer relationships
Designs are intended to be "pixel perfect" for one particular state of the website/browser/device but "indicative only" for everything else
Three (or zero? Red flag!) breakpoint designs with no design instructions for fluid in-between-ness
Maybe they don't have the right tools for the job - they're still using Photoshop to create plans for something fluid
They might come from a print background and not have any knowledge of how CSS and HTML works
Well, actually, like many things "it depends". But because of what most project manager, designer and developer teams are doing right now, this is a big Red flag for responsive design.
There are two primary hurdles to your initial designs being truly sign-off-able, and clear industry trends mean these two hurdles are getting bigger every year:
Development and design are both increasingly expected to be both "iterative" and "innovative" at a minimum.
Only allowing for a single, waterfall style design based on a single wireframing session is counter-productive to both of these goals.
Web standards such as CSS/JS + old Internet Explorer versions are poorly equipped to handle every Photoshop effect.
As a result, project managers have to do much more work, acting as a middle-man between client, developer and designer to document detail of every page of the design
The larger the project, the easier it is for little disappointing details to creep in.
Responsive design exacerbates all of the above in a big way.
Simple assumptions can become geometric impossibilities.
“Layers” don’t make sense for presenting different pages
You have to export it into a PDF, or access it in Photoshop as a PSD. Both are bad.
Photoshop is really expensive and causes double handling, which makes it even more expensive.
You can’t prototype in Photoshop
Photoshop only has a loose sense of a hierarchy so the DOM structure is difficult to represent
You can create a style guide in InDesign that works much like CSS
You can design across multiple layouts in InDesign
You can snap items to the grid with ease
You can create "master pages" to represent headers/footers, etc.
You can export CSS from InDesign (!!)
Check out "Liquid layouts" and "alternative layouts".
or other browser-based responsive design tools are new and shiny
Design using actual CSS, learn about CSS while you design
Drag and drop/click buttons instead of writing code
Create re-usable classes with styles
Prototype basic animations - you can use their pre-made JS snippets or import your own
Revision history (YAY!)
Export as working, HTML5 code
Developers think you’re really smart
BUT if you've never built a website before by hand, there will be a learning curve as this may be the first time you've encountered technical concepts like "The DOM"
We live in a world where the web isn’t just a static image cut from the page. Contemporary websites include a lot of animations, even subtle ones, like gradual hover effects for links and buttons.
A static design provided to a developer almost never includes any sort of animation spec for hover/click interactions
This might sound crazy... but we think designers can learn to prototype web design patterns!
Prototype with clickable hotspots
Play with existing prototypes of animation patterns, or just show your developer something cool
Browse popular patterns and prototype code snippets
Literally design in browser, across multiple layouts, using real code, without writing any code. Preview your site instantly.
A competitor to Webflow, also very cool. Arguably an easier learning curve than Webflow but a bit less powerful.
Simply Test Me
A super simple tool that allows you to road test modules and themes in Drupal.
Say I have rough/early designs/wireframes provided and we look at the content structure and there’s a few pages that haven’t been designed.
What’s the best way forward? Ask the designer to make more designs and get client signoff? (Red flag! Time consuming!)
We’ve got another idea.
Make the world a happier place
We believe in style-guide-driven development. That means that the style guide isn’t just created for the benefit of developers, but it’s used as the basis for the entire design process.
If your designer hasn't heard of a style guide...
A quick summary of why style guides are awesome:
Seriously get on the grid. If you’re not designing on a grid yet you need to immediately start designing on a grid for the love of god.
Grid-based design uses a simple geometric tool to neatly organise elements across and down the screen
It's compatible with modern theming tools (and base themes) and creates a beautiful sense of balance across your designs.
By segmenting the screen into fluid grids, all elements are built as fractions or percentages of the available space rather than with fixed width pixels. Different breakpoints can have different amounts of columns.
You can even create grids within grids (with Singularity)
Base-level grid styles can be created as part of the style guide
It’s never, ever, ever the case that text blocks are exactly the same length, so make sure your designs don’t make that assumption.
A developer can demonstrate this to you immediately by firing up the Devel module when they start work :)
Which is good because people don't use IE8 on their phones.
You'd be surprised how many times this has come up.
More lines = a taller text section, which forces the image dimensions into a strange ratio.
It's working so far...
... but we make the LHS slightly less wide ...
... and now the whole layout is as wide as when we started!
Keep the text super short
Consider whether the intention is for the image to "magically fit" into the space (ie. change dimensions) or stay the same dimensions. Ask.
Some designs won't suit the "use a square" approach.
Manual Crop module can be a real lifesaver in situations like this. It allows you to choose different croppings for the same image and display a crop as an image style using Views, Display Suite, or theme('image_style')
Seriously, this is actually a problem. Mainly when the amount of menu items "must be controlled by the client" :(
Drupal 8's awesome new admin toolbar navigation follows this pattern and uses icons to squeeze down until the mobile menu is triggered.
Using the same image for a thumbnail and a hero image always seems like such a good idea in the design...
But can go so wrong, especially for images with faces.
Same goes for full screen background images...
Please stop partially decapitating people
Especially when this image is user-uploaded in a per-article basis
This might look a bit familiar...
... because it is very problematic ...
... especially when the screen size is changing.
This is a typical menu on an eCommerce store
On desktop, it's pretty simple and logical.
But on mobile, we suddenly need bi-directional navigation with our mobile menu
IT GETS A LITTLE BIT COMPLICATED
Once we drill down to the second level menu, we can only choose a subset, not just choose to see the whole set anymore.
So we need to add a new menu item for this menu on mobile, but not on desktop.
Designers: use the right tools, prototype and be open to feedback from devs. Create style guides and design to a fluid grid.
Developers: ask lots of questions and properly analyse designs when they’re given to you. Keep an eye out for common problems that impact dynamic layouts. Offer solutions based on your tech stack. Use the right tools and choose a good base theme and get acquainted with responsive tools that Drupal offers (and other, non-Drupal-specific tools, too).
Developers and designers: Use this list and create your own list of red flags to watch out for, so you can identify them in designs and immediately mention that it might be problematic for fluid designs.