May 28, 2014 | Sarah Danks


I saw a Tweet the other morning that made me have one of those “duh…but aha!” moments.

Screen Shot 2014-05-22 at 9.02.53 AM

Obviously it goes without saying that responsive web design is something everyone should be doing. Hell, it’s not even THAT — you can be designing with responsive techniques and STILL not doing it right. I mean, after all, just because your website “works” on all devices, it still matters what your responsive layout looks like. I’d venture a guess that a lot of webmasters out there using RWD aren’t “doing it correctly.”

That being said, at least the ones designing with responsive are doing it at all. First things first, right?

People are on-the-go these days. Not only are they making purchasing decisions on their mobile devices (and then buying with those very same devices), they’re going to have to check their bank accounts before (or, depending on their compulsiveness, after) making online purchases.

Well, I’m gonna put this out there right now: like @SarahQWillis said, banks should DEFINITELY be using responsive web design. Alas, sadly they’re not (well, the ones she and I are talking about, anyway).

Take my bank, for example: TCF. I’ve been banking with them ever since I moved down here to the Twin Cities in 2002 (I was a Bremer customer but “back then” Bremer wasn’t available here in Minneapolis/St. Paul; hence the switch). I’m not promoting TCF — although I’ve never had an issue and am happy with their services — nor am I ripping on them; just showing their lack of knowledge about their online customers. Just a little bit.

See, tcfbank.com isn’t responsive. And, from having worked on a few bank/credit union sites, I KNOW that those types of institutions receive a TON of mobile traffic. So, I’d think it would be IMPERATIVE for bank websites to be designed with RWD. Let’s check out TCF’s site on the desktop:

tcf bank desktop view

Nice. I like it. Of course, I’m used to seeing it.


But, what does it look like on a phone? Well, if you want to simply re-size your browser, you can see whether or not this design is responsive:

tcf bank site resized on desktop to phone size vertical

Obviously it’s not. Responsive, that is. Don’t believe me? Try it in your own browser. You can tell by how the design elements AREN’T shifting to fit themselves into the changing browser window that it’s not a responsive site.

But, okay, you don’t like that I simply resized a desktop browser to “simulate” what  this site would look like on a phone?

While that is a perfectly viable way to determine (for any lay person) whether or not a  site is built responsively, I’ll humor you, go ahead and open up this website on my  iPhone 5, take a screenshot and give you the real deal.

(On a site note: There are a lot of websites that’ll simulate what other sites look like on all devices. Here are a few we’ve found that we like: responsivedesignsimulator.com, responsive.is & responsimulator.com. There are also apps for this, too.)

Ok, so here’s the snapshot from my actual phone:

tcf bank iphone 5 vertical view

See? Not responsive.

Wait, isn’t this a responsive web  design, because obviously it “works” and looks fine on my  phone?

And, hang on, I said earlier all one needed to do to determine whether a website is responsive is resize my browser. But why is this actual  phone  view different than when I  resized my desktop browser?

Well, my phone is “shrinking” the desktop design to fit onto its screen.

This is why it can be a bit confusing to know whether a site is responsive. In this case, the old test (“if it looks like a duck, swims like a duck and quacks like a duck, then it’s probably a duck”) isn’t gonna work. Also, this is why big sites like these banks are getting away with NOT using responsive web design (yet). Because at first glance it APPEARS they’re responsive.

But, again, that’s not responsive web design — that’s just manipulating the existing design to shrink to “viewable size” on a phone. If it were truly responsive, the entire look would be different — i.e., you wouldn’t have to expand the screen with your fingers in order to see/read/use the navigation, etc. I don’t know about YOUR fingers, but mine don’t do well trying to press those itty-bitty buttons.


Let’s look at another example: Wells Fargo. Not my bank — but my husband has banked with them for a long time. Again, neither promoting nor picking on; just pointing out the facts (ma’am).

Here’s what their site looks like on a desktop:

wells fargo desktop view

Again, nice.

But, this is how it “supposedly” looks on a smartphone (again, by  resizing our browser)

wells fargo site resized in browser to phone vertical view

Sooooo…not responsive. BUT, what’s it look like on an actual phone?

Well, here’s a screenshot of the Wells Fargo site on my iPhone 5:

2014-05-22 09.24.27

What? Once again, this doesn’t look the same as it did when I resized my desktop browser…

…in fact, it looks NOTHING like the desktop version.

It does,though, look mobile-friendly. Well, if this site isn’t responsive, who cares, right? At least it looks great and is usable on desktop and phones. Way to go, Wells Fargo!

But, of course, once again, this site isn’t responsive. Does it work on a smartphon? Yes. But there’s a disconnect between the desktop-to-tablet…see, since Wells Fargo’s site isn’t responsive, you don’t get the same “optimized” experience on a tablet as you do on a desktop or smartphone.

The bottom line is it’s better to cater to ALL of your online audiences when possible.


Okay, fine. So let’s move on to a bank who SEEMS to be doing everything correctly (again, with the Duck Test): US Bank. I have no affiliation with this bank — I don’t even know anyone who uses it.

But let’s just cut to the chase and skip their desktop view — I’m HOPING we can all agree that at least all banks have THAT part of web user optimization figured out.

So here’s US Bank’s tablet view:

us bank site on ipad

Nicely done! Looks very user-friendly on a tablet.

And now, the (i)phone view:

us bank on iphone

Again, looks great! Responsive?

Well, it MUST be, since the design seems to be optimized for both tablets and smartphones…

But, it’s not. Again, try resizing it on your desktop browser. Hey, US Bank is trying to optimize for all their users, at least. Of course, someone who’s banking while at work and needs a smaller browser on their desktop is SOL, but how often do you REALLY resize your browser? Don’t you just open it and it pops up full-screen? Exactly.

Seriously, though, banks — and ALL websites — should be using responsive web design. But, if they’re still resistant to doing what the here-and-now (and future) demands, at least have the wherewithal to try to cater to mobile devices separately (i.e., coding that tells the website “You are being viewed on a mobile device”) and hope no other types or sizes of tablets and phones comes out.

 

 

PSSSSSST: with responsive it doesn’t matter if a brand-new device came out tomorrow; your website should in theory still look great AND be user-friendly on it, since the coding is based on readjusting the elements within based on screen resolution.


Categories


Archives


Subscribe To Our Newsletter

Our newsletter includes industry news, tips, and upcoming events!