Lag Spesifikke Web Design for iPhone og iPad

June 5  by Eliza

Hvis du ønsker å optimalisere sidene dine for å se sitt beste, må du vurdere for skjermstørrelse og oppløsning forskjeller mellom iPhone og iPad. Legg merke til prinsippskissen som illustrerer en vanlig måte designere endre sine sider for hver enhet: arrangere oppsettet for best mulig passform på de ulike skjermstørrelser.

Forenkle design for mindre iPhone-skjermen

På iPad, vist på venstre side av figuren, ser du god plass til en annen kolonne, slik at asides kan rettes til høyre for artikkelen. På høyre side av figuren, ser du at den beste praksis er å begrense din design til en kolonne på de mindre iPhone og iPod touch-skjermer.

Lag Spesifikke Web Design for iPhone og iPad


Hvis du ser på figuren og tenke, "Vent et øyeblikk - iPad er i liggende modus og iPhone er i stående modus, og som gjør en stor forskjell," du har rett.

Nå sjekke ut dette tallet for å se hvordan American Airlines nettstedet bruker bare én kolonne for iPhone design, selv i liggende modus, og bruker flere kolonner på iPad, selv når det er i stående modus.

Lag Spesifikke Web Design for iPhone og iPad


Legg merke til på iPhone at American Airlines teamet endret ikke bare design, men også den informasjonen som vises, med fokus på de elementene som mest sannsynlig vil være viktig for en person på farten, inkludert enkel flight innsjekkinger.

Forhåndsvisning flere design i Dreamweaver

Hvis du bruker Adobe Dreamweaver, være sikker på å få Dreamweaver HTML5 Pack. Denne utvidelsen er inkludert i oppdateringer til Dreamweaver CS5 og senere versjoner og kan legges som en forlengelse til Dreamweaver versjoner 3 og 4. Som du kan se i dette eksempelet, lar HTML5 utvidelsen du enkelt vise tre forskjellige versjoner av stilark på en tid ved å vise hver enkelt i en egen del av skjermen.

Lag Spesifikke Web Design for iPhone og iPad


Dreamweaver HTML5 Pack for Dreamweaver CS3 og CS4 er en nyttig måte å raskt sjekke dine design for å se hvordan ulike CSS stilark påvirke dem, men den støtter ikke alle varianter av HTML5 og CSS 3 ennå. Også være klar over at den begrensede "fast eiendom" i den vertikale forholdet mellom disse forhåndsvisninger gjør det vanskelig å sikre at du bruker hele plassen som er tilgjengelig i stående modus.

Å bruke Adobe Dreamweaver for å se en blogg som er opprettet med WordPress, slik som den vist i eksempelet, må du sette opp datamaskinen som en web-server - en prosess som ikke er så vanskelig som du kanskje tror. Du finner detaljerte instruksjoner for å lage Dreamweaver og WordPress arbeid på den stasjonære datamaskinen.