Side Designs for liggende og stående Views

August 13  by Eliza

Når du slår på en iPhone eller iPad, justerer retningen på en nettside automatisk tilsvarende. Safari-nettleseren smart forstørrer (eller reduserer) websider for å passe på skjermen, men den ¡€ ™ s ikke perfekt. Selv om Safari kan gjøre sidene passer plassen godt samlet, kan din design lider fordi:

  • Når siden er forstørret for å passe liggende modus på en iPad, kan optimaliserte bilder bli uskarpt.
  • Redusere størrelsen på sidene kan gjøre teksten umulig å lese.

I mange år har folk flest optimalisert web pagesâ € ™ bredde og høyde for de mest brukte dataskjermer:

  • Bredde: I de tidlige dagene av nettet, ved hjelp av denne strategien betydde at du opprettet design som var ikke mer enn 780 piksler bred, slik at de ville passe inn i en skjermoppløsning satt til 800 x 600 piksler. De fleste valgte 780 piksler fordi den innstillingen igjen litt plass til rullefeltet på hver side av nettleservinduet.

    I de senere årene, som større skjermer har blitt rimeligere og mer utbredt, de fleste webdesignere oppdatert målet størrelse på 960-980 piksler, noe som passer godt på skjermer med en oppløsning på 1024 x 768 piksler.

  • Høyde: Selv om de fleste designere enige om bredden på en design som er optimalisert for disse skjermstørrelser (gi eller ta 10 eller 20 piksler), har en debatt rast om hvorvidt web side design bør passe inn i høyden på disse designene.

    Teorien bak begrense høyden på websidene er basert på studier som tyder på at brukerne dona € ™ t liker å rulle ned en side og at alt innhold som ISNA € ™ t synlig når siden først laster ignoreres. Muligens rulling har fått en dårlig rap i løpet av årene. Ita € ™ s tid til å forlate forestillingen om at web design aldri bør utvide mer enn 600 piksler ned en side.

Denne figuren illustrerer hvorfor iPad har alltid forandret debatten om hvor lenge en nettside bør være. Her ser du et skjermbilde av ING Direct nettsiden slik den fremstår på en iPad i stående modus. I rettferdighet til designerne i ING Direct, passer området godt innenfor rammen av en skjerm med en oppløsning på 800 x 600 piksler.

Side Designs for liggende og stående Views

Ved å begrense Sitea € ™ s innhold til 600-pixel cutoff imidlertid opptar utformingen bare om lag en tredjedel av iPad-skjermen i stående modus. Selv i liggende modus på iPad, design doesnâ € ™ t ta opp den vertikale plass, i stedet fylle bunnen fjerdedel av skjermen med den lyse oransje bakgrunnsfarge.

Hvis du ønsker å lage bare ett design for et nettsted, er det beste alternativet for å designe sine sider for å være 980 piksler bred og deretter utvide dem minst 980 piksler nedover skjermen. Hvis du gjør dette, både iPad og iPhone justerer automatisk design for å fylle skjermen i liggende og stående modus ved å justere størrelsen til å passe.

Men hvis du virkelig bryr deg om design og vil sidene dine for å ta seg best på iPad og iPhone, er det beste alternativet for å lage to forskjellige design.

Reglene for Cascading Style Sheets (CSS) inkluderer muligheten til å opprette flere stilark du best kan dra nytte av den størrelse og funksjoner i hver enhet. For eksempel kan du lage stiler målrettet til liggende eller stående retning av iPhone eller iPad (som i utformingen vist her).

Side Designs for liggende og stående Views


På samme måte kan du målrette ulike enheter med ulike stilark ved å lage ett sett med stiler for en side når ita € ™ s vises på en stasjonær datamaskin og et annet sett av stiler når siden er sendt til en skriver.