Responsive Web Designd3hfxfzthphw0g.cloudfront.net/sbuploads/download/file/46/...When you want to...

Responsive Web DesignDiscover, Consider, Decide

Q. What is Responsive Design?

A. Responsive design is a general mindset where you are designing a website, but you are not assuming any details in terms of screen size or device size or interface options. Instead, you’re just going to assume that anything’s possible and implement rules and make choices.

For example, if the screen is desktop-sized like above, you’ll show a full navigation menu (above)

But if the screen is tablet-sized you’ll narrow it

If it’s a reader you’ll display this... And for an iPhone, this.

Responsive Web Design. Discover, Consider, Decide

© Sourcebits, Inc. 2012 2

When you want to reach a wide user base, responsive design is key.

If you think of applying rules instead of coming up with one design, you end up with a flexible product that is device independent, and which works seamlessly whether people are accessing the interface from a desktop, tablet or phone.

This becomes especially important in today’s market, which is flooded with a wide variety of devices of various sizes and resolutions.


© Sourcebits Technologies 2012 3

The Core Elements of Responsive DesignResponsive Design can take many shapes and forms, but behind any site designed with responsive designs you’ll find a set of core principles.

Q. What are the core elements that run through all responsive sites?

A. From a design point of view, the core elements are fluid and flexible grids and dynamic content. This means that what you view on a tablet may not be the same as what you view on the desktop, since the hierarchy of information changes as the device changes. For example, what’s most important to view on a mobile phone may be different from a desktop view of the same design.

Grids are used with CSS to help implement the rules that drive how your site looks and works at different sizes. If you build things to a grid and if the browser is wide enough, they might line up horizontally. But as the browser gets smaller, the fact that you’re using a grid makes it easy for the browser to understand how to break up and redisplay

portions of the website. For example, you may display elements in a more vertical format on a phone, where a sidebar could move below the main content. The advantage to responsive design is that you can do this with the same HTML/CSS code that drives the display in a desktop browser.

You’ll also want to account for different screen sizes with images, which you will often reduce for smaller screens. You don’t want to increase the size of images, because that will make them pixilated. But you can gracefully reduce the size of web images, and browsers do a pretty good job of rastering the smaller size without pixilation. You do a lot of these with media queries, which is the third element of responsive design.

There’s a lot that can be done in Javascript as well, but the lighter and cleaner way of doing things nowadays is to use CSS3 media queries to define rules based on screen widths.



The Three Core Elements of Responsive Design

1. Fluid and Flexible Grids

2. Dynamic Content

3. CSS3 Media Queries to Define Rules Based on Screen Widths

Q. Why is it important for organizations building mobile applications to understand Responsive Design?A. Responsive design is a very forward-thinking answer to todays multi-device compatibility question. Even if it is not the entire solution to your compatibility needs, it’s bound to be useful in some capacity.

Since we are in a continuously changing market with multiple devices coming out every few months, responsive or adaptive design is the most economical way to approach the web medium.

A typical responsive page at tablet size. Note the narrow left menu nav that opens up on hover for full menu access.

It’s an important option in your choices of how to approach a website. If you choose to ignore it and you make a website just for desktop view, then you’re going to be looking back and realize that it doesn’t look good on tablets, and it’s completely useless on a phone. Suddenly you’re scrambling to make a phone version, and a tablet version.

With Responsive Design you’re going to end up spending just 20-30% more to create the same products that would have cost 200% more.



What are the Advantages of Responsive?A. The main advantage is accessibility from virtually all platforms. So right out of the box, your website is going to be accessible to the most possible users.

It also makes it easier to keep the content and the data and the way everything is displayed as coherent as possible from device to device because it is one product. It’s one place to update things and just one place to maintain. Responsive makes everything be a lot more consistent.

It’s also better for search engine optimization. Having one product, one web address, and one web page for one set of content means that page will have the most possible views given its importance. Whereas if you have a mobile version, a tablet version, and a desktop version, those views will be divided among those different web pages and Google will see it as less credible because each individual page has less views.

If you know you want to support all these devices, then responsive design is the best way to approach it, and will significantly cut your costs versus making multiple products for each device.

Another advantage is that since the same content is used across platforms, it makes it easier to have cross platform consistency. A lot of effort is saved which would have otherwise gone into ensuring that every interface syncs well with each other visually, in terms of user experience, and content-wise.

Similar content across platforms also forces all the stakeholders involved to be very disciplined about what should go into the web experience and what should be left out.



Four Key Advantages to Using Responsive Design:

1. Accessibility from virtually all platforms, from desktop to mobile

2. One place to update and one place to maintain content across devices

3. Better SEO. One product, web address, and web page means that page will have more views

4. Much easier to achieve cross-platform brand and content consistency

Who Is Using Responsive Design?A. People who make websites and are forward thinking are already using it. When it’s 20%-30% more upfront effort and works on everything, there’s no reason not to.

Sony USA--Full Three Column Desktop-Sized Screen

Sony Tablet-Sized Screen (left) Note the layout goes from three column to two column in this version, but the most important core content stays the same.

Sony Phone-Sized Screen (right). Note the layout goes from two columns down to one column. The X headphones and the Alpha camera sale, the two most important page elements on the desktop site, are still visible and accessible.



Q. What Are The Cost Differences With Responsive Design? Responsive is all about doing it once and doing it right in the long term. One product to build, one testing round, and one product to maintain means that maintenance, production, and development will cost less over time.

Q. What’s the incremental cost to develop a responsive site versus a traditional site?

A. A responsive website is going to take about 20-50% more effort and upfront cost than making a non-responsive website. It tends to average around 30%, and is based on the difficulty as well as how much changes from size to size.

Q. Are there ongoing cost savings in terms of updating content and keeping site maintained?

A. Absolutely. Having one product means one thing to maintain, and one place to make changes. It’s more efficient, and much less expensive.

Q. How do you test a responsive site versus a native app and what time/cost savings are involved there?

It’s not really a fair comparison. With responsive web design, you’re designing for everything, so it will be significantly more cost and time to test than a native app. But to get a fair total comparison you to consider whether you’re testing a single responsive website, or building and testing a company website, an iOS app, and an Android app? A responsive website fills all of these roles in one swoop.

While it is more effort to test a responsive site, in the long term it’s going to be less costly and much more efficient.



Q. What are the Disadvantages?

A. The disadvantages are pretty finite. On a mobile device, you have much less processing power and RAM allocated to a single web page within a browser than you do for a native app. So you have to think of responsive design for mobile like an app within an app—which means you’re limited in terms of how much performance you can get out of it.

If your app is info-driven, and doesn’t need much performance, it’s a good candidate for a web app.

For for most games, or any app that needs a lot of performance, a web app is not going to be a good choice, and you’ll want to consider a native app instead.

A big disadvantage with a web app, if you don’t have an internet connection, you’re not going to be able to access the web page.

On top of that, it will use more of your data. Even if you do have an internet connection, it is constantly downloading the app over and over again, where with a native app, it’s saved on your device and it will only access the internet when it needs to.



Q. How Discoverable is a Responsive Mobile Site?A. Websites are highly discoverable, assuming you’re

looking in the right place. It’s more discoverable if it’s something that someone might search for in Google. It’s less discoverable if it’s something that someone might assume would be in the app store.

If it’s just discoverability that you’re thinking about, then it makes most sense to make a native app and couple it with an informational website about that app, and then you get the best of both worlds. But it all depends on what type of app you’re making.

While discoverability can be important, you shouldn’t let it fully inform which platform is best for your app.

Q. Can users access a responsive site from an app icon like they would with a native app?

Yes, it is very easy to do, but unfortunately, it’s not incredibly intuitive to users quite yet. Within a couple of years it will be more obvious and probably used more often.

On an iPhone, all you would do is click the share button and add it to the home screen. That takes the icon that’s attributed to the website and it makes it an icon on your home screen.

Clicking that icon will open the web app directly. And it also gives the developer more options in terms of customizing the web app. For instance, you have more control over when the URL bar is visible when the user is accessing your web app from an icon on their screen versus navigating to it within Safari. So yes, it’s definitely possible.



Summary

Responsive web design has a number of advantages over traditional web design, but it also has disadvantages, particularly when being considered as an exclusive replacement for a resource-hungry mobile application.

If you’re building a new website or and information-driven mobile app it’s an important option to consider.



Key Advantages to Using Responsive Design:

1. Accessibility from virtually all platforms, from desktop to mobile

2. One place to update and one place to maintain content across devices

3. Better SEO. One product, web address, and web page means that page will have more views

4. Lower overall cost than developing separate web sites and native applications

Key Disadvantages to Using Responsive Design:

1. Not appropriate for resource-hungry applications

2. Higher initial testing costs versus traditional web

3. Not discoverable in traditional app stores

4. Won’t work when internet is unavailable, and uses more mobile data resources than a native app

To Learn More:

Call Sourcebits: 415-288-3697Visit: sourcebits.com/contact

http://www.sourcebits.com/contact

http://www.sourcebits.com/contact

Responsive Web Designd3hfxfzthphw0g.cloudfront.net/sbuploads/download/file/46/...When you want to...

Documents

Transcript of Responsive Web Designd3hfxfzthphw0g.cloudfront.net/sbuploads/download/file/46/...When you want to...