HTML5: With Great Templates Comes Great Responsivity(verekia.com)
verekia.com
HTML5: With Great Templates Comes Great Responsivity
http://verekia.com/initializr/responsive-template
32 comments
When developing Javascript-enabled interfaces, developers need to worry about older or incompatible browsers, paranoid users with JS disabled and crawlers. Therefore, depending on the browser's capabilities, it makes sense to enable/disable certain features and have the interface still work.
To do this, there are 2 approaches for development:
- progressive enhancements, in which you start from a purely static interface (or the least common denominator you can start from) and progressively add more and more advanced features
- graceful degradation, in which you start from the featurefull interface and gradually disable features / make fixes to have the interface still work
"progressive enhancements" is not a buzzword as the 2 approaches mentioned above WILL yield different results. Interfaces developed with progressive enhancements will tend to be featurefull on the common denominator, while interfaces developed with graceful degradation will tend to be very rich (GMail style), but barely usable on browsers with not enough capabilities and less accessible by classic crawlers.
To do this, there are 2 approaches for development:
- progressive enhancements, in which you start from a purely static interface (or the least common denominator you can start from) and progressively add more and more advanced features
- graceful degradation, in which you start from the featurefull interface and gradually disable features / make fixes to have the interface still work
"progressive enhancements" is not a buzzword as the 2 approaches mentioned above WILL yield different results. Interfaces developed with progressive enhancements will tend to be featurefull on the common denominator, while interfaces developed with graceful degradation will tend to be very rich (GMail style), but barely usable on browsers with not enough capabilities and less accessible by classic crawlers.
Yes, I know "progressive enhancement" is an actual term. I thought it was interesting to hear it coupled with "mobile-first" and "media queries" as it sounded like a bunch of buzzwords.
"media queries" is a new CSS feature with which you can now have "progressive enhancements" (otherwise you would have to drop to Javascript), the advice being that you should start first designing for mobiles, then gradually evolving it into a full wide desktop view.
No buzzwords. It's actually pretty neat.
No buzzwords. It's actually pretty neat.
It's funny. I lobbied for years and years to designers to use fluid layouts (percentages instead of hard coded numbers). I have been met with a lot of condescending resistance. Fluid is bad because fixed layouts are good and I didn't know anything because I wasn't a web designer. The arguments didn't matter at all. The way it was done it was the way to do it, period.
Years passed by and now everyone is doing it, which is great.
Years passed by and now everyone is doing it, which is great.
The landscape has changed considerably since olden days though. "Fluid" layouts of old were no use from a designers point of view because the designer was trying to consider the measure (words per line) as well as the layout, and the variance of screen size and resolution wasn't great enough to justify the work load in creating a truly useful (from a design point of view) fluid layout. We didn't have media queries and JavaScript was something that programmers told us we should never use, but all that has changed and the field of screen sizes has exploded in many directions (physical size, pixel size, pixel density...) meaning it's now appropriate/essential.
In short the environment has changed, weak ideas are now strong ideas, and the design approach has evolved.
In short the environment has changed, weak ideas are now strong ideas, and the design approach has evolved.
I remember some guy from Twitter saying that percentage-based layouts are not good, especially with nested columns. Some problems with math, I guess?
I believe you were wrong then, and you are wrong now, despite "everybody doing it".
"Fluid layout" is a half-arsed solution to re-use the same design/markup everywhere, instead of sweating the details for particular classes of devices/screens.
"Fluid layout" is a half-arsed solution to re-use the same design/markup everywhere, instead of sweating the details for particular classes of devices/screens.
"It's funny. I lobbied for years and years ... and now everyone is doing it, which is great."
Welcome to the club. I was slicing bread back when everyone else was still stuffing entire loaves into their mouths. Bitterness suits us. :(
Welcome to the club. I was slicing bread back when everyone else was still stuffing entire loaves into their mouths. Bitterness suits us. :(
Is anyone else have the opinion that Responsive Web Design is a fad?
It seems that you are better served if you design your mobile site in the style of an App, and your website the traditional 960px grid. Tablets handle the desktop site okay for the most part.
It seems that you are better served if you design your mobile site in the style of an App, and your website the traditional 960px grid. Tablets handle the desktop site okay for the most part.
I hope it's not a fad!
I'm not at all a fan of sites that look like mobile apps. I want the web on my phone, period. Responsive design gives me the full website with the same information architecture, with the bonus of a more mobile-friendly layout.
I'm using it for all my web design work (well, as much as clients will allow me), and I hope everyone else will, too!
I'm not at all a fan of sites that look like mobile apps. I want the web on my phone, period. Responsive design gives me the full website with the same information architecture, with the bonus of a more mobile-friendly layout.
I'm using it for all my web design work (well, as much as clients will allow me), and I hope everyone else will, too!
I used responsive design for my resume site (shameless plug): http://judy.github.com
It's not perfect, but I wanted to make sure that potential employers could at least read my site anywhere, even on mobile browsers. And I think that's more important. For content-based sites, more designers are moving past pixel-perfect designs, and more on flexible designs that don't necessarily look identical everywhere. They look GOOD in any environment, including odd browser sizes. It's more pragmatic.
If your website is actually an internet app, then I would prefer a native app for mobile OR the app designed for the mobile browsers, like you said.
It's not perfect, but I wanted to make sure that potential employers could at least read my site anywhere, even on mobile browsers. And I think that's more important. For content-based sites, more designers are moving past pixel-perfect designs, and more on flexible designs that don't necessarily look identical everywhere. They look GOOD in any environment, including odd browser sizes. It's more pragmatic.
If your website is actually an internet app, then I would prefer a native app for mobile OR the app designed for the mobile browsers, like you said.
I think it's a fad. I'm a big fan of it though and I don't think there's anything wrong with fads in design -- designers don't want to keep doing the same stuff over and over again (I presume).
Maybe you're a busy designer and don't have time (or desire) to always experiment with new techniques. If all of a sudden your industry peers getting excited about something, it's like a signal that says it's okay for you to try this out. I'm not sure if it's a "make efficient use of my time" heuristic about what you should devote your attention to, or a "nobody ever got fired for buying IBM" safe bet thing. Probably a little of both.
Maybe you're a busy designer and don't have time (or desire) to always experiment with new techniques. If all of a sudden your industry peers getting excited about something, it's like a signal that says it's okay for you to try this out. I'm not sure if it's a "make efficient use of my time" heuristic about what you should devote your attention to, or a "nobody ever got fired for buying IBM" safe bet thing. Probably a little of both.
This is true, and I'm actually curious enough to want to build a Responsive Design website.
But the problem with fads is that they go out of style, so if in two years this whole phenomenon blows over, we are stuck with a large responsive website that we sunk all that time and money into and it just looks dated.
But the problem with fads is that they go out of style, so if in two years this whole phenomenon blows over, we are stuck with a large responsive website that we sunk all that time and money into and it just looks dated.
It doesnt matter if its responsive or not, any design will look dated after a while.
I don't think that responsive web design is a fad. No way. I don't want to download an app for every website that is out there. I want to simply visit the same sites that I do on my desktop and receive the same content in a way that is pleasant to view on the device that I'm using.
This isn't a Web 2.0-like design style that comes and goes. I'm sure the techniques will evolve in time but I can't see us ever going back to fixed width layouts.
This isn't a Web 2.0-like design style that comes and goes. I'm sure the techniques will evolve in time but I can't see us ever going back to fixed width layouts.
Thanks for everyone's thoughtful responses.
I'm researching Responsive Web Design as an option for a large e-commerce site. But for me, for a large site with a lot of dynamic content and functionality, it doesn't seem ideal to simply shrink it down to one column.
And I also wonder about the amount of time it takes to create designs taking all screen sizes into consideration.
Anyways, thanks again.
I'm researching Responsive Web Design as an option for a large e-commerce site. But for me, for a large site with a lot of dynamic content and functionality, it doesn't seem ideal to simply shrink it down to one column.
And I also wonder about the amount of time it takes to create designs taking all screen sizes into consideration.
Anyways, thanks again.
There are frameworks like Skeleton and Zurb's Foundation that handle the media queries and resizing/restyling for you, you just have to use their markup. And what they do out of the box is pretty much enough unless you want to hand-tweak a style down the road.
Also, responsive design doesn't have to be about getting your website to work on your 2001 Nokia brick's display. A good first step in responsive design is just to take advantage of the full width of the device your user is using up until a point. A lot of websites I view from my netbook could take advantage of just one media query: a full-sized design for large screens and then a fluid width design for anything smaller. I find a lot of websites give me a horizontal scrollbar on the 10' screen.
Also, responsive design doesn't have to be about getting your website to work on your 2001 Nokia brick's display. A good first step in responsive design is just to take advantage of the full width of the device your user is using up until a point. A lot of websites I view from my netbook could take advantage of just one media query: a full-sized design for large screens and then a fluid width design for anything smaller. I find a lot of websites give me a horizontal scrollbar on the 10' screen.
You don't need to take "all" screen sizes into consideration. Just choose a few breaking points roughly equivalent to desktop, tablet and phone screens. This combined with fluid designs will let you to accommodate most of the variations quite well.
You can do much more than just changing the column numbers or width, you can alter any styles.
I think it's a tool that shouldn't be applied to every project. Obviously someone like Amazon wouldn't (and shouldn't) be able to use the same template for both their mobile and desktop sites, but smaller sites most definitely benefit from keeping everything together.
> It seems that you are better served if you design your mobile site in the style of an App
I think this is true but it is also much more expensive to do. So to answer your question no I dont think it is a fad but is good at bridging the gap between the two.
I think this is true but it is also much more expensive to do. So to answer your question no I dont think it is a fad but is good at bridging the gap between the two.
I enjoyed reading this. I've been using www.getskeleton.com for an ecommerce project that will be launching early feb.
I decided to use a responsive template as we want as many people as possible to be able to see the content and buy the products. Responsive templates were the quickest way to achieve this.
There were still a few difficult problems to overcome, like how to represent long category navigation on mobiles and in an ideal world we would have a mobile specific version of the site which would better allow us to solve such problems.
However for now, responsive templates seem to have really worked for us.
EDIT: also the client loves it that there site 'works' on a range of devices without having to incur the costs associated with 'mobile specific' versions or 'apps'
I decided to use a responsive template as we want as many people as possible to be able to see the content and buy the products. Responsive templates were the quickest way to achieve this.
There were still a few difficult problems to overcome, like how to represent long category navigation on mobiles and in an ideal world we would have a mobile specific version of the site which would better allow us to solve such problems.
However for now, responsive templates seem to have really worked for us.
EDIT: also the client loves it that there site 'works' on a range of devices without having to incur the costs associated with 'mobile specific' versions or 'apps'
As a dedicated Android supporter, I wonder when the Android webview system will be decent enough to actually work with that design pattern, because the premise is good. Shake a xoom a little and the css loses track whether it's in portrait or landscape.
I switched to Galaxy Nexus (from iPhone 3GS), where I ended up using Web apps over native apps. This is not only because the native apps tend to install costly background services that keep the phone awake, or because their Java UI without exception consumes more battery than their WebKit based equivalent, but also due to the really crappy user interface the native apps provide. The biggest trouble is with scrolling, which is jittery. I did not know about Android WebView, let's hope that native apps will start to use it for more fluid web interfaces, which, coming from Java myself, I'd say will also be easier to make (based on proper templates and libraries, e.g. Bootstrap, Modernizr, etc.).
Well, from purely an app developer's point of view, the situation with Webviews on Android is completely opposite to the one you describe! WebViews are power hogs and unbearably slow to render anything. Their only saving grace in that respect is that they share a common WebViewCore thread to perform most of the legwork behind the scenes, so you can have plenty of these with relatively low overhead, but they truly are to be avoided at all costs if your objective as a developer is low battery consumption and a responsive/fast UI.
The main problem with most android apps is that they still include a tiny WebView just for displaying ads, carrying with it its dreadful WebViewCore Rube Goldberg machine.
I find it sad that Android App developers in general are so poor that they can't figure out a way to make their apps run faster or smoother. Native is and always has been the way to go for performance, responsiveness, UI speed and power saving on those devices.
Here's to hoping that the Android team solves the horrible performance and compatibility issues on their Webview component so I can safely go back on my words in the future.
The main problem with most android apps is that they still include a tiny WebView just for displaying ads, carrying with it its dreadful WebViewCore Rube Goldberg machine.
I find it sad that Android App developers in general are so poor that they can't figure out a way to make their apps run faster or smoother. Native is and always has been the way to go for performance, responsiveness, UI speed and power saving on those devices.
Here's to hoping that the Android team solves the horrible performance and compatibility issues on their Webview component so I can safely go back on my words in the future.
Fantastic stuff. I have found responsive design forces me to think as carefully about a button on my large-monitor designs as it does on my mobile-designs. It is a wonderful process of cut-this, cut-that until you have something simple.
I was playing around with a redesign of my car blog over the weekend with responsive design with a vertical rhythm (http://rockyroadblog.herokuapp.com/) I like the post's approach to navigation and didn't know about the 'aside' element previously. If anyone's interested, I can post the source files for my redesign on github.
[deleted]
It looks strange when they talk about the responsive layout on a site that takes about 1/6th of my screen width... pretty much a thin stripe in the centre.
Would you find it easier to read if the characters per line increased dramatically just to fit your screen?
No. Font size, kerning, multiple columns, etc. are all better alternatives.
I wouldn't mention it on any other page. It's just that this article is about responsive page design. But it's not responsive itself. The post itself mentions: "Use a big font size and an adapted line height (this template uses 16px / 24px)." and "To design a responsive layout, we have to forget about the usual static 960px width layouts"
I wouldn't mention it on any other page. It's just that this article is about responsive page design. But it's not responsive itself. The post itself mentions: "Use a big font size and an adapted line height (this template uses 16px / 24px)." and "To design a responsive layout, we have to forget about the usual static 960px width layouts"
Does anyone else feel like there are lots of buzzwords in HTML articles? For instance,
"The mobile-first approach is the equivalent of progressive enhancement for media-queries."
sounds like it came straight out of the board room. It makes sense when you parse it, but I feel like it needs a "synergize" or two.