Curious article and its sequel.

Curious article and its sequel.

 

Hhmm... interesting read. Each to their own.

All the points in that article ive thought about before, I still think there is more value in creating responsive sites.

 

No doubt they take longer, but with enough practice the time it takes on each site drops dramatically. In regards to performance, that's often down to how it's developed and hosted more than anything, here's a great article that features a performance test.

Nice!

It's quite interesting that they discuss on a Wordpress blog that a responsive site takes more cost and effort.

Responsive themes are available for wordpress, why should it be a big deal to use them?

Not sure I agree, we had a client who saw ~35% mobile traffic. We made his site responsive and bounce rates dropped across the board. We've seen similar elsewhere.

 

Also "It Costs More And Takes Longer" - again a bit of a fallacy.

 

We've created our own in-house 'boilerplate' and yes that took time, but now we can turn out responsive websites quicker than starting a fresh. In fact the work that used to take 5 days now takes just 3.

 

Ok if you have to create every site from scratch it wouldn't be as cost-effective as 'static', but why would you?

Additionally it's a lot easier to apply responsive design to a rebuild/redesign, why? Because you have the user visit metrics to balance against design requirements. If you see a large proportion of mobile visits it make sense to tailor the site to suit i.e going responsive.

Nice article!

I don't agree with it, they are just stuck in their old ways and don't like change. Unfortunately for them this industry is never static.

 

It really is not hard nor does it take much more time to create a responsive website - I now actually find it easier this way having gotten used to it. Users of mobiles and other devices will continue to rise so why on earth would you not create your websites with this future trend in mind? Why compromise and give a large proportion of your visitors a sub par experience. They should work in print media and not web design if they want all sizes to be fixed.

I think the mentality is different when viewing a site on a mobile, I know from my experience more I'm more focused on what I want and less patient especially if I have to scroll about and pinch and zoom to skip the content I don't want and find the content I do.

 

This article assumes a mobile user is behaving the same and wants from the experience as they would if viewing from a desktop.

 

In practice I bought an app to better view a website I frequent because their website is not responsive.

I read this one and a similar one several months ago. I think a lot of articles like this are just sensationally controversal for the sake of it (and to incite traffic. )

 

From personal experience as a mobile user (I used to read lots of articles on the way to work everyday on the train.), there is no question that responsive design offers a better user experience. If someone wants to justify why they don't want to learn something new that's fine but once learnt, responsive design is really not much more difficult.

 

I still spend less time working on media queries and the like than I did writing conditional stylesheets for i.e.

Hmmm... I smell a troll... Or perhaps the folly of youth. I was reading their article on a mobile and the constant swiping left to right to read it was indeed annoying. Enough said.

 

In 2014, more people will be using mobile devices to access the internet than desktop PCs.

 

Mein Gott! Could that really be true??

 

In 2014, more people will be using mobile devices to access the internet than desktop PCs.

 

I'd be surprised if that was accurate, but do believe that's the way things are going.

Edited June 6, 201313 yr by 4li4s

Ok I'm going to go on a bit of a rant here because I find this to be absolute bullcrap.

 

It Defeats User Expectation

Mobile experience is a lot different to desktop/laptop experience for a reason - it's mobile and small screen and users have known this for a long time. It's just like app vs desktop experience, no-one expects the Facebook app to be exactly the same layout as it's desktop browser counterpart just because you're view it on a mobile. A lot of users will be expecting an app-like experience for any mobile sites that they visit. So the problem isn't moving elements about, it's actually the lack of key indicators that show where these elements are. That's argument against bad design decisions, not an argument against responsive design.

 

 

It Costs More and Takes Longer

This is just ridiculous accountant spiel and way of thinking. "All the things" meme instantly comes to mind - "CUT COSTS OF ALL THE THINGS". So he says "how much of a return on your investment is a responsive design going to offer you?" well, if you take a look at the attached screen shot of the article on my mobile, this tells me they don't take their website serious enough to cater for my needs as a user. They've just lost me as a potential customer.

 

 

Non-Responsive Designs Usually Work

No, just no! Because a website fits within a mobile screen does not mean it will work. Users don't want to be faffing about zooming their screen just to be able to read text and get the information they want. It needs to be clear enough that the user isn't squinting and scrolling pages of text just to read on Wikipedia that Johnny Cash was 71 when he died; so we present it in a read-able text size like we do on the desktop, not to mention hide elements for this need.

 

 

There is Often No Load Time Benefit

The example and reasoning that is given is bulls**t. Responsive design doesn't just stop at mobile, it extends over to desktop as well. This is why we have media queries for different resolutions. And lazyload fits right in with the idea that the website is responding to the user, regardless of device. It caters for that and speed increase, providing a benefit for the user.

 

Not to mention people, including myself, have worked to create network detection scripts (I know it's a plug, but it's to prove a point) to allow for speed increases by responding to the users limitations.

 

 

It's a Compromise

There are no compromises when it comes to design, it's never done for our own self gratification (unless it's personal work) but for the user and always done with usability and experience in mind. He even backtracks on his 3rd point by saying "decision by the designer that the desktop display will not be optimal on mobile devices" first he says desktop designs work, now he's telling us he knows they're not optimal. Which one is it fella?

 

</rant>

Edited June 6, 201313 yr by Ampersandwich

Couldn't have put it better Ampersandwich!

 

The nonsense about responsive design not having any load time benefits - well it could be partially true if poorly designed, like shifting elements off screen or display:none for smaller screens. Absolutely not true if we are being smart and ajaxing in any additional content for larger screens.

People said the same thing during the period when tables where being used less and less. Look where we are now.

 

The fact is in 5 - 10 years who knows what devices will have access to the internet. Hopefully my oven will, I hate waiting for stuff to cook.

The nonsense about responsive design not having any load time benefits - well it could be partially true if poorly designed, like shifting elements off screen or display:none for smaller screens. Absolutely not true if we are being smart and ajaxing in any additional content for larger screens.

Oh I completely agree, but it's still not a valid argument against Responsive Design in my opinion, as that is down to bad practice rather than the whole idea itself. It's a very weak argument that they put forward in all honesty. However, if they put the whole article forward as being about bad practices within responsive design and wrote it accordingly, then I would more than likely agree with many of their points. Unfortunately that wasn't the case.

 

But from what I understand, that's something we agree on anyway.

Oh I completely agree, but it's still not a valid argument against Responsive Design in my opinion, as that is down to bad practice rather than the whole idea itself. It's a very weak argument that they put forward in all honesty. However, if they put the whole article forward as being about bad practices within responsive design and wrote it accordingly, then I would more than likely agree with many of their points. Unfortunately that wasn't the case.

 

But from what I understand, that's something we agree on anyway.

 

Yes I agree totally. I don't see static designs as a viable option for new projects. Why would it be with the ever increasing array of screen sizes available to the consumer.

My response:

1 - It Defeats User Expectation

It might not be what they expected, but so long as the experience FEELS the same, users won't be disappointed.

His main problem he outlines is when things aren't where he expects them to be (such as navigation links) - well, that's not because it's a responsive site, that's because it's been poorly designed!

 

2 - It Costs More and Takes Longer

So do all good things.

 

3 - Non-Responsive Designs Usually Work

He's using an iPhone, one of the best phones on the market, what about those on cheaper devices with a different OS, they often don't work as well, PLUS, they usually require the user to click more - zoom in on content, zoom out again to find the navigation, zoom in again because you can't click the right link in a list (you keep clicking the one above or below), which is a bad user experience.

 

4 - There is Often No Load Time Benefit

So? There isn't a time disadvantage, it's usually the same. So?

 

5 - It's a Compromise

A compromise of what? What's the ideality? And if that ideality is not obtainable, is a compromise not better than the non-ideal original?

 

Penguin.

 

EDIT:

This interests me:

 

Couldn't have put it better Ampersandwich!

 

The nonsense about responsive design not having any load time benefits - well it could be partially true if poorly designed, like shifting elements off screen or display:none for smaller screens. Absolutely not true if we are being smart and ajaxing in any additional content for larger screens.

I've been doing web design for years (HTML + CSS) just for fun, not as a profession, I learnt Javascript and jQuery in January with the intention of doing a little Web Design work, I've not used Ajax before, and wasn't planning on learning it, but, this post has made me think about it. Does anyone have a link to an article about using Ajax in responsive design?

If I found it necessary, I would use display:none, though, off the top of my head, I can't remember a time I've done that, I aim to simply restyle the content depending on the width of the window, rather than actually hiding or replacing any content.

Thanks,

Penguin.

Edited June 13, 201313 yr by JD.CoolPenguin

I think there's a big hype behind it. It's better in my humble opinion but I don't know if it's as necessary as it's made out. Mobiles automatically resize most websites to a perfect size. We still have a major problem with image size.

Find it very awkward to figure out sizes, as my navbar images etc look great on one size, but the social buttons get scaled down and are tiny ,

 

Just an amateurs opinion.

I'm only a user (for now) but i dislike responsive themes too? I blocked my user agent in desktop mode, if i need to zoon in i'll zoom in otherwise i want to see the complete graphic of the website then i agree with the articles' creator

Edited June 15, 201313 yr by Washa

Dumb question - can I safely assume that "responsive" web design and mobile redirects are completely different? If they are, then that begs the question: by todays standards, are mobile redirects still good enough for simple small business brochure sites? Just curious.

@precise Framework

 

I think there's a big hype behind it. It's better in my humble opinion but I don't know if it's as necessary as it's made out. Mobiles automatically resize most websites to a perfect size. We still have a major problem with image size.

Find it very awkward to figure out sizes, as my navbar images etc look great on one size, but the social buttons get scaled down and are tiny ,

 

Just an amateurs opinion.

 

If social icons are becoming too small then there is a high probability your design is suboptimal.

 

Have you tried setting them to display:inline-block so when the screen gets narrow they tile down? or using media querys for a similar effect?

 

if they are tiled down then the social icon can span the full width of your screen if you so desired (but not the best idea if you value screen real estate )

Thanks Rob, the problem is they scale down. I'm using addthis and they are a fixed size, which works well on desktop, but poor when viewing on my iphone; they're too small.

Thanks Rob, the problem is they scale down. I'm using addthis and they are a fixed size, which works well on desktop, but poor when viewing on my iphone; they're too small.

You probably shouldn't use AddThis, it leaks page rank.

 

Also, are your social buttons a percentage width? It sounds like you might just need to give them a 'min-width' value (if that's the case).

Thanks Ampersandwich. I've set a min width and it hasn't made much difference. I think it's the pixels of the phone being so close together.

I'm only an amateur and have spent weeks on the buttons so can't really change now, though appreciate your input on seo.

I'm not sure exactly what addthis is: Some kind of framework I imagine?

 

I always set a global css rule for all images and that is:

img {
  max-width: 100% !important;
  height: auto !important;
}

So the images will auto scale and never break out of their parent container.

 

If they are getting to small on mobile then their parent containers are too small so this is where your problem will lie and not with your images. If it's an icon font I put them inside a span tag which I give a specific size and set it to display as an inline block with a specified width. (No need to scale these as they are already sufficiently small i.e. on a mobile 40px is adequate)

 

<span class="social-icon">
  <i class="icon-facebook"></i>
</span>
<span class="social-icon">
  <i class="icon-twitter"></i>
</span>

...

.social-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: blue;
  margin: 2px 5px;
}
.social-icon i {
  line-height: 40px;
  font-size: 1.5rem;
  color: white;
}

Above is the code I used on a site I built for a client. I added the extra bits of code in to give a round border and the icon to site inside the circle background centralized. The principle I explained though works if you check out the link below and resize the screen just before it breaks down to single column layout you will see the icons begin to tile down as the module becomes too small for them to span.

 

I think you just have to treat each element on a page as it's own entity, some should scale by % and others should just tile or change layout via breakpoints. It depends entirely on that particular design and what gives the best user experience. I don't want clickable things to get too small on mobile as a lot of us have fat fingers

 

Link to example

http://www.legionpaintingstudio.com/

Thanks Rob, I've set a min-height on my social-wrapper and a min width to the social buttons.

 

Apologies guys, I think the problem is that the buttons are too small. You can get away with it on a desktop, but on a mobile it's impossible.

I don't know where addthis grabs the actual images for the buttons for so I can't change the buttons.

 

I'm just starting to try to learn Javascript through CodeAcademy and finding it both enjoyable and extremely frustrating lol.

 

That website looks awesome by the way.

Edited June 18, 201313 yr by Precise Formwork

It's max width you want in this instance

 

Min-width won't stop the image getting so large that it breaks it's container.. the clue is in the name of the property