《响应式网页设计指南》读者调查：实战技巧与挑战

需积分: 0 100 浏览量更新于2024-07-18 收藏 23.05MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

The RWD Handbook

The perfect site

howcas

FeaturesProject

broad er i ssues, wh ile als o givi n g you new

tools to test out and explore.

CONTENT IS THE KINGDOM

At Blueca det (bluecadet . co m), th e digi tal

agenc y whe re I w ork, my c ol leagues a nd

I like to start at the very beginning: with

the content itsel f. We foc us t he re, be fore

any devices a nd their re lated assu mpt ion s

are even i n pl ay. It’s ha rd, mess y w ork ,

but how you conduct y ou r res earc h,

content str ategy a nd i n for m at ion

arc hitec t u r e s ets the st age for t he

steps to come.

We bsite proje c t s c a n often b e

derai le d by complex relationships

and dep endenc ies t h at e xtend pa st

the website you’re pla n n ing. Content

str ateg i st a nd A L i st Apar t e ditor-i n-

chief Sara Wachter-Boettcher (sarawb.

com) p oi nts out we’re not si mply dea l ing

wit h a website any mor e: “The problem

is th at we’ve moved f a r, fa r b e y ond the

idea of a website as a containe d, st atic

piece of a busi ness. The complexit y a nd

size and interconne c te d ness of most

org a n i s at ion s’ web foot pr i nt – sites,

apps, intra net s, web-based sy stem s

and so on – i s suc h t h at the web affe ct s

the j obs of eve ryone i n a n or ga n i s at i on.

The sy stems we desi g n ne e d more

ongoing management than ever before.”

Hav i ng t h i s i n mi nd when you conduct

your us er r esearc h a nd content strategy

wil l he lp you ident i fy p otential r i sk s

up-f r ont, while you’re sti ll de f in i ng the

scop e of the pr oje c t.

Content strateg y

W hen you’re e va luati ng content, ask

your s elf: Is t h i s content useful? Who

is this for? How often will it change?

Will it vary in format or length?

Deter mi ne how the content is going

to be produced. Does your client have

someone d e d ic ated to c r eat i ng a nd

maintaining content? Talk to them.

Ask t hem ho w the y work . You wa nt

to desig n a nd bu ild s omet h i ng that

they will be comfortable using, long

after you’re gone.

Author, editor and content strategi st

Nicole Fe nton (nicolefenton.com) e cho e d

th i s conce r n when I a sk e d her ab out

common pain points she’s encountered

Reading list There are plenty of great books

exploring content strategy techniques

LET CONTENT SHAPE

YOUR DESIGN

Web designer Stephen Hay

shares his insights on content

I can’t stress enough how important

it is, especially when doing web-based

design comps, to have real content as

early as possible in the design process.

It doesn’t have to be the actual copy

that will be used in the final result, but

it needs to be representative of the

content that is to come.

The idea is to know as much as you

can about the content, so you can avoid

surprises. In a recent project, when

the small number of navigation items

suddenly went from three to seven,

we had to rethink navigation entirely

– keeping it at the top of the page on

small screens, and placed horizontally

on wider screens was no longer a

feasible option. It’s a simple example,

but a lot of these little issues can be

avoided when you get content first.

Another advantage to having content

early is that you get to know the

‘shape’ of the content and can design

appropriately. Are there five buttons

in this app or 10? Are these things we

could use icons for, or are we using

text? These choices greatly impact

your UI, and you can only account for

them when you have content from

the very beginning.

Some people don’t like thinking

about content first, preferring that the

designer create a pretty container into

which they can pour their content. But

that’s decoration, not design. Knowing

your content is thinking before doing.

It’s a smart way to design, and it will

save everyone a lot of headaches.

The RWD Handbook

howcas

Features Project

The perfect site

meet i ng s for con s ensus-build i n g. Daily

design reviews. More pairing with

developer s – the y don’t ne cessa r ily nee d

to al w a y s sit toget he r, but they shou ld

have re gu l a r in-p er s on conta c t.”

Tan a l s o tal k e d ab out usi ng d iffer ent

modes of commun icat ion, depend i ng

on the situation: “There’s built-in

time in the process to make visual and

fu nc tion a l a djustments [once a dev h as

implemented a design]. But s omet imes

it’s easi er to m a k e t he twea ks mys e l f

and t hen s end a pu ll re quest.”

Th e flexi bil ity that Tan desc rib e s

can b e i ncre d i bly use fu l and liber ating

for a team. Somet imes it’s necess a ry to

meet w ith a teammate and work things

out togethe r, and somet i mes it’s be t ter

for someone to m ake t h e adjustment,

and t hen t he tea m c a n r egroup i f

necessary. E xami ne you r com mun ic ation

paths to s e e if t hey a r e to o r i g i d, or i f

wit h her cl i ents. She wr ote: “I s e e a lot

of compa n i es wa ste m one y on s oftw are

when the y h aven’t t a k en t h e t i me to

def i ne t he i r busi ness g oals, out l i ne

the i r ed itor i a l pr o c ess or t ra i n writers,

designe r s and engi ne er s.”

I’ve found that many design or

deve lopment problems ca n be t r ac e d

back to content problems that weren’t

properly resolved. On Bluecadet’s recent

proje c t f or L apham’s Quarterl y (see case

stud y, p age 19) we h ad to r est ruc t u r e

t w o content t yp es i n the CM S b e c ause

we mi si nter prete d how content authors

would a ss o ci ate contr i butors wit h t he i r

art ic l es. But bec aus e we got fe e dba c k

during ou r content str ategy ph as e,

we were able to redesign those content

typ es a nd a voi d costly r e f a ct or i n g l ater.

PL AN YOUR COMMUNICATION

Communicat ion w a s a not her k e y

topic th at ca me up rep eated l y. Almost

eve ry sin g le p er s on I sp oke to stress e d

the ne e d to est abl i sh go o d i nter n a l

communic at ion p atte r n s a nd r ein for ce

them as a team.

What do some of those patterns look

like? A l len Tan (tanmade.com), a designer

for T h e New York Time s, enumer ated

a few of t h e steps h i s tea m ha s t a k en

to improve c om mun ic at ion: “More

they introduce so much friction that

communication stops outright.

Client convers at ions

It’s cruc i al to est abl i sh c lea r

expectations and lines of communication

with your client. At the outset of new

Bluecad et proj e ct s, we t a k e t h e t i me to

expl icitl y st ate how we’r e goi ng to w ork

and what t he c lient ca n exp e c t i n terms

of communic at ion a nd a rte f ac t s.

Even if we’re working with a tech-savvy

or prest igious c lient, we don’t assume

they know ab out com mon ar te f a c ts a nd

prac t i ces. For each d elive r able, we ma k e

sure ou r c lient underst a nds wh at th at is,

and what it’s intended to a c h ieve i n ou r

design conversations. You’d be sur pris e d

at how often the pu r p os e of a d eli ver able

is misunderstood.

In addition to the

ty pe of deliverables, we also establish

the i r s c op e (‘for t h i s pr oje c t we wil l

produ ce two rou nd s of wi r efr a mes’).

We also like to clarif y what types of

client feedback are most useful during

our conver s at ion s.

Just as you wou ld do with y ou r

team, est abl i sh a hea lt hy rhyth m of

communication w ith your c l ient. The

more frequently they are involved,

the more you’re able to avoid surprises,

mi sund er st a nd i ng s a nd lost hou r s.

ES TABLISH A

HE ALTHY RH Y T HM

OF COMMUNICATION

WITH YOUR CLIENT

AND YOUR TEAM

It’s good to talk Communication platform Slack (slack.com) he lps Bluecadet keep its project teams tal king regularly

The RWD Handbook

The perfect site

howcas

FeaturesProject

I aske d d esi g ne r a nd aut hor Et h a n

Ma rc ot te how his w orkfl ow h a s c h a nge d

in t he y ea r s si nce his b ook Responsi ve Web

Design (netm.ag/RWD-264) wa s publ i she d,

and he repl i e d: “In my pract i ce, th e

imp or t a nce of PSDs and c omps has

be en lesseni ng. T hey’re sti l l inc re d i bly

valuable, but prototypes – e ven r oug h

ones – ar e b e comi ng mor e i mp or t a nt

to earl y d i sc ussi ons arou nd content,

desig n and fu nction a l ity.”

Ma rc otte als o p oi nted out how

protot ypes c a n help s et exp e c t at ion s

for your website as a c onti nuum of

experiences for dif ferent browsers

and devices: “I try to incorporate devices

as early as possible in design reviews.

It does a gr eat job of re i nforci ng t h at

there’s no canonical, ‘true’ version

of the desig n.”

A few desi gner s ha ve c r eated mo dul ar,

component-based del iver ables to repl ace

(or supplement) the fu ll-pag e comp.

Style Til es (st yletil .es) a nd E lement

Collages (netm.ag/collages-241) are

two notable ways of giving detailed

components (for example: a callout

bloc k , a n avi g at ion but ton, a headl i ne

and pa rag raph) enough conte xt s o

they can be evaluated.

Thes e approac hes fo c us the desig n

conversati on on the s y stem or element

Desig ne r, author and A RTIFAC T

conference founder Jenn i fer Robbins

(ar tifac tconf.com) t a lk e d ab out some

of the cl ient communication lessons

th at ca me out of th e l ast two yea r s

of A RT I FAC T: “I thi n k ther e’s a shift

towa rds more frequent communication

and more specific communication,

[especially] when you’re doing the

protot yping earl ie r on … a lot of t he

decisions that used to be made in a

row a r e no w b eing m ad e conc u r r ent ly

so it just requires a different speed of

communication. It just seems like more

touchpoints w ith the client.”

PROTOT YPES

Anot he r m ajor theme wa s t he emphasi s

on prototyping as an important tool.

leve l, as opp os e d to a st atic, fixed-

wi dth p age. T h i s c a n lend itse l f we l l to

the r esp on si v e con ve rsati on, b e c au s e

respon si ve sites ar e flu id, i n stead of

bei n g lo c k e d to a defi n it i ve siz e.

Even with t hese sy stems, however,

a client w il l often exp e c t to s e e a fu ll-

page comp, and you may h ave to d e c i de

whether your team is more comfortable

show ing t hem that v i a a st at ic comp or

through a prototy pe.

DESIGN MEET S DE VELOPMENT

On ma ny tea m s t he re’s a hard d i vi sion

betwe en desi g n a nd de ve lopment. It ’s

ti me to st a rt pu nc h i n g holes in t h at w a ll,

and get ti ng the tea ms to d a nce. T he fo c us

of your team should be on amplif ying

each ot her’s stren gt hs, a s opp os e d to

getting people to do ever y thing well.

At Bluecade t we often r u n st at ic desi g n

iterati on i n a par a lle l t r a c k wit h f r ontend

st yle gu i de development, pa i ri ng a

Style guides Sparkb ox has shar ed its s tyle prototype on Github: sp arkb ox .githu b. i o/style-p rotot ype

Modular design examples Style Tile (above , st yletil.es )

and Element Collage (opposite, from rif.superfriend.ly)

Under the hood Bl uecad et’s frontend style guide, including

a table of contents and sect i ons of rendered markup

IT’S TIME TO START

PUNCHING HOLE S

IN TH AT WAL L

BETWEEN DESIGNERS

AND DE VEL OPER S

The RWD Handbook

howcas

Features Project

The perfect site

designer w ith a developer. We usual l y

create t hes e style gu i des as a si n g le p age

di r e c tly i n the t a r get C M S of ou r c hoic e,

but we’ve al s o expe r i mented with to ols

such a s Pat tern L a b (p at ter nlab.io).

We r el y on qu ic k iter ati on in st at ic

comps to mak e su r e we’r e heade d i n

the r ig ht dire c tion, and t hen we test

thos e a ssumpt i ons in a resp on si ve

contex t usi n g a f r ontend st yle gu ide.

Th e style gu i de wi ll revea l li mitati ons

in t he desi g n, a nd we c a n d ecide whet he r

to iterate in Photoshop or just adjust

things di rectly in markup and CSS.

A bonus to this design pairing?

It demysti fies t he w ork on b oth si des.

Designer s c a n s e e ho w e d it i ng CSS

can c h a ng e styles a c r oss t he entire

site, and developer s ca n u nder st and

the sp e c if ic d e c i sion s b e h i nd a de sign.

SITE SE AWORTHINESS

One of the tricky things to do is to

bal a nce test i ng with de ve lopment,

espe c i a ll y i f y ou a r e bu i l d i n g you r

website using prog r essi ve en h a ncement.

This mea n s m aki n g de c i sion s ab out

whic h br o w se r s a nd devices r e ce i ve

a base li ne – but content-complete –

e xp er i ence, and wh ich get opti m i s e d

to ta k e ad va ntage of the l atest CSS3

and Jav aScript features.

Bluecadet was chosen to redesign

Lapham’s Quarterly (laphamsquarterly.

org), a magazine of history and ideas.

Our challenge was how to make the

beautiful, 200-page magazine work

just as well on the multi-device web.

For this project, we paired a developer

with a designer, from creating the very

first wireframes through to the design

stage, to help identify layouts and

modules that might be problematic.

As our designer was iterating through

layout options, our dev would create

quick HTML prototypes for those

layouts. We would then test the

prototype on a range of devices and

discuss the next iteration of design.

The prototypes ended up being

strictly an internal deliverable, but

they gave us confidence that the static

comps we were showing the client

were grounded in what we could do

in the browser. As we moved further

into development, our designer and

developer shifted to making design

tweaks directly in the browser.

From the beginning to the end of

this project, the collaborative workflow

freed us to use static tools for quick

exploration, and prototypes for

adjustments and discussions. The result

was a site that translated the robust,

sophisticated magazine into an equally

compelling online experience.

CASE STUDY LAPHAM’S QUARTERLY

Making progress A HTML prototype (left), and the f inal site (right)

The RWD Handbook

The perfect site

howcas

FeaturesProject

wit h ea s e. We k e ep a r a n ge of d e vic es

on hand at t he Bluec a de t off ic e (older

Android 2.2 phones, Android tablets,

and v ary i n g iOS devices ru n n ing iOS

6-8). I f yo u don’t ha ve a col l e c t i on of

devices for test i ng, Open D e viceLab.com

(opendevicelab.com) ca n help you fi nd

a de v i ce l ab nea r b y.

If you’re lo oki ng for re mote testing,

Bro w serSta c k (browserstack .com) and

Sauce L abs (saucelabs.io) b oth give a ccess

to a wi de cross-sec tion of op e r at i ng

systems and browsers. Testing in this

manner c a n b e slow, so I’ve found it

My advice is to make device testing

a part of you r r egu l ar tea m me et i n gs.

My process usua l l y i nvolves testi ng on

a few c om mon device s duri ng spri nts,

then expa nd ing to t he fu ll su ite dur i n g

weekl y me et i n gs. The more f r e quent ly

you test, the fewer hou r s you’ll have to

put in later.

For testing y ou r resp onsi ve designs,

ther e’s no substit ute for usi ng real

devices. Adob e Edge Insp e c t (creative.

adobe.com/products/inspect) al lo w s you to

synch r on i s e d e vic es to a m a ster br o w s er,

so t h at you ca n c he ck mult iple de vices

RESOURCES

USER RESEARCH

‘Why user research is everybody’s

job’ by Emma Boulton

(netm.ag/boulton-264)

‘The pro guide to user research’

by Alastair Campbell

(netm.ag/campbell-264)

Just Enough Research by Erika Hall

(netm.ag/hall-264)

CONTENT STRATEGY

The Elements of Content Strategy by

Erin Kissane (netm.ag/kissane-264)

Content Strategy for Mobile by Karen

McGrane (netm.ag/mcgrane-264)

Content Everywhere by Sarah Wachter-

Boettcher (netm.ag/wb-264)

COMMUNICATION

InVision (invisionapp.com) – a good way

to quickly share and annotate comps

Slack (slack.com) – feels like IRC on

power-ups

DEVELOPMENT TOOLS

Quick JavaScript Switcher

(netm.ag/switcher-264) – Chrome plugin

to toggle JavaScript on and off

Vagrant (vagrantup.com) – virtual

machines to match server environments

You Might Not Need jQuery

(youmightnotneedjquery.com) – there’s

times when you simply don’t need jQuery

MicroJS (microjs.com) – check this

for alternatives to jQuery, or try

vanilla JavaScript

GreenSock (greensock.com) – I use

GreenSock’s JS animation platform

for complicated animation sequencing

STYLE GUIDES

Styleguides.io (styleguides.io)

– a collection of frontend style

guide resources

Sparkbox (building.seesparkbox.com)

– a collection of posts on how

Sparkbox built its site

PERFORMANCE AND TESTING

Responsible Responsive Design

by Scott Jehl (netm.ag/jehl-263)

grunt-perfbudget (netm.ag/perf-264)

– to test incremental builds against

WebPagetest

Firefox archive (netm.ag/firefox-264)

– an archive of older versions of Firefox

Opera Mini (netm.ag/opera-264)

– download Opera Mini on your computer

Microsoft’s Modern.ie (modern.ie)

– virtual machines of OS/Internet

Explorer combinations

Design meets development Pattern Lab (pat ternlab.io) is a tool fo r creat ing frontend design systems

Remote Testing BrowserStack (left) a nd Sauce Labs (right) are great r esources for remote test ing

剩余227页未读，继续阅读

普通网友

粉丝: 7
资源:
66

《响应式网页设计指南》读者调查：实战技巧与挑战

Responsive Web Design with HTML5 and CSS3(PACKT,2ed,2015)

Responsive Web Design with HTML5 and CSS3(2nd) epub

Web Design Essentials: Responsive Design and Flexbox

基于html和css开发的书籍列表

background-size: cover

ant design pro

Ant Design vue

基于SpringBoot和Vue的Web设计与实现外文文献

企业官网设计外国文献

若依cloud 不同尺寸屏幕自适应

html5的网页设计与制作研究参考文献

vue3 element

ant-design-vue

display:flex;

请详细讲解一下，响应式设计（Responsive Design）的具体代码书写，并提供10个代码范例

携程网手机端html代码

h5网页自适应屏幕大小完整代码

There is not enough space for this component. Try decreasing its width, or increasing the destination width.

freecodecamp通过构建一组彩色笔学习css的全部步骤

chartgpt ui design website

最新资源