[스크랩] http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
The Concept Of Responsive Web Design
Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,”
for A List Apart. It stems from the notion of responsive architectural
design, whereby a room or space automatically adjusts to the number and
flow of people within it:
“Recently, an emergent discipline called “responsive architecture”
has begun asking how physical spaces can respond to the presence of
people passing through them. Through a combination of embedded robotics
and tensile materials, architects are experimenting with art
installations and wall structures that bend, flex, and expand as crowds
approach them. Motion sensors can be paired with climate control systems
to adjust a room’s temperature and ambient lighting as it fills with
people. Companies have already produced “smart glass technology” that
can automatically become opaque when a room’s occupants reach a certain
density threshold, giving them an additional layer of privacy.”
Transplant this discipline onto Web design, and we have a similar yet
whole new idea. Why should we create a custom Web design for each group
of users; after all, architects don’t design a building for each group
size and type that passes through it? Like responsive architecture, Web
design should automatically adjust. It shouldn’t require countless
custom-made solutions for each new category of users.
Obviously, we can’t use motion sensors and robotics to accomplish
this the way a building would. Responsive Web design requires a more
abstract way of thinking. However, some ideas are already being
practiced: fluid layouts, media queries and scripts that can reformat
Web pages and mark-up effortlessly (or automatically).
But responsive Web design is
not only about adjustable screen resolutions and automatically resizable images,
but rather about a whole new way of thinking about design. Let’s talk
about all of these features, plus additional ideas in the making.
Adjusting Screen Resolution
With more devices come varying screen resolutions, definitions and
orientations. New devices with new screen sizes are being developed
every day, and each of these devices may be able to handle variations in
size, functionality and even color. Some are in landscape, others in
portrait, still others even completely square. As we know from the
rising popularity of the iPhone, iPad and advanced smartphones, many new
devices are able to switch from portrait to landscape at the user’s
whim. How is one to design for these situations?
In addition to designing for both landscape and portrait (and
enabling those orientations to possibly switch in an instant upon page
load), we must consider the hundreds of different screen sizes. Yes, it
is possible to group them into major categories, design for each of
them, and make each design as flexible as necessary. But that can be
overwhelming, and who knows what the usage figures will be in five
years? Besides, many users do not maximize their browsers, which itself leaves far too much room for variety among screen sizes.
Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below are some of the most common:
Since then even more devices have come out. It’s obvious that we can’t keep creating custom solutions for each one. So, how do we deal with the situation?
Part of the Solution: Flexible Everything
A few years ago, when flexible layouts were almost a “luxury” for
websites, the only things that were flexible in a design were the layout
columns (structural elements) and the text. Images could easily break
layouts, and even flexible structural elements broke a layout’s form
when pushed enough. Flexible designs weren’t really that flexible; they
could give or take a few hundred pixels, but they often couldn’t adjust
from a large computer screen to a netbook.
Now we can make things more flexible. Images can be automatically
adjusted, and we have workarounds so that layouts never break (although
they may become squished and illegible in the process). While it’s not a
complete fix, the solution gives us far more options. It’s perfect for
devices that switch from portrait orientation to landscape in an instant
or for when users switch from a large computer screen to an iPad.
In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout:
The entire design is a lovely mix of fluid grids, fluid images
and smart mark-up where needed. Creating fluid grids is fairly common
practice, and there are a number of techniques for creating fluid
images:
For more information on creating fluid websites, be sure to look at
the book “Flexible Web Design: Creating Liquid and Elastic Layouts with
CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.”
In addition, Zoe provides the following extensive list of tutorials,
resources, inspiration and best practices on creating flexible grids and
layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”
While from a technical perspective this is all easily possible, it’s
not just about plugging these features in and being done. Look at the
logo in this design, for example:
If resized too small, the image would appear to be of low quality,
but keeping the name of the website visible and not cropping it off was
important. So, the image is divided into two: one (of the illustration)
set as a background, to be cropped and to maintain its size, and the
other (of the name) resized proportionally.
1 |
<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1> |
Above, the h1 element holds the illustration as a background, and the image is aligned according to the container’s background (the heading).
This is just one example of the kind of thinking that makes
responsive Web design truly effective. But even with smart fixes like
this, a layout can become too narrow or short to look right. In the logo
example above (although it works), the ideal situation would be to not
crop half of the illustration or to keep the logo from being so small
that it becomes illegible and “floats” up.
Filament Group’s Responsive Images
This technique, presented by the Filament Group, takes this issue
into consideration and not only resizes images proportionately, but
shrinks image resolution on smaller devices, so very large images don’t
waste space unnecessarily on small screens. Check out the demo page here.
This technique requires a few files, all of which are available on Github. First, a JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif).
Then, we can use just a bit of HTML to reference both the larger and
smaller resolution images: first, the small image, with an .r prefix to clarify that it should be responsive, and then a reference to the bigger image using data-fullsrc.
1 |
<img src="smallRes.jpg" data-fullsrc="largeRes.jpg"> |
The data-fullsrc is a custom HTML5 attribute, defined in
the files linked to above. For any screen that is wider than 480
pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load.
The JavaScript file inserts a base element that allows the page to
separate responsive images from others and redirects them as necessary.
When the page loads, all files are rewritten to their original forms,
and only the large or small images are loaded as necessary. With other
techniques, all higher-resolution images would have had to be
downloaded, even if the larger versions would never be used.
Particularly for websites with a lot of images, this technique can be a
great saver of bandwidth and loading time.
This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers
(iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and
still resize as one would expect of a responsive image, except that both
resolutions are downloaded together, so the end benefit of saving space
with this technique is void.
Stop iPhone Simulator Image Resizing
One nice thing about the iPhone and iPod Touch is that Web designs
automatically rescale to fit the tiny screen. A full-sized design,
unless specified otherwise, would just shrink proportionally for the
tiny browser, with no need for scrolling or a mobile version. Then, the
user could easily zoom in and out as necessary.
There was, however, one issue this simulator created. When responsive
Web design took off, many noticed that images were still changing
proportionally with the page even if they were specifically made for (or
could otherwise fit) the tiny screen. This in turn scaled down text and
other elements.
(Image: Think Vitamin | Website referenced: 8 Faces)
Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s <head> section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below:
1 |
<meta name="viewport" content="width=device-width; initial-scale=1.0"> |
Setting the
initial-scale to
1 overrides
the default to resize images proportionally, while leaving them as is if
their width is the same as the device’s width (in either portrait or
lanscape mode). Apple’s documentation has a lot more information on the
viewport meta tag.
Touchscreens vs. Cursors
Touchscreens are becoming increasingly popular. Assuming that smaller
devices are more likely to be given touchscreen functionality is easy,
but don’t be so quick. Right now touchscreens are mainly on smaller
devices, but many laptops and desktops on the market also have
touchscreen capability. For example, the HP Touchsmart tm2t is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet.
Touchscreens obviously come with different design guidelines than
purely cursor-based interaction, and the two have different capabilities
as well. Fortunately, making a design work for both doesn’t take a lot
of effort. Touchscreens have no capability to display CSS hovers because
there is no cursor; once the user touches the screen, they click. So,
don’t rely on CSS hovers for link definition; they should be considered
an additional feature only for cursor-based devices.
Look at the article “
Designing for Touchscreen”
for more ideas. Many of the design suggestions in it are best for
touchscreens, but they would not necessarily impair cursor-based
usability either. For example, sub-navigation on the right side of the
page would be more user-friendly for touchscreen users, because most
people are right-handed; they would therefore not bump or brush the
navigation accidentally when holding the device in their left hand. This
would make no difference to cursor users, so we might as well follow
the touchscreen design guideline in this instance. Many more guidelines
of this kind can be drawn from touchscreen-based usability.
Conclusion
We are indeed entering a new age of Web design and development. Far
too many options are available now, and there will be far too many in
the future to continue adjusting and creating custom solutions for each
screen size, device and advancement in technology. We should rather
start a new era today: creating websites that are future-ready right
now. Understanding how to make a design responsive to the user doesn’t
require too much learning, and it can definitely be a lot less stressful
and more productive than learning how to design and code properly for
every single device available.
Responsive Web design and the techniques discussed above are not the final answer to the ever-changing mobile world. Responsive Web design is a mere concept that when implemented correctly can improve
the user experience, but not completely solve it for every user, device
and platform. We will need to constantly work with new devices,
resolutions and technologies to continually improve the user experience
as technology evolves in the coming years.
Besides saving us from frustration, responsive Web design is also
best for the user. Every custom solution makes for a better user
experience. With responsive Web design, we can create custom solutions
for a wider range of users, on a wider range of devices. A website can
be tailored as well for someone on an old laptop or device as it can for
the vast majority of people on the trendiest gadgets around, and
likewise as much for the few users who own the most advanced gadgets now
and in the years to come. Responsive Web design creates a great custom
experience for everyone. As Web designers, we all strive for that every
day on every project anyway, right?
Further Resources
SOME IDEAS SEEM inevitable once they arrive. It’s
impossible for me to conceive of the universe before rock and roll or to
envision Christmas without Mr Dickens’s Carol, and it’s as tough for my
kid to picture life before iPads. So too will the internet users and
designers who come after us find it hard to believe we once served web
content in boxy little hardwired layouts left over from the magical but
inflexible world of print.
" XX에 최적화라는 말은 YY 또는 ZZ에서는 문제가 발생할 수도 있다는 위험을 내포하고 있다. 모바일에 최적화된 웹사이트라는 말도 크게 다르지 않다. 더군다나 모바일 최적화라는 말을 아이폰 최적화, 또는 몇몇 단말기에 탑재된 안드로이드 브라우저 최적화라는 말로 사용하는 현실에서는 이런 위험성이 더 크다.
실제로 이렇게 작은 화면을 가진 휴대폰을 사용해 보면 우리가 보통 모바일에 '최적화'되었다고 얘기하는 많은 모바일 전용 페이지들이 말처럼 최적화되지 않았다는 것을 알 수 있다. 모바일이라는 환경은 우리가 생각하는 것 이상으로 다양하다. '최적화'라는 접근 방법으로는 그 다양성을 만족시킬 수 없다. "
" 그 시도들이 쌓여서 새로운 개념으로 재탄생하게 되었는데 바로 반응형 웹디자인(responsive web design)이라는 개념이다. 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우러져서 특정 환경에 '최적화'된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법이다. "
" '예산이 충분'하다면 아이폰용 사이트도 만들고 아이패드용 사이트도 만들고 갤럭시 탭용 사이트도 만들고 여러벌 만들 수 있는대로 만드는 것도 좋다. 하지만 이런 접근 방법은 만들어진 이후 유지 비용도 고려해야 하고 새로운 단말기가 나올 때 마다 기민하게 대응해야 하는 방법이라는 것을 유념해야 한다. 물론 할 수 있고 실제로 하는 기업도 있다. 하지만 대부분의 경우에는 이렇게 계속적인 투자를 하기가 쉽지 않을 것이다. "
실제 적용된 사이트 예. 60가지 by inspiration feed
가이카와사키_졸업축하문.pdf
