responsive web design vs mobile app development

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter: responsive website design.

What is responsive design?
—

Simply put, responsive web design (RWD) is an approach that allows design and code to respond to the size of a device's screen. Meaning it gives you the optimal viewing experience whether you're looking at a 4 inch android mobile, your iPad mini or a 40-inch cinema display.

Compare how our site looks when it's static vs the actualresponsive design:

responsive vs static website design comparison

The best responsive websites essentially utilize fluid grids, flexible images and CSS styling to alter the site's design and render it according to the width of the browser. For designers the ultimate goal should be to seamlessly tailor the UI and UX of a website design across different devices and platforms.

Why is responsive design so important?
—

If we designed and developed countless versions of a website that worked for every known device out there, the process just wouldn't be practical time-wise and would be extremely costly! It would also render sites ineffective to future technology changes and make them nearly impossible to maintain. Responsive design is an effective solution to future-proof your website.

A major key to responsive web design is knowing your audience and what device they're using to view your website. How much of your current traffic is desktop vs. tablet vs. mobile? Approximately 56 percent of traffic in US websites is now from mobile devices. Today there are around 2.6 billion smartphone users and by 2020 that's tipped to reach over 6 billion. Mobile design has never been more important.

It's critical to design your website for varying devices, but it get's more complicated when designing across varying web browsers. Each major web browser has it's own mobile version and renders sites differently. Where it gets even trickier is that there are many versions of browsers that need to be catered for—you can't expect everybody to be on the latest version. So it's important that the design works and responds to a variety of browser versions.

Freaking out about designing for the web? Don't worry, it's a constant battle for everyone in the industry to adapt design for all browser versions as well as hardware devices. The best answer is to simply test your site on as many devices new and old as possible. (And hire a super guru developer!)

What website dimensions should I design for?
—

There is no "standard website size." There are hundreds of devices out there, and model sizes and screen resolutions change all the time. And each individual website attracts users on different devices. For example, you're more likely to look at a recipe on your mobile device (when you're in the kitchen cooking), and more likely to search for a Photoshop tutorial on your desktop (you know, when you're trying to figure out how to do something in Photoshop).

You can find out what browsers and web page sizes are most popular for your site by looking at Google Analytics. So with endless combinations of browser sizes and devices, how on earth do you design responsively without losing your mind?

Try designing at least 3 layouts

—

A responsive website design should have at least 3 layouts for different browser widths. The specific numbers we cite are what we currently use at 99designs but are not hard-and-fast rules.

Small: under 600px. This is how content will look on most phones.

Medium: 600px – 900px. This is how content will look on most tablets, some large phones, and small netbook-type computers.

Large: over 900px. This is how content will look on most personal computers.

Each of these layouts should include the same text and graphical elements, but each should be designed to best display that content based on the user's device. Scaling down the page to fit on smaller screen sizes will make the content unreadable, but if you scale the content relative to one another and switch to 1 column it makes it much more readable.

Example of our logo design page in three different screen sizes for responsive website design.

Things to think about
—

User experience is key: responsive design needs to be more than converting a desktop site into a mobile screen. We need to consider the user's experience, their interaction and the essential content they're actually looking for while using a mobile device.

Don't design for the latest mobile device with a specific screen dimension. Instead, design your site around your content. How will the layout and elements work on desktop and how will those same elements adapt to each other on a mobile device?

interactive map example — design by Karol Ortyl

Engagement: the hierarchy of the layout is super important, especially on mobile. Often less is more! The mobile experience compared to desktop is much more focused with a limited amount space, so the way users read and move through your site needs to be really clear to get across your key message and understand what the site is all about. Also think about the main action of the page. If the key goal is to get people clicking a 'contact us' button then don't hide it down the page underneath slabs of text. Tailor your content and design around that experience.

Flexible images are really important to designing a responsive website. You need to think about how an image will scale. How will it look on a large desktop screen vs. a tablet vs. a small mobile screen? From a development perspective, the code will allow images to scale via a percentage value to the width of the browser window.

Navigation is important on mobile. There are several common methods for collating large menus and content. It could be in the familiar hamburger style menu, a simple dropdown selection, expand/collapse fields or you could use tabs that scroll horizontally like YouTube.

responsive design menu examples — designs by UI Garage

Gestures open up new possibilities for design. People love reading with their hands and interacting with the content—it empowers the user. On mobiles and tablets, users can pinch to zoom or slide images across the screen. Interaction greatly affects the design. For instance, if you have an image gallery try avoid using a standard carousel (small dots) to let people cycle through each image. Think about the size of a person's finger and how that translates into a useful UI solution. According to Apple: the comfortable minimum size of tappable UI elements is 44 x 44 px. This limit is often broken and the real estimate limit is around 25 px.Complex desktop designs need to be able to adapt to simple intuitive UI for a small mobile screen. Always keep this in mind when designing for different devices. The design has to be flexible so it creates a great experience across all devices for users. Working closely with a developer to understand what's possible on smaller screens will affect the design process.

Design at least 3 versions for different browser widths. We use under 600px, 600px-900px, 900px+. Between those widths, your content can scale freely or you can keep 3 fixed layouts. Having 3 (or more) fixed layouts and adding margins when necessary is usually easier to design and implement than fluid scaling. However, fluid scaling may provide better experience on a larger number of devices.

Tools and resources
—

Your web browser might seem like an obvious tool to use, but it's the most effective resource to preview your designs on the web. Install a few different browsers to get a good range of feedback. Then start resizing the browser windows.

Your mobile device is another obvious tool to use but really helpful to preview your designs on because it shows you exactly what your website will look like under those specific conditions.

Fluid grids are based on designing a website layout on percentage values instead of set pixels. For instance the width of content on a desktop screen could be 930px, but you want to target the design down to 320px on mobile. To convert this into a scalable figure, the result works out to be 320/930 = 34.4%. When you apply this to the mobile screen size the elements in the design layout will resize in relation to one another. We like the One% CSS Grid.

Design by Anton Aheichanka

Google's resizer is a good resource to quickly preview your site on multiple devices.

Media queries is a type of code that will get implemented into your site when it get's built. It's important to have in your code because it sets the conditions for the design to magically adapt to the size of the screen. Eg. "when the screen size is equal to 480px or less, change to tablet design layout". Try it out now by simply dragging your browser window smaller (if you're on a desktop). You'll see the content automatically resize to the varying design breakpoints of the screen.

Other resources to get you started:
- The ultimate responsive web design roundup,
- 12 column fluid css grid system
- Guidelines for RWD.

I'm sure by now you know everything about responsive design right?!

—

Don't worry, it's a universal design challenge for everyone in the web industry. Best thing you can do is to keep updated with the latest UI/UX best practices, design around your content, keep your images flexible, always consider your navigation and remember user experience is key.

What are your best responsive design tips?

—

Need a responsive website designed for your business?

Our global community of professional graphic designers can do that!