Die aanpasbare ontwerp (responsiewe ontwerp)

Aanpasbare ontwerp

Gebruikers wat toegang tot die internet via tablette en selfone het, neem toe. Dit beteken, soos u reeds weet, dat dit nie meer genoeg is om 'n goeie webblad te ontwerp wat op ons rekenaar goed lyk nie; dit moet ook op elke mobiele toestel gesien word. Die probleem? Verskillende skermgroottes en resolusies. Daarom is dit so moeilik om 'n ontwerp te maak wat korrek aanpas by alle media (die beroemde reageer ontwerp, vertaal as aanpasbare ontwerp).

Hier is 'n paar wenke om in gedagte te hou as u 'n ontwerp met hierdie eienskappe maak. Gee aandag!

Wenke vir aanpasbare ontwerp

  1. Maak 'n eenvoudige sjabloonMet eenvoudig bedoel ek nie flou nie. Ek praat oor die struktuur HTML van u webwerf: hoe duideliker dit is, hoe beter. Hou in gedagte dat 'n rekenaarskerm drie vertikale kolomme kan pas; op die skerm van 'n selfoon sal jy net een pas. Dink daaraan en hoe u die elemente sal herposisioneer.
  2. Skakel alles onnodig uitVermy jQuery-effekte, Flash-animasies en enige ander kode wat die laai van u bladsy vertraag. Hoe minder inhoud u van hierdie tipe het, hoe vinniger sal die web laai.
  3. Definieer 'n styl css vir elke "grootte"Skep 'n tiny.css, small.css en big.css (byvoorbeeld) wat loop op grond van die toestel waarop dit gekyk word. Byvoorbeeld:

    @ import url (tiny.css) (min-breedte: 300 px);

    @ import url (small.css) (min-breedte: 600 px);

    @ import url (big.css) (min-breedte: 900px);

  4. Die mees gebruikte resolusies320px/480px/720px/768px/900px/1024px
  5. Maak u sjabloon FLEKSIBELWerk net waar moontlik met persentasies in plaas van vaste bedrae. Hier is 'n paar verwysingsekwivalensies: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
  6. Tipografie belangriker as ooit Soms kan jou toestelskerm so klein wees dat al wat jy sien teks is. Daarom moet ons die beste lettertipes op ons webwerf baie noukeurig kies, sodat dit nie leesbaarheid verloor as dit kleiner word nie. Daarbenewens moet ons weet hoe om meer neutrale lettertipes met ander te kombineer met persoonlikheid wat die web die nodige karakter gee. Daarom is die eerste raad dat u tyd spandeer om die lettertipes te kies wat u gaan gebruik.
  7. Usa beelde van hoë gehalteNamate die ruimte verminder word, sal die beelde dit vergesel. Kies diegene wat nie kwaliteit verloor as dit verminder word nie, en wat dieselfde werk as dit geskaal word. 'N Beeld van lae gehalte laat u webwerf sleg lyk.
  8. Dat u beelde altyd gesien word volVoorkom dat u foto's afgesny word deur die img (breedte: 100%;) kode in u css te voeg. Op hierdie manier sê u vir die toestel om die hoogte wat die beeld moet gee, weer te bereken, sodat die breedte daarvan honderd persent gesien kan word.
  9. Almal laag dieselfde URLVergeet subdomeine soos www.mysite.com/mobile, aangesien dieselfde index.html-lêer in die hoofmap vir alle toestelle sal werk (as u die aanpasbare ontwerp korrek doen). U weet reeds die voordeel: hoe minder subdomeine, hoe vinniger sal die bladsy laai.
  10. Maak gebruik van die stutte: Wees verbeeldingryk Dit is nie dieselfde om toegang tot 'n webwerf vanaf 'n rekenaar te kry as vanaf 'n iPad of 'n selfoon nie. Met die eerste, sal u op 'n kalm en kalm manier navigeer. Met laasgenoemde sal u dit in ledige ure doen en die venster sluit sodra u verveeld raak. Gebruik hierdie voorwaardes om die gebruiker te vermaak en om pret te hê in die paar minute wat hulle aan u gaan toewy. Miskien sal hy besluit om hom op 'n meer ontspanne manier te besoek as hy by die huis kom.
  11. Word inspireer In digitale publikasies sal u u afvra waarom hierdie raad is. Baie maklik: digitale tydskrifte (goed) weet hoe om van die ondersteuning gebruik te maak en hul ontwerp is baie intelligent. Word geïnspireer deur hulle en maak 'n webwerf wat moeilik is om te verlaat.

Meer inligting - Digitale tydskrifte

Bron - splio, 960.gs, kolom


3 kommentaar, los joune

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.

  1.   Didac Rios dijo

    Daar is dinge waaroor ek nie baie saamstem nie.
    In punt 5 ... aangesien 200px = 15,38% en die volgende ... hierdie verwysingsvergelyking nie getref kan word sonder enige ouermaat nie, is die grootte per pixels nie 'n relatiewe maat soos die persentasies nie!

    Spesifiseer die beelde met breedte: 100% verkeerd, ek dink nie dit moet 'n aanbeveling wees nie. Dit is beter om die beelde met hul breedte en hoogte te definieer, dus neem die bediener minder tyd om die inligting te verwerk (dit hoef nie die grootte daarvan te bereken nie) en ons verbeter die laaisnelheid van die bladsy (baie belangrik in 'n aanpasbare of responsiewe web ontwerp).

    Ek sou dit al insluit, al is dit 'n neusbaan ... beelde vir retina-skerms. As ons responsiewe webontwerp wil doen, is dit verpligtend om beelde vir retina-vertoning te gebruik, aangesien 'n hoë persentasie mobiele en tablet-aansigte hierdie skerms gebruik. Dit het dus geen sin om die moeite in te stel om 'n ontwerp vir hulle op halfgas te plaas nie.

    Goed vir die res

    1.    Didac Rios dijo

      In punt 5 plaas hulle u in konteks en vertel u van 'n totale uitleg van 1300 px met 3 kolomme, een van 200, 300 en 1000.

      As u dit persentasies deurgee, is dit soos u sê 15,38% ((200 * 100) / 1300) (desimaal hieronder, internasionale stelsel: P)

      Maar as ons oor 'n 500px-uitleg praat en ons het 3 kolomme, een van 200, 'n ander van 200 en 'n ander van 100px, is die persentasies nie meer dieselfde nie, in hierdie geval 200px = 40% ((200 * 100) / 500)

      Dit sou wees: 200 px = 40% en 100 px = 10%

      Kom, soos ek gesê het, dit is nie 'n verwysing wat u aandui nie, dit is slegs 'n verwysing op 'n 1300px-uitleg.

      groete

      1.    Lua louro dijo

        Wat 'n mislukking, jy is heeltemal reg in die wêreld! Weereens dankie ;)