All Posts in responsive design

April 21, 2014 - No Comments!

Fluid Typography with VW Units: XI to Eye

XI to Eye - VWSince the launch of the first responsive website we have had fluid grids and images, but our typography has been static. That is, until recently. The rise of support from the browser vendors for viewport units of measurement has changed that and we can now build sites where the type adjusts to the size of the screen. With a little bit of planning and a dash of sass, we can control our fluid type through all of our breakpoints and ensure a proper text line length across all variants of our design. In this edition of XI to Eye I'll give you an introduction to vw units and how we're using them.

Read more

August 8, 2013 - 1 comment.

Infographic: Mobile App vs. Responsive Website

Earlier this spring, we wrote an article about the 10 questions to ask when choosing between a responsive website or a native mobile app for your business. It's question a lot of people are asking these days, so we decided to turn it into a helpful infographic, which VentureBeat featured on its site last week.

Use the chart below to help you decide whether your company needs a responsive website or a native mobile app.

Mobile App vs Responsive Design

Special thanks to Kenton Quatman his infographic design.

June 27, 2013 - No Comments!

Selling in a Responsive Design

If there's one thing that's sure to drive you batty in a responsive layout it's working with third party ad services. Not everyone can afford their own ad sales team or has the resources to support their own ad network, and because of this, they turn to services such as Google DFP. Those services are easy to implement and enable an instant revenue stream. They also don't work well in fluid width layouts.

We ran into this wall the weekend before the launch of the new Roger Ebert website. We were implementing a new ad network that did not play nicely with our fluid width columns. Not having the time to fully implement and test an entire new layout for the site, we had to think quickly. Here's what we did...

The HTML

Our ads were all 300 pixels wide and existed in the same column. This column was one of two columns in its parent container. On the parent container, we put a class of fixed-rail. Inside the container we added a class of pad to our main content and place to our ad rail. The HTML looked like this...

<section class="fixed-rail">
    <section class="main pad">
        ... Insert main content here ...
    </section>
    <aside class="place">
        ... Insert ad rail content here ...
    </aside>    
</section>

The CSS

Easy enough, right? The magic is the CSS. We're already using border-box box-sizing, so we set our pad column to width: 100%;. We then give it right padding of 330px (300 pixels for our ad-rail and 30px as the universal gutter width setting in our SASS files). We then position the placecolumn absolutely to the upper right corner. Instant fixed width right rail and fluid width content column.

$gutter-width: 30px;

.fixed-rail {
    position: relative;
}

.pad {
    width: 100%;
    padding: 300px + $gutter-width;
}

.place {
    width: 300px;
    position: absolute;
    top: 0;
    right: 0;
}

We Got This...

Looks great, right? One problem. There were some cases where the ad rail was taller than the content column. Since it was positioned absolutely, the layout would collapse. Uh-oh. The solution? We inserted a quick bit of JS to calculate the height of the place column and added that as a minimum height on its sibling pad column.

$('.place').each(function(){
    var forceHeight = $(this).height() + 'px';
    var sibling = $(this).siblings('.pad');
    $(sibling).css({'min-height': forceHeight});
});

Honestly, I don't know how this solution will hold up over time, but it seems to have been doing just fine in practice so far. If you've got some thoughts on this, let's chat.

May 29, 2013 - No Comments!

Mobile App vs. Responsive Design: Ask These 10 Questions First

“Do I need a responsive website or a native mobile app for my business?”

We’re getting this question a lot these days.

Let’s back up. For those unfamiliar, “responsive design” refers to a design approach aimed at providing optimal viewing, reading, and navigation experiences on any size device, from desktop computer to mobile phone. Mashable called 2013 the year of responsive web design. We couldn’t agree more.

Even if you have a mobile app, your website should use responsive design to ensure that anyone visiting your site via mobile phones and tablets will have a good user experience. After all, despite the fact that you may have a beautiful app, a segment of your target audience will still visit your website from their phone's browser. And remember, just because you have an app, it doesn't mean it will be downloaded and used. (Just ask the makers of the thousands of undownloaded “zombie” apps about the competition out there.)

ebert-casestudy2

Example of RogerEbert.com responsive design.

That said, there are times when having a mobile-optimized site and a native app makes great business sense. Wondering if this is you? Consider these 10 questions, which could help guide you to the answer.

1) Will your native mobile app take advantage of smart phone functionality?

Do you need to use the camera, GPS, scan feature, or other phone functions? If you intend to provide unique functionality or content not available on the mobile web, then an app is likely the way to go. When Sprout San Francisco came to us wanting to build a mobile app, we knew that we could provide a useful tool to soon-to-be parents by incorporating the scanning function into the app. This allows parents to easily create registries on-the-go straight from their phones, something they couldn’t do through a responsive design website.

Advantage: Native

uberapp2) Is personalization important?

One of the great features in a mobile app is the ability to craft personalized experiences for the device with fewer limitations. Since a native mobile application is always tied directly to a user’s device, it creates many more opportunities to target and craft the user experience. For example, within a native app a user can create and save a profile, which allows them to customize their interactions. UBER has an excellent native application which lets users scan and remember credit card details, making future purchases quick and simple.

Advantage: Native

3) Do you have complex design and UI?

At a certain level of complexity, HTML5 (responsive web) may not work to achieve your goals. HTML5 can indeed deliver customized user experiences, but native apps tend to provide the most tailored UX. Because responsive designs need to adapt to all possible environments, designers have to make compromises to find a solution that works in all scenarios, browsers, and screen sizes. Conversely, a native mobile application is a targeted experience and can take full advantage of the interaction expectations of the user and their device. Web apps still have a lot of room to grow (see forecast.io, for instance), and while they’ll eventually get close to native apps in feel and function, they can’t match them—yet.

Advantage: Native

4) Do you have a limited budget?

Generally speaking, responsive design is a less costly undertaking because it’s quicker to develop and deploy than native applications, typically requires fewer dedicated resources to bring an idea to market, and only needs one code base to ensure it works across all devices. That said, ideally, ROI justifies development costs. If mobile transactions and in-app purchases represent a significant portion of potential revenue, investing in app development could be the smart decision. But if you can’t afford the spend immediately, start with a responsive website and add the native app as part of a future iteration.

Advantage: Responsive

5) Are you trying to monetize content and encourage purchasing?

If you have a product that offers potential for ongoing micro-purchases, then a native application is the way to go. A shopping cart on your website can facilitate this, but the in-app purchasing system is so simple and tied into all the rest of a user’s purchases on the platform that it is second to none.

Advantage: Native

6) Is SEO an important consideration?

If part of your strategy is to increase visibility among search engines and drive traffic to your site, then stick with a responsive mobile website. Apps are closed environments and cannot be crawled by search engines—they won’t impact your organic search ranking.

Advantage: Responsive

7) Will you have difficulty getting App Store approval?

Apple asks developers to follow stringent guidelines when submitting to the App Store, and the approval process can take anywhere from a week to several months. There are certain areas that are regulated more strictly than others, such as in-app purchases and in-app subscriptions.

Moreover, other kinds of features easily achieved through HTML5 are banned in native iOS applications. For example, Apple regulations forbid iOS applications that take donations, a fairly commonplace transaction in responsive web designs. This is a serious drawback for nonprofits looking to reach potential customers and donors through mobile apps.

Advantage: Responsive

8) Are you sending and receiving massive amounts of data?   

An app will generally work faster than a responsive website since it doesn’t rely as heavily on Internet and network speed to serve up information. However, responsive websites may be closing the gap—a recent article in Ars Technica discusses the ways that developers are trying to "speed up the web" to compare with native speeds.

Advantage: Native (for now)

9) Do you plan to make frequent updates?

Native applications make frequent updates rather painful. First, application updates need to go through the same lengthy approval process in the App Store. Next, native applications require consumers to manually download the updates before they can be used. If you expect to have frequent design updates, a responsive design may be the simplest way to ensure your users are accessing the most recent version.

Advantage: Responsive

10)  Are you trying to create something that’s universally accessible?

If you want to appeal to everyone across multiple platforms and devices, responsive is the answer. It’s faster and easier to get your product in people’s hands, and it’s fairly straightforward to build a mobile-specific menu that gives mobile users what they need. Native apps, on the other hand, must be uniquely designed for Android, iOS, Blackberry Mobile, and Windows Phone 8, and present compatibility concerns for businesses that don't want to segment their user base.

Advantage: Responsive

So there you have it: 10 questions to help guide your decision-making process. Granted, these aren’t hard and fast rules, but thinking about these factors can get you started. Still stuck? Don’t hesitate to reach out with questions or comments. Email me at mark@tablexi.com. And if you do decide to build a native mobile app, make sure you’re familiar with the 5 mistakes to avoid when developing an app and the 5 things that annoy app users.

Special thanks to Table XI’s mobile development team for their contributions to this article: Ed Lafoy, Kate Garmey, Jon Buda, and Mike Gibson.