Guide to Designing for Screen Resolutions

Introduction

Ever pulled up a website on your phone, only to find it looking squished or zoomed out weirdly? That’s the reality of designing for different screen resolutions today. We’re not just talking about the old mobile vs. desktop divide anymore—there’s a huge variety of devices out there, from tiny smartwatches to massive 4K monitors. Getting your designs right across this wide range of screen sizes and resolutions isn’t optional; it’s essential for keeping users happy and engaged.

I remember tweaking a simple landing page that looked perfect on my laptop but turned into a mess on a tablet. The text overflowed, images got pixelated, and buttons were too small to tap. It hit me then: ignoring screen resolutions means losing visitors fast. With so many people browsing on everything from foldable phones to ultrawide laptops, your design has to adapt fluidly. This guide dives into how to handle that variety, so your sites shine no matter the device.

Why Focus on Screen Sizes and Resolutions?

Think about it—what if your e-commerce site loads beautifully on a high-res desktop but crops product photos on a budget smartphone? Users bounce, and search engines notice. Here’s a quick list of why nailing designing for different screen resolutions boosts your web presence:

Better user experience: Content fits naturally, reducing frustration and scroll fatigue.
SEO advantages: Responsive designs rank higher in searches for “mobile-friendly websites,” drawing more traffic.
Wider reach: You cater to diverse audiences, from casual scrollers on social media to pros on big screens.
Future-proofing: As new devices emerge, your approach stays relevant without constant overhauls.

By starting with these basics, you’ll build layouts that feel intuitive and professional. Let’s break down the tools and tips to make it happen.

“Design for the screen in front of you, but test on every screen that matters—it’s the key to seamless viewing.”

Understanding Screen Resolutions: The Fundamentals

Ever stared at a website that looks perfect on your laptop but gets all squished on your phone? That’s the headache of not designing for different screen resolutions right from the start. In today’s world, where everyone bounces between devices, getting the basics of screen resolutions down is crucial. It goes beyond just mobile versus desktop—it’s about handling a wide range of screen sizes and resolutions that people use every day. Let’s break it down simply, so you can create designs that look sharp no matter what.

What Is Screen Resolution, Anyway?

Screen resolution refers to the number of pixels that make up your display—think of it as the grid of tiny dots that form images and text. For example, a resolution like 1920x1080 means 1920 pixels wide and 1080 pixels tall, creating a full HD view. Aspect ratio comes into play here too; it’s the proportion of width to height, like 16:9 for most modern screens, which keeps things looking balanced across devices.

But don’t mix this up with screen size, which is just the physical dimensions, say 15 inches diagonally. Resolution tells you clarity, not how big the screen feels in your hand. I remember tweaking a site where ignoring aspect ratios made buttons stretch weirdly on wide monitors—lesson learned the hard way.

Screen Size, Resolution, and Density: Key Differences

Now, let’s clear up screen size versus resolution versus density, because they’re easy to confuse when designing for different screen resolutions. Screen size is straightforward: it’s the actual measurements of the device, like a 6-inch phone or a 27-inch monitor. Resolution, as we said, is the pixel count, which affects sharpness.

Density steps in with PPI (pixels per inch) or DPI (dots per inch)—basically, how packed those pixels are on the physical screen. A high-density screen, like on premium smartphones, crams more pixels into the same space for crisper images, while low-density ones might look a bit pixelated up close. Why does this matter? When you design for a wide range of screen sizes and resolutions, you need to account for density to avoid blurry graphics on high-end devices or oversized elements on budget ones. Tools like CSS media queries help adjust for this, scaling your designs smartly.

“Pixels aren’t just numbers—they’re the building blocks of how users see your world. Get them right, and your designs shine across every screen.”

Popular Resolutions in the Wild

Diving into popular resolutions, you’ll see everything from tiny mobile setups to massive desktops, and that’s what makes designing for different screen resolutions so exciting—and challenging. On the low end, think 320x480 pixels for older smartphones; it’s compact but still handles basic browsing. Jump to modern mobiles at 375x667 (like many iPhones) or 360x640 (common Androids), where over half of web traffic happens these days—people scrolling social feeds or shopping on the go.

Tablets often hit 768x1024 in portrait mode, bridging mobile and desktop vibes. Laptops and desktops ramp it up: 1366x768 for standard notebooks, 1920x1080 for full HD, and ultra-wide 3440x1440 for those immersive setups. Then there’s 4K at 3840x2160, perfect for creative pros but overkill for casual use. Emerging devices like smartwatches might squeeze into 390x390 squares, while TVs push 4K or even 8K for home entertainment. Here’s a quick list of common ones to keep in mind:

Mobile: 320x480 (low-end) to 414x896 (flagship), aspect ratios around 9:16 for vertical scrolling.
Tablet: 768x1024 (portrait) or 1024x768 (landscape), often 4:3 ratios.
Laptop/Desktop: 1366x768 (budget) to 2560x1440 (high-res), with 16:9 dominating.
Ultra-Wide/4K: 3440x1440 or 3840x2160, for widescreen productivity.

Imagine a resolution chart mapping these out—vertical bars for mobiles stacking tall and narrow, horizontal spreads for desktops. Real-device examples bring it home: a budget phone at 480x800 might make your hero image feel cramped, while a 4K monitor turns it into a billboard. Testing on actual gadgets, not just simulators, reveals these quirks.

Why Device Categories Shape Your Design Choices

When you’re tackling a wide range of screen sizes and resolutions, grouping by device categories makes it manageable. Smartphones lead the pack—compact, touch-first, with resolutions favoring portrait views and quick gestures. Tablets offer more real estate, blending phone portability with laptop-like browsing at resolutions around 2048x1536 for high-end models.

Laptops vary wildly: entry-level at 1366x768 for everyday tasks, up to 4K touchscreens for designers needing precision. Desktops give you freedom, from dual-monitor 1920x1080 setups to curved ultra-wides at 5120x1440, ideal for multitasking. Don’t overlook emerging categories like wearables (think 300x300 for smartwatches, tiny but glanceable) or smart TVs (often 4K, but controlled by remotes, so big buttons rule).

We all know how frustrating it is when a site doesn’t adapt—text too small on a watch or menus overflowing on a TV. By understanding these fundamentals, you start designing for different screen resolutions with confidence, ensuring smooth experiences everywhere. It’s not about perfection on every device, but making sure nothing breaks the flow.

The Challenges of Multi-Resolution Design

Designing for different screen resolutions isn’t just about making a site look good on your phone or laptop—it’s tackling a wild mix of devices out there that can turn your careful layout into a mess. We all know how annoying it is when a website doesn’t fit right, whether it’s tiny text on a big screen or endless scrolling on a small one. This section dives into the real headaches of multi-resolution design, from tech glitches to user frustrations. By spotting these issues early, you can create smoother experiences across the wide range of screen sizes and resolutions people use every day. Let’s break it down step by step.

Fragmentation: Why Devices Don’t Play Nice

One of the biggest challenges in designing for different screen resolutions comes from fragmentation—the way operating systems and browsers handle things differently. Take iOS and Android, for example. On iOS devices, everything tends to scale smoothly with crisp edges, but Android’s variety means some phones render fonts bolder or shift layouts unexpectedly. Then there are browsers: Chrome might zoom images perfectly, while Safari on the same device could crop them oddly. Ever wondered why your site looks pixel-perfect in one browser but wonky in another? It’s this inconsistency that forces designers to test endlessly.

This fragmentation hits hard because users expect seamless performance no matter what they’re on. A site built for high-res desktops might load fine on a Mac, but switch to an older Android tablet, and suddenly buttons overlap. To handle this, start by using flexible units like percentages in your CSS instead of fixed pixels. That way, your designs adapt better to the chaos of varying OS behaviors and browser quirks in multi-resolution design.

User Experience Pitfalls Across Screen Sizes

When you’re designing for different screen resolutions, user experience can take a real hit if things don’t scale right. On high-res screens like 4K monitors, content often looks zoomed out and sparse, making users strain to read tiny details or hunt for navigation. Flip side, low-res devices struggle with heavy images, leading to slow loads that frustrate everyone—imagine waiting forever for a product page on a budget phone. Studies from sources like Statista highlight how these issues drive up bounce rates, with many users ditching sites that don’t feel right on their device.

These pitfalls aren’t just annoying; they hurt engagement. Picture a news site where articles reflow poorly on a tablet—readers might miss key info and leave quickly. Or e-commerce pages that zoom out hero images on big screens, diluting the impact. To fix this, prioritize responsive techniques that reflow content naturally. Ask yourself: Does this layout keep the flow intuitive on a wide range of screen sizes and resolutions? Getting it wrong means losing trust fast.

“Test on real devices early—it’s the only way to catch how your design behaves in the wild.”

Technical Hurdles in Multi-Resolution Design

Beyond the basics, technical challenges make designing for different screen resolutions a puzzle. CSS has its limits; media queries help adapt layouts, but they can’t always handle super-high DPI screens without extra tweaks like viewport meta tags. Image optimization is another beast—serving the same high-res file to a low-end phone wastes bandwidth and slows everything down. You need smart solutions like responsive images with srcset to deliver the right size automatically.

Testing scalability adds to the headache. Emulators are handy, but they don’t capture real-world variances like battery drain on mobiles or color shifts on curved screens. Without thorough checks, your site might break on edge cases, like foldable phones unfolding mid-scroll. I think the key is layering in tools for cross-device previews, but even then, it’s trial and error. Focus on lightweight code and progressive enhancement to build resilience into your multi-resolution design from the start.

Common Mistakes and Before-and-After Fixes

Designers often trip up on multi-resolution design with simple oversights that snowball. A classic mistake is using fixed-width elements, like a 1200px container that overflows on smaller screens. Before: Your homepage hero section spans the full width on desktop but gets cut off on mobile, hiding the call-to-action button. Users scroll confused, engagement drops.

After tweaking with fluid grids and media queries, that same section shrinks gracefully—text stacks, images resize, and everything stays accessible. Another pitfall: Ignoring touch targets on touchscreens. Before: Tiny links work fine with a mouse but frustrate finger taps on phones, leading to errors. After: Boost sizes to at least 44px and add padding, turning clunky interactions into smooth ones.

Here’s a quick list of common mistakes to dodge when tackling a wide range of screen sizes and resolutions:

Overloading with high-res assets: Heavy files bog down low-end devices—optimize early with compression tools.
Forgetting orientation changes: Designs that flop when a phone rotates from portrait to landscape lose users mid-session.
Skipping accessibility checks: High-contrast needs vary by screen; test with tools to ensure readability everywhere.
Relying on one test device: What works on your iPhone might fail on an Android budget model—diversify your testing.

By learning from these, you sidestep the traps and build sites that truly shine across devices. It’s all about balancing creativity with practicality in multi-resolution design.

Implementing Responsive Design Principles

Ever tried loading a website on your phone only to find the layout all squished and hard to read? That’s the frustration we’re avoiding when designing for different screen resolutions. Responsive design principles step in to make your site look great on everything from tiny smartphone screens to massive desktop monitors and even tablets in between. It’s about creating flexible layouts that adapt seamlessly, going beyond just mobile vs. desktop to handle the wide range of screen sizes and resolutions in use today. Let’s break it down so you can apply these ideas to your own projects without the headache.

Responsive vs. Adaptive vs. Mobile-First: Which Approach Fits Your Project?

When tackling designing for different screen resolutions, you have a few main strategies to choose from, each with its own strengths. Responsive design uses fluid elements that scale with the viewport, like percentages for widths instead of fixed pixels. It’s super versatile and future-proof, but can get complex for very image-heavy sites since everything adjusts on the fly. Pros include one codebase for all devices, saving development time, while the con is potential performance dips if not optimized well—use it when you want a single, adaptable site that works everywhere without separate versions.

Adaptive design, on the other hand, serves different fixed layouts based on screen size, often with multiple versions detected via user agent. It’s great for performance because you load exactly what’s needed for that device, leading to faster speeds on low-bandwidth connections. The downside? It requires more upfront work to create those variants, and updates mean tweaking several files. Go adaptive if your audience has diverse devices with varying capabilities, like in enterprise apps where speed trumps everything.

Then there’s mobile-first, where you design for the smallest screens first and progressively add complexity for larger ones. This approach prioritizes users on the go, which is huge since most traffic starts on mobile. Pros are better user experience and SEO perks from lighter initial loads, but it demands discipline to avoid bloating the desktop version with mobile-only code. I recommend mobile-first for most modern sites—it’s a game-changer for handling the wide range of screen sizes and resolutions in use today, especially if you’re starting a new project from scratch.

Essential Techniques: Media Queries, Grids, and Fluid Elements

Diving deeper into responsive design principles, CSS media queries are your best friend for detecting screen widths and applying styles accordingly. For example, you might write @media (max-width: 600px) to adjust fonts or hide sidebars on small screens. They’re straightforward to implement and let you fine-tune for specific resolutions without overhauling your code.

Flexible grids take it further with tools like Flexbox for one-dimensional layouts or CSS Grid for two-dimensional ones. Flexbox shines for aligning items in a row or column that wraps naturally, perfect for navigation menus that reflow on narrower screens. CSS Grid handles complex page structures, like a hero section with overlapping elements that resize fluidly. Pair these with fluid typography using relative units like rem or vw—so text scales with the screen—and images via max-width: 100% to prevent overflow. These techniques ensure your designs adapt smoothly to different screen resolutions, keeping everything proportional and readable.

“Build for flexibility, and your site will bend without breaking across any screen.”

Fluid images also play a key role; use the srcset attribute in HTML to serve optimized versions based on device pixel ratio. This keeps file sizes down while maintaining quality, which ties right into better performance.

Step-by-Step: Setting Breakpoints and Testing Your Design

Ready to put responsive design principles into action? Start by planning your breakpoints—common ones include 768px for tablets, 1024px for small desktops, and 1200px for large ones. These aren’t set in stone; base them on your content’s needs rather than arbitrary numbers.

Here’s a simple step-by-step guide to implement and test:

Define your base styles: Write your default CSS assuming a mobile viewport, using mobile-first principles. Set body font to 1rem and use flexible units everywhere.
Add media queries for breakpoints: For tablets, add @media (min-width: 768px) { .container { max-width: 750px; display: flex; } }. Gradually enhance layouts for larger screens, like stacking columns into rows.
Incorporate grids: Apply CSS Grid with grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); to create responsive columns that adjust to screen width.
Make elements fluid: Set images to width: 100%; height: auto; and test typography scaling with font-size: clamp(1rem, 2.5vw, 1.5rem);.
Test thoroughly: Use Chrome DevTools by hitting F12, then toggle the device toolbar to simulate phones, tablets, and desktops. Resize the viewport live to catch issues, and check on real devices if possible. Tools like this make it easy to spot problems in different screen resolutions.

This process doesn’t take long once you get the hang of it, and it pays off big time.

One underrated perk of these responsive design principles? They boost SEO by improving load times—search engines love fast, mobile-friendly sites, which can lift your rankings for queries about screen sizes and resolutions. Lighter, adaptive pages mean users stick around longer, sending positive signals to algorithms. I’ve seen projects where optimizing for the wide range of screen sizes and resolutions in use today turned sluggish sites into SEO winners. Try tweaking one page with these steps, and you’ll notice the difference right away.

Advanced Techniques and Tools for Resolution Optimization

Ever tried loading a website on a massive 4K monitor only to see pixelated images that kill the vibe? That’s where advanced techniques for designing for different screen resolutions come in—they help you create sites that look sharp no matter the device. We’re talking beyond basic responsive tweaks to stuff like vector graphics and smart loading strategies that handle the wide range of screen sizes and resolutions in use today. I love how these methods make your designs future-proof, saving headaches down the line. Let’s break it down so you can apply them right away.

Embracing Vector Graphics and Resolution-Independent Design

Vector graphics, like SVGs, are a game-changer for resolution optimization. Unlike raster images that get blurry when scaled up, SVGs use math to draw shapes, so they stay crisp on everything from tiny phones to huge TVs. Think of them as infinite scalability—perfect for icons, logos, or even full illustrations in your designs. You can embed them directly in HTML, which keeps file sizes small and loads fast.

Progressive enhancement ties in nicely here. It means building a solid base that works on all devices, then layering on extras for higher resolutions. For instance, start with a simple layout that renders everywhere, then add high-res details like subtle gradients for 2K screens. This approach ensures your site doesn’t break on older browsers while delighting users on modern setups. Ever wondered why some sites feel so smooth across devices? It’s often this resolution-independent mindset at play, making designing for different screen resolutions feel effortless.

“Scale smart, not hard—let vectors handle the heavy lifting for pixel-perfect views every time.”

Essential Tools for Testing and Building Across Resolutions

No advanced setup is complete without the right tools to test and refine your work. Frameworks like Bootstrap or Tailwind CSS speed up the process by offering pre-built components that adapt to various screen sizes. Bootstrap’s grid system, for example, lets you define breakpoints for mobile, tablet, and desktop with just a few lines of code. Tailwind, on the other hand, uses utility classes for quick custom tweaks, so you can fine-tune for those quirky resolutions without starting from scratch.

For testing, platforms like BrowserStack let you preview your site on real devices and browsers, spotting issues like text overflow on high-DPI screens. It’s like having a virtual lab for the wide range of screen sizes and resolutions in use today. And don’t forget analytics—tools like Google Analytics can reveal device insights, showing you if most users are on 1080p laptops or 4K monitors. I always check these reports mid-project to prioritize fixes. Here’s a quick list of steps to get started:

Choose your framework: Pick Bootstrap for structured grids or Tailwind for flexible styling.
Set up testing: Use BrowserStack to simulate different resolutions and catch glitches early.
Analyze traffic: Dive into Google Analytics to understand your audience’s screen preferences.
Iterate quickly: Adjust based on feedback, ensuring smooth performance everywhere.

These tools make resolution optimization less guesswork and more science, helping you build sites that users actually enjoy.

Boosting Performance for Seamless Multi-Resolution Experiences

Performance is key when designing for different screen resolutions—slow loads on high-res devices can tank user trust. Lazy loading is one technique I swear by: it delays loading images or videos until they’re needed, like when a user scrolls to them. This keeps initial page speeds blazing, especially on mobile with lower bandwidth. Pair it with WebP formats, which compress images better than JPEGs without losing quality, so your site handles 2K+ resolutions without bloating file sizes.

For mobile-heavy traffic, consider AMP (Accelerated Mobile Pages). It strips down code to essentials, making pages load almost instantly on small screens. Imagine an e-commerce site where product images pop up sharp and quick— that’s the edge you get. These methods not only optimize for the wide range of screen sizes and resolutions in use today but also boost SEO, as faster sites rank higher. Start small: swap one image set to WebP and enable lazy loading; you’ll see the difference in load times right away.

Mini Case Studies: E-Commerce Success with High-Res Handling

Let’s look at how e-commerce sites nail resolution optimization for better conversions. Take a typical online store revamping for 2K+ screens—they switched to SVGs for product icons and used responsive grids to ensure zoomable images fit perfectly. The result? Shoppers could inspect details without pixelation, leading to fewer abandoned carts as users felt confident in their buys.

In another scenario, a fashion retailer implemented progressive enhancement with lazy-loaded WebP hero images. On desktops, high-res versions loaded for immersive views, while mobiles got lighter ones. Analytics showed a spike in time spent on pages, translating to higher add-to-cart rates. These tweaks addressed the challenges of diverse resolutions head-on, turning potential frustrations into smooth shopping flows. It’s inspiring to see how focusing on resolution-independent design pays off in real engagement. If you’re building an e-comm site, try auditing your images first—it could be the quick win you need.

Best Practices, Case Studies, and Future-Proofing

When it comes to designing for different screen resolutions, best practices aren’t just nice-to-haves—they’re what keep your sites usable and loved across the board. You want to go beyond basic responsive tweaks and build in habits that handle the wide range of screen sizes and resolutions in use today. Let’s break it down with some straightforward checklists that make the process less overwhelming. I always start here because they turn guesswork into a reliable routine.

Essential Checklists for Multi-Resolution Design

First off, accessibility is non-negotiable. Think about WCAG guidelines—they’re your roadmap for ensuring designs work well on various resolutions without leaving anyone behind. For instance, aim for at least 16px text on low-res screens to avoid squinting, and use relative units like ems or rems so elements scale smoothly. Here’s a quick checklist to weave into your workflow:

Accessibility Audit: Test contrast ratios (at least 4.5:1) on high-DPI displays where colors pop differently. Scale navigation menus to fit small screens without overlapping, and enable keyboard navigation that doesn’t glitch on tablets.
A/B Testing Steps: Create two versions of a key page—one optimized for 1080p desktops, another for 720p mobiles. Run tests via tools like Google Optimize to measure bounce rates. Swap elements like image sizes and track which boosts conversions by comparing user sessions.
Cross-Device Audits: Emulate resolutions from 320px (budget phones) to 3840px (4K TVs) using browser dev tools. Check load times—aim under 3 seconds everywhere—and fix overflows or hidden content. Repeat weekly during development to catch issues early.

These checklists save headaches later. Ever tested a site on an old tablet only to find buttons too tiny? That’s the kind of pitfall they prevent, making your designs inclusive and efficient.

In-Depth Case Studies: Lessons from Responsive Redesigns

Seeing real redesigns in action shows how designing for different screen resolutions pays off big time. Take a major news outlet that revamped its site a few years back. They shifted from fixed layouts to fully fluid ones, prioritizing the wide range of screen sizes and resolutions in use today. Before, desktop users got crisp hero images, but mobile visitors faced cropped, blurry versions that spiked frustration. After the overhaul, they used media queries to serve vector graphics that adapted seamlessly—think SVGs for icons that stayed sharp on everything from smartwatches to ultrawides.

The results? Engagement jumped noticeably. Page views per session rose because users scrolled longer without zooming or pinching. Time on site increased too, as low-res devices in emerging markets loaded faster with optimized assets. Another example comes from an e-commerce platform facing similar woes. Their old design shone on laptops but faltered on foldable phones, where side panels vanished. By implementing flexible grids and conditional loading (high-res only on capable devices), they saw cart additions climb. It’s a reminder that thoughtful tweaks for varying resolutions can lift user satisfaction and keep folks coming back.

“Test early, test often—your designs will thank you when they work flawlessly on any screen.”

These stories highlight a key truth: redesigns aren’t one-and-done. They evolve with user feedback, proving that focusing on resolution diversity drives real metrics like retention and shares.

Emerging Trends and Future-Proofing Strategies

Looking ahead, future-proofing means staying ahead of the curve in designing for different screen resolutions. We’re talking 8K displays that demand ultra-high detail—your images and fonts need to handle pixel densities up to 300 PPI without bloating file sizes. Tools like CSS container queries are game-changers here, letting components resize based on their parent rather than the viewport, perfect for the wide range of screen sizes and resolutions in use today.

AI-assisted design is another trend shaking things up. Imagine software that auto-generates responsive variants by analyzing device data— it suggests tweaks for low-light OLED screens or high-refresh-rate monitors, speeding up your process. And don’t overlook sustainable practices, especially for low-res devices in developing markets. Optimize with lightweight formats like AVIF to cut data usage by up to 50%, reducing energy drain on older hardware. This not only helps the planet but also broadens your audience in areas with spotty connections.

To wrap this up strong, start incorporating these into your next project. For hands-on help, grab our free downloadable checklist template—it includes a resolution audit spreadsheet and A/B testing planner. Just plug in your site’s details, and you’ll be set to create designs that stand the test of time.

Conclusion

Designing for different screen resolutions isn’t just a technical checkbox—it’s about creating experiences that feel right no matter where users are scrolling. We’ve gone beyond the usual mobile vs. desktop debate to tackle the wide range of screen sizes and resolutions in use today, from tiny smartwatches to massive ultrawides. By focusing on responsive principles, you ensure your designs adapt smoothly, keeping frustration at bay and engagement high. I think that’s the real win: sites that look sharp and work well everywhere.

Key Takeaways for Responsive Success

To wrap things up, here are some essentials to carry forward in your projects:

Prioritize fluid layouts: Use media queries and flexible grids to handle varying resolutions without breaking a sweat.
Optimize images and assets: Go for formats like WebP with srcset to serve the right file sizes, boosting load times across devices.
Test early and often: Simulate the wide range of screen sizes and resolutions in use today using browser dev tools or emulators—it’s a game-changer for spotting issues fast.
Think user-first: Always ask, “How does this feel on a phone versus a 4K monitor?” That mindset turns good designs into great ones.

Ever noticed how a poorly adapted site makes you bounce right away? That’s what we’re avoiding here. Implementing these steps means your work stands out in a crowded digital world, where users expect seamless flow.

“Great design meets users where they are, not where you want them to be.” – A timeless reminder for any creator.

As you head into your next project, start small: audit one page for resolution compatibility and tweak as needed. You’ll see how it elevates everything. Keep experimenting, and watch your designs thrive across every screen.

A Guide to Designing for Different Screen Resolutions