Case Study: Scoping a Responsive Website Project
Earlier this year, I built a new marketing website for a medical communications agency, and I ran into some interesting responsive design challenges. Much of my work on web applications layouts has been very grid-heavy to display lots of information in an easily-understandable format, but this project was image-centric and a fun change of pace.
In order to keep the project timeline and costs from ballooning, I did some careful scoping to deliver a mobile- and desktop-optimized site that also looks good at very small and very large sizes.
About the Project
The client team specialized in medical illustration, among many other media and communications services, and they wanted to showcase their skills on the site. Each page has DNA helixes snaking around the content. This added visual interest and variation, but presented some implementation challenges. The layout of each page was highly dependent on its unique DNA background. This meant that elements would need to be custom-aligned per page.
This also made responsiveness the main challenge. Letting the background images scale up as viewport increased would mean pixellated images, and having content that could naturally flow on the page would mean unintentional overlapping with the background image and a strange looking layout at some sizes.
Too Many Breakpoints
One solution would be to have a different background image for every viewport size. I used Tailwind for this project, which has 6 standard responsive sizes (base size to 2xl). So if I went this route, there would be 6 different layouts per page, with a different version of the background image per layout. This was a simple site that only had 4 pages, but the prospect of 24 different page versions to lay out and test was overwhelming.
Additionally, the breakpoints started to break down at very small and very large sizes. Tailwind’s sm breakpoint is 640px, which is tablet-sized. Anything smaller than 640px is considered the base/default size. But mobile devices have a wide range of viewport sizes. An iPhone 12 Pro has a 390px viewport, and an iPhone 14 Pro Max has a 430px viewport. For this project, some pages had background images with DNAs snaking around the borders, and those DNAs couldn’t be seen at all viewports less than 640px because smaller viewports would crop out parts of the image. This meant that we’d potentially need several more and more granular less-than-sm layouts.
At sizes larger than Tailwind’s 2xl1536px desktop size, the problem was worse because theoretically we could be talking about huge screens, like giant monitors or TV displays. There was no upper bound.
In short, things needed to get scoped down.
Scoping Solutions
Focus on mobile and desktop displays.
The team had designs for a small mobile layout and a small desktop layout, so I started here. They wanted to optimize these sizes and were less concerned about tablets, since they knew their customers would primarily view the site on their phones or desktops. The designs did not perfectly map to any of the standard breakpoints, but it was easy enough to get things into more or less the right positions, and then have a few feedback sessions with the client team to tweak positioning.
Constrain the xxl breakpoint.
Letting the content organically expand to fit infinitely large screens is of course a bad idea. This would mean increasingly pixelated background images as the page scales up. It would also mean losing control of the layout and placement of elements relative to the background. Instead, I opted to set a max width of 2xl (1536px). Any screen larger than that would display the site centered on the screen, with a sharp image cut off on the borders. The team toyed with creating an image that was larger than 1536 width that had a non-hard cutoff, like DNAs might snake and connect and fade away, but they decided after all that they liked the look of the cutoff and would spare the extra design work.
Customize the small breakpoint.
Since we wanted to optimize for mobile and not have the base size also potentially include small tablets, I redefined the small breakpoint to apply to screens slightly larger than the largest iPhones. This was an easy configuration change in the tailwind.config.ts:
theme: {
extend: {
screens: {
sm: "451px"
},
}
}Then all I needed from the designer was a background image that would still show the DNAs on the borders across sm to xs mobile devices. We landed on an image that 450px wide, with DNA visible on about 40px from either side.
To get the desired result, the designer and I collaborated in a few short working sessions over Zoom. I was able to swap out background images in real time by quick updates to the Tailwind config:
backgroundImage: {
home: "url('/backgrounds/450_Home.png')",
// easy to swap out this URL to test different background images
}Then I’d demo that background at different device sizes using the browser dev tools. The designer was able to send me a few iterations of files until we found the one the team was happy with.
Don’t sweat the intermediate sizes.
The team thought that most of their clients would view the website on mobile or on laptop/desktop, not on tablets, so we descoped the medium breakpoints. This means that not every element is custom-aligned if you were to view the website on a tablet or a half-width browser window. If we had more time and more budget, we could massage those intermediate layouts, but we didn’t, so we moved this from the backlog to archived, so to speak.
A Successful Launch
After all this was done, we were back at 2 layouts to manage per 4 pages: mobile and desktop. This is not a fully responsive site, but it looks right at the sizes that matter. Moreover, the delivery and launch of this project went smoothly and according to schedule, and both the client team and their customers were excited by the new site.
