Lage spesifikke webdesign for iPhone og iPad - dummies

Hvis du vil optimalisere sidene dine for å se sitt beste, må du vurdere skjermstørrelsen og oppløsningsforskjellene mellom iPhone og iPad. Legg merke til det forenklede diagrammet som illustrerer en felles måte som designere endrer sidene sine for hver enhet: Ordne oppsettet slik at de passer best på de forskjellige skjermstørrelsene.

Forenkle designene til den mindre iPhone-skjermen

På iPad, vist på venstre side av figuren, ser du god plass til en andre kolonne slik at sidene kan justeres til høyre for artikkelen. På høyre side av figuren ser du at den beste fremgangsmåten er å begrense designet til en kolonne på de mindre iPhone- og iPod touch-skjermene.

Hvis du ser på figuren og tenker, "Vent litt - iPad er i liggende modus og iPhone er i stående modus, og det gir stor forskjell," du har rett.

Sjekk nå denne figuren for å se hvordan American Airlines-nettstedet bruker bare en kolonne for iPhone-design, selv i liggende modus, og bruker flere kolonner på iPad, selv når den er i stående modus.

Merk på iPhone at American Airlines-teamet ikke bare endret designet, men også informasjonen som vises, med fokus på elementene som mest sannsynlig vil være viktige for en person på farten, inkludert enkel flygetjekke -ins.

Forhåndsvisning av flere motiver i Dreamweaver

Hvis du bruker Adobe Dreamweaver, må du sørge for å få Dreamweaver HTML5 Pack. Denne utvidelsen er inkludert i oppdateringer til Dreamweaver CS5 og nyere versjoner, og kan legges til som en utvidelse til Dreamweaver versjon 3 og 4. Som du kan se i dette eksemplet, lar HTML5-utvidelsen deg enkelt å se tre forskjellige versjoner av stilarkene dine på en tid ved å vise hver enkelt i en egen del av skjermen.

Dreamweaver HTML5-pakken for Dreamweaver CS3 og CS4 er en nyttig måte å raskt sjekke designene dine for å se hvordan forskjellige CSS-stilark påvirker dem, men det støtter ikke alle variantene av HTML5 og CSS 3 ennå. Vær også oppmerksom på at den begrensede eiendommen i det vertikale forholdet mellom disse forhåndsvisningene, gjør det vanskelig å sikre at du bruker hele ledig plass i stående modus.

Hvis du vil bruke Adobe Dreamweaver til å se en blogg opprettet med WordPress, som den som er vist i eksemplet, må du konfigurere datamaskinen som en webserver - en prosess som ikke er så vanskelig som du kan tenke deg. Du finner detaljerte instruksjoner for å lage Dreamweaver og WordPress på skrivebordet.