Mundu gömlu gömlu dagana? Þú veist hvaða dagar ég er að tala um; dagarnir ekki svo löngu síðan þegar við notuðum að hanna vefsíður til fastra breidda. Að horfa til baka núna virðist sem slík einfaldari tími; hamingjusamari tími; þegar ég gat endurskoðað öll letur sem var hægt að nota á netinu án þess að nefna annað hugsun. Sannleikurinn er sá að Móttækilegur Vefhönnun breytti öllu. Heimurinn var flatt og nú er það umferð, ég var blindur og nú sé ég, vefurinn var pixlar og nú er það prósentur.
Með tilkomu RWD er mikilvægt að við sem hönnuðir þrói vinnuframboð okkar til að henta betur kröfum nýju vefnum. Margir af okkur hafa lýst yfir óánægju okkar með því hvernig nálgun á föstum pixla í Photoshop er óhæf til að hanna vökvaútlit sem þarf fyrir móttækilegan vef en ekki hefur verið boðið upp á neinar gagnlegar leiðir. Vefhönnunarheimurinn er örvænting fyrir sérsniðna hugbúnað sem er byggður frá grunni og með RWD í huga. Vörur eins og Adobe Reflow eru frábær byrjun, þar sem það sýnir að Adobe vinnur að minnsta kosti að lausn en eftir að hafa eytt nokkrum klukkustundum með því um helgina get ég séð að það hefur enn langan tíma að fara áður en það verður gagnlegt viðbót við vinnustrauminn minn. Með okkur að vera í limbo á milli fyrirfram sögulegrar hugbúnaðar og loforð um hvað er að koma á morgun þurfum við að búa til aðra vinnuflæði til að mæta göllum núverandi hugbúnaðar okkar með því að kynna önnur tæki og verklagsreglur sem hjálpa til við að brúa bilið milli fasta punkta og vökvasvörunar.
Eftirfarandi er alls ekki listi yfir hvernig RWD verkefni ætti að nálgast, heldur hvernig ég hef aðlagað vinnuframboð mitt til að henta nýju landslaginu.
Ég stóð á landamærunum milli Photoshop / Fireworks / Illustrator skipta þar sem hver hefur barist fyrir ofbeldi og hefur orðið vitni að saklausu fólki lenti í krossfleti pixla. Hönnuðir hafa tilhneigingu til að hafa uppáhalds sína og vil frekar deyja hæga sársaukafullan dauða en viðurkenna að annar hugbúnaður hafi eiginleiki sem þeir gætu raunverulega viljað. Mín skoðun er sú að þú ættir að hanna í hvaða hugbúnaði sem gerir þér kleift að vinna á skilvirkan hátt og skoða hugmyndir þínar fljótt, hvort sem það er Photoshop, Powerpoint eða Paint.
Það er nánast óviðkomandi sem þú velur þar sem það ætti bara að vera upphafið til að gera tilraunir með mismunandi skipulagi. Persónulega kjósa ég Flugeldar eins og það smellir meira af kassa af því sem ég vil í hugbúnaði. Ég reyni ekki að verða þungur fastur í smáatriði á þessu stigi og reyni virkilega bara að gera nokkrar forkeppni ákvarðanir um skipulag og uppbyggingu eins og sumir posh wireframes.
Allt sem þarf að segja um notkun Lorem Ipsum í mock ups hefur verið sagt svo vinsamlegast treystu mér bara á þessu og, ef mögulegt er, notaðu raunverulegt efni til að hanna frá. Ef ekki er hægt að nota efni síðasta árs, skrifaðu eigin efni eða notaðu textana til 'Kerti í vindi' en notaðu ekki Lorem ipsum. Ef þú notar ekki raunverulegt efni verður erfitt að sjá á hvaða brotstað ákveðin atriði þurfa að laga sig.
Þetta er bara breiddin sem mér finnst gaman að byrja á eins og það er nálægt litlum skjáborðsupplifun, sem þá er auðvelt að skala upp fyrir stærri skjái og niður fyrir töflu / farsíma reynslu. Sumir kjósa að byrja breiðari en aðrir kjósa að hanna farsíma fyrst, það kemur bara niður á það sem virkar fyrir þig.
RWD snýst allt um vökvaíláta sem vaxa og minnka til að fylla tiltækan svæði vafrans, þannig að hönnun í prósentum fremur en punktum mun tryggja að hönnunin rennur út í réttu hlutfalli við vafrann og þarfnast minna brotstigs en samsvarandi pixla-undirstaða hönnun.
Ég hef tilhneigingu til að hafa In-Design opið í bakgrunni þannig að ég get auðveldlega og fljótt fundið út hlutfallsstærð pixla sem byggir á frumefni. InDesign er frábært að meðhöndla þessar tegundir útreikninga og þú getur auðveldlega fundið út hvaða stærð 428px x 333px frumefni verður í 46% af upprunalegu breiddinni, en halda því fram að hún sé hlutfallsleg eða kannski komast að 27% af 889px vafrabreidd í sekúndum. Niðurstöðurnar eru enn gefnar þér í punktum svo þú getir síðan farið aftur inn í hugbúnaðinn sem þú ert að hanna og búðu til ílátið í punktum með því að vita að það muni vera miðað við hlutfall vinnustaðsins sem þú hefur skilgreint.
Ef þú heldur að ég séi á því að nota raunverulegt efni í hönnun þinni, þá ættir þú að heyra mig halda áfram hanna leturgerðir í Photoshop (eða samsvarandi). Typography mun líta miklu öðruvísi í vafranum en það lítur út í venjulegu Adobe pakka sem mun þýða meiri vinnu fyrir þig að klára hönnunina þegar það er byggt.
Sparaðu þér höfuðverk og notaðu forrit eins og typecast.com til að gera tilraunir og búa til leturgerðir með. Þegar þú ert ánægð með útlitið og stíl letrið þitt getur þú flutt allt vinnusvæðið þitt sem gagnsæ PNG til að setja innan hönnunar mockups þinnar. Þú þarft ekki að hafa einhverja valin letur uppsett á tölvuna þína þar sem það verður bara mynd en þú munt einnig ekki geta breytt því án þess að fara aftur í typecast.
Núna ættir þú nokkuð að hafa hönnunina þína á 1000px breiðri (eða hvaða breidd þú valdir í upphafi) lokið með breiddum ílátanna sem halda hinu ýmsu innihaldi þínu að þýða í prósentur. Ég myndi nú byrja að búa til sérsniðna rist sem líkir eftir ílátbreiddum sem ég nota í hönnun minni. Svo ef ég er með skenkur sem er 30% breiður og innihaldsefni sem er 55% af vafranum mínum með 5% púði á hvorri hlið, getur ristin mín lítt út eins og 5%, 30%, 5%, 55%, 5%.
Þú getur notað forrit eins og Gridset til að byggja upp sniðið þitt en aftur, frekar vil ég nota InDesign eins og þú getur hópað og breytt þeim í réttu hlutfalli við hvert annað.
Ég tek nú ristið mitt sem ég bjó til með því að nota InDesign og límdu það í 1600px breitt (eða hámarks breidd sem þú vilt að vefsvæðið þitt sé) skjal. Ég byrjar þá að breyta stærðinni minni breiðari og þrengri með stigum 100 punkta alla leið niður í 300 punkta breitt. Við hvert stig mun ég athuga breidd hvers innihaldsefnis og ganga úr skugga um að það sé enn nógu stórt til að hýsa innihald hennar. Þegar ég kem í breidd sem ég held að geri ílát of lítið, þá breytir ég einfaldlega ristina til að passa. Þannig að ef ég var búinn að búa til 800% á breiddarhliðinni sem ég hafði búið til í 30% af breiddarbreiðunni, þá varð ég of þröngur, gæti ég bætt 10% viðbótum við það, sem gerir það nú 40% af breiddarvalsbreiðunni og er nógu breiður til að hýsa fyrirhugaða efnið .
Lykilatriðið sem þarf að muna er að ef þú gerir gámur breiðari, þá þarftu að gera annan ílát þrengri með sömu upphæð til að viðhalda 100% breiddinni. Þetta er besta leiðin sem ég hef fundið fyrir að skilgreina brotpunktar (punkturinn þar sem skipulag þín breytist) eins og þú bætir aðeins við öðru brotaliði þegar efni er brotið og ekki á breidd nýtt tæki. Þessi aðferð getur verið tímafrekt þar sem þú munt endar með 14 mismunandi forsýningum á ristinni þinni þar sem það vex 300px til 1600px breitt en það er besta leiðin sem ég hef fundið til að athuga hvernig hönnunin mun líta á mismunandi skjábreidd áður en hún er í þróun.
Annar kostur er að nota tól eins og Adobe Reflow sem leyfir þér einnig að bæta efni við ílát og draga síðan vinnusvæðið þitt og sjá þætti þessarar mælikvarða. Þú getur einnig ákvarðað brotstig þitt með því að breyta stærð vinnusvæðis þíns þar til efni brýtur og einfaldlega bætir við fjölmiðlum. Reflow er ennþá í almenningi Beta og hægt að hlaða henni niður hér .
Ef þú hefur minnkað myndirnar þínar niður í þrepum á hverjum 100 punkta, myndirðu auðkenna nokkrar breiddar þar sem efnið brýtur og leiðréttir það með því að bæta við brotpunkti. Þú getur nú farið aftur inn í hugbúnaðinn sem þú bjóst til í upprunalegu hönnuninni og breyttu útlitinu á hönnun þinni á breiddunum sem þú bentir á sem brotstig. Þetta þýðir að þú endar að hanna aðeins 2, 3 eða 4 mismunandi skipulag (fer eftir flókið rist og hversu mörg brotaliðir þú þarft) sem mun ná alla leið frá 300px til 1600px.
Ef þú hefur fylgt þessu ferli, þá ættir þú nú að hafa sett af skipulagi sem passar við brotstig þitt, skjal sem sýnir hvernig ristið þitt er byggt upp af hundraðshlutum vafrabreiddarinnar og hvernig það hrynur fyrir smærri skjái auk allra þeirra typography stíl búin til og prófað í vafranum. Þetta ætti að vera mjög sterkt lið fyrir verktaki til að byrja að byggja upp hönnunina þína nákvæmlega og án þess að þurfa að takast á við brot á efni á ákveðnum breiddum síðar.
Þetta ferli kann að virðast mjög langvarandi en án þess að tiltekið tæki sé byggt algjörlega fyrir RWD er það besta leiðin sem ég hef fundið fyrir að prófa móttækilega skipulagið mínar með því að nota óviðunandi hugbúnað og skýrt miðla hugmyndum mínum til framkvæmdaraðila. Þetta er alls ekki eina leiðin til að nálgast RWD verkefni, en það er það besta sem ég hef fundið.
Hvað hefur móttækileg hönnun breyst um vinnuframboð þitt? Hvaða ábendingar viltu deila? Láttu okkur vita í athugasemdunum.