Indholdsfortegnelse:
Video: Web design - Webstarters.dk 2024
Når du surfer på internettet på din mobiltelefon, viser mange websites automatisk deres mobilvenlige version. Bag kulisserne placerede udviklere et script på webstedet, der løber for at bestemme, hvilken type browser du bruger - iPhone, iPad, Android, Blackberry eller endda stationære browsere som Firefox og Internet Explorer. Afhængigt af det forespurgte resultat omdirigerer scriptet derefter brugeren til den relevante hjemmeside for at sikre en optimal oplevelse. For eksempel er det ikke ualmindeligt at have flere versioner af et websted. Ud over et mobilspecifik websted kan du have et websted optimeret til nyere desktopbrowsere, der understøtter mange af de nyeste HTML- og CSS-funktioner - og en forenklet til ældre browsere.
IP og GPS-detektion
Afhængigt af arten af dine produkter og tjenester er en nyttig detalje til at registrere brugerens generelle placering i verden. Mange steder er for eksempel globale websteder, der tjener mange forskellige lande og sprog. Det er muligt at oprette en enkelt hjemmeside, der viser helt andet indhold - på brugerens modersmål - simpelthen ved at bruge et IP (Internet Protocol) detektionsskript, der viser brugerens placering. Den måde det virker på er, at når nogen får internet service, er han eller hun tildelt en IP-adresse. Der er databaser af IP-adresseplaceringer, som scriptet kan tjekke mod som et middel til at bestemme den generelle brugerplacering.
MonsterEnergys websted fungerer for eksempel på denne måde. Hvis du er i Spanien og skriv MonsterEnergy. com i din browser, får du lokale spanske nyheder, begivenheder og billedtekster på engelsk. IP-detektionsskriptet fortæller webstedet hvilket land og sprogindhold der skal hentes fra indholdsstyringssystemet (CMS).
Mens IP-detekteringsmetoden giver dig en generel region tilknyttet IP-adressen, er det også muligt at opnå en brugers specifikke GPS-placering ved hjælp af en kombination af JavaScript og HTML5. JavaScript-metoden kræver dog, at du først spørger brugerens tilladelse. Mens denne metode kræver det ekstra trin for at anmode om tilladelse fra brugeren, giver den dig præcise præcise positionsresultater, mens IP-detekteringsmetoden er nøjagtig kun på et generelt regionalt niveau. Selv om de fleste af os er bekendt med mobiltelefonens evne til hurtigt at få GPS-lokaliseringsdata ved hjælp af Wi-Fi-hotspot- og celletårn-data, kan du undre dig over, hvordan din stationære computer kan få sådanne data.Svaret er, at din internetforbundne hjemme- og kontorcomputer deler sine IP-data med nærliggende trådløse netværk. Ud over nærliggende Wi-Fi-netværk bruger Geolocation API flere forskellige informationskilder afhængigt af enheden (smartphone eller skrivebord) - herunder satellitdata, radiosporingsenheder og internethardware. Kan du sige "Big Brother ser? "
Responsive webdesign
En nyere tendens er begrebet lydhørt design, hvor en webside kan sense browserstørrelsen og skærmopløsningen - selvom den ændres, når en bruger ændrer browservinduet - og omdanner sin dynamisk dynamik layout til at rumme den nye størrelse. Den magi, der gør dette muligt, er Media Queries-delen af CSS3-specifikationen. En medie forespørgsel er en CSS kode, der registrerer browserens størrelse, og baseret på resultatet, fortæller siden at indlæse det relevante stilark som f.eks. Widescreen. css i modsætning til mobilscreen. css. Disse forskellige stilark indeholder forskellige layoutsystemer, skriftstørrelser og billedoptimeringsindstillinger. Derfor er det teoretisk, uanset hvor mange forskellige enheder der introduceres på markedet, hver med et unikt skærmrum, det er nemt at oprette et nyt CSS-dokument, der optimerer dit website for at imødekomme det.
Kredit: © Andersson-Wise Architects Andersson-Wise hjemmeside er et elegant eksempel på lydhør design. Webstedet vises i to kolonner i store browservinduer. Kredit: © Andersson-Wise ArchitectsDen samme Andersson-Wise-hjemmeside genkonfigurerer sig i realtid til en enkelt kolonne visning, når browservinduet bliver mindre. Kredit: © Andersson-Wise Architects Når du ser på en iPhone, vises Andersson-Wise-webstedet i et enkeltkolonne layout.