
HTML5: With Great Templates Comes Great Responsivity - jverrecchia
http://verekia.com/initializr/responsive-template
======
ceol
Great beginner article on "responsive web design". I found the walkthrough to
be very friendly.

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.

~~~
bad_user
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.

~~~
ceol
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.

~~~
bad_user
"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.

------
4ad
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.

~~~
earnubs
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.

------
duhoang
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.

~~~
duhoang
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.

~~~
danneu
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.

------
chunkyslink
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'

------
babebridou
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.

~~~
ypcx
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.).

~~~
babebridou
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.

------
richardburton
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.

------
jollyjerry
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.

------
viraptor
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.

~~~
danneu
Would you find it easier to read if the characters per line increased
dramatically just to fit your screen?

~~~
viraptor
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"

