Virkelig Let Responsive Design
Det er ingen hemmelighed, at mange tror lydhør web er fremtiden. Oprettelse af et lydhør websted betyder, at det er i stand til at tilpasse sig de mange forskellige browsere og størrelser, der er tilgængelige. Hvis jeg vil sørge for, at min hjemmeside, jeg har oprettet på mit skrivebord, ses på en tablet med miniumruller og zoom, vil jeg være interesseret i at skabe et lydhurt websted.
En grund til at følsomme steder er blevet populære er, fordi det bare giver mening. Det er billigere end at oprette en eller flere ekstra websteder til mobiltelefoner og tablets. Det sikrer også, at der er en konsekvent oplevelse blandt enheder og desktop skærme. Det er ikke sjovt at skulle øge vinduets størrelse eller rulle vandret for at se et helt websted.
Mens der oprettes lydhurtige webdesign, bliver det lettere, er der nogle måder at få det til at gå endnu hurtigere. Takket være nogle CSS og HTML kan vi kode det direkte ind på vores websteder. Andre elementer kræver lidt mere arbejde. På nogen måde har vi fået en liste, der hjælper dig med at sætte dit lydhøre websted sammen med minimumsforstyrrelser og maksimale resultater.
jQuery-plugins
isotop
Isotop er et jQuery-plugin, der hævder at skabe magiske layouter, der ellers ikke kan oprettes af CSS og HTML. Det har evnen til at omarrangere elementer inde i en beholder, så de passer ind i den, når den ændres. Du kan også bruge isotop til at filtrere og sortere varer efter kategorier og lignende.
Breakpoints.js
Breakpoint blev lavet med udviklere og designere i tankerne. Det er et plugin, der giver dig mulighed for at oprette breakpoints til forskellige browser størrelser. Når din browser er ændret til en af disse størrelser, kan elementerne passe ind i skærmen.
FitText.js
Dette er et af mine foretrukne jQuery-plugins, fordi det er til skrifttyper. Alt for ofte i lydhurt webdesign, tager folk ikke i betragtning, at overskrifterne skal være lydhøre i stedet for at skubbe ind i et bestemt rum. FitText giver dig mulighed for at gøre netop det, men husk at kun bruge det til overskrifter!
Response.js
Hvis du kan lide ideen om Breakpoint.js men ønsker mere tilpasning, er Response.js svaret. Det er rigtig godt for dem, der kender jQuery bedre end CSS og HTML og har brug for at oprette lydhørwebsites. Du bruger dine breakpoints, men der er så meget mere tilpasning, som enhedsstørrelse, pixelrationer og evnen til at indlæse forskellige kilder til forskellige størrelser.
TinyNav.js
TinyNav er et let jQuery-plugin, som giver dig mulighed for at ændre alle menupunkter ved hjælp af lister for at blive til drop-down menuer, når browseren er ændret. Du kan angive størrelserne såvel som hvilke menuer der skifter. Det er ikke så bredt i funktion, men det er meget effektivt til det, det gør.
Populære rammer og systemer
Responsive Grid System
Dette system hævder ikke at være en kedelplade eller ramme, men kun et system til at gøre dine designs lydhøre. Det ser ud til at være en af de mest fleksible, da det ikke begrænser dig til en vis størrelse eller til en vis netværksstørrelse. De bruger forskellige CSS klasser, der kan flyde og lave deres egne kolonner.
Golden Grid System
GGS er også et system, og ikke en "ramme". De kan godt lide at henvise til sig selv som et startsted eller retningslinje for dem, der wamt at bruge en vis mængde net i deres webdesign. Du får 18 kolumner på skærmen, men 16 til brug i dit design. Du laver dine egne bredder og tagrender til at bruge og går i det væsentlige derfra.
1140 Gitter System
I et stykke tid anvendte mange designere webdesign, der var 960px brede. Så blev det lille og de gik op. Nu udvikles mange designs ved hjælp af en bredde på 1140 px. Dette 1140 Grid System giver dig mulighed for at oprette 12 kolonner til brug i et bredt bredde webdesign.
Twitter Bootstrap
Bootstrap er et af de mest populære rammer. Det er en 12 grid ramme, der har gjort sig brugbar cross-browser (herunder Internet Explorer 7) og kan bruges responsivt i håndholdte enheder. Den leveres med forskellige styling komponenter, typografi og JavaScript til brug og skabe slanke, intuitive websteder.
SimpleGrid
SimpleGrid tager ideen om grids og forenkler den. Med de fleste gittersystemer og -rammer har du disse ukendte klasser og ukendte kolonner. Simple grid har klasser, der angiver hvilke kolonner der er første, mellem og sidst. Derudover kan du tilføje forskellige "slots" til kolonnerne for at få det til at se ud som om der er flere kolonner. Det er en meget enkel og retfærdig ramme.
Andre lydhøre værktøjer
Responsive Web Design Sketch Sheets
Ligesom enhver designer eller udvikler tegner du sikkert dine designs, før du rent faktisk går i gang med at lave dem. Forhåbentlig gør du det. Hvis ikke, bør du måske begynde at bruge disse RWD-skabelon. De kommer med forskel enhed og desktop størrelser på dem, så du kan planlægge alt ud.
Responsive Design Sketchbook
Hvis du kan lide ideen om skitsering på papir, men ønsker at have alle dine klumper sammen, kan du overveje at få den lydhøre designskitsebog. Den leveres med 50 sider, spiral bundet med forskellige skærmstørrelser på hver side. Alle net og matematik er allerede gjort for dig, så dette er et godt værktøj til begyndere og eksperter i responsivt design.
Stil fliser
Dette er en dejlig lille ressource for webdesignere, uanset om de leder efter noget til lydhør design eller ej. Det er en PSD, der giver dig mulighed for at få essensen af et websted ved at tilføje overskrifter (typografi), logoer, farver og andre elementer. Årsagen til, at dette virker for lydhurtigt webdesign, er fordi det ikke indebærer nogen dimensioner, bare en digital ide uden begrænsninger.
Responsive Calculator
Der er masser af matematik involveret i at skabe pixel perfekt lydhør design. Det er nødvendigt, at din matematik også er korrekt, fordi du har at gøre med forskellige procentdele, bredder og browserstørrelser. For at hjælpe, her er en lommeregner, der giver dig den rigtige matte og CSS'en til at følge med.
Konklusion
Det er absolut nødvendigt, at vi tager mærke til, hvad der er lydhurtigt. Mange kunder vil gerne have deres websteder tilgængelige for en række enheder, og det er bare mere omkostningseffektivt at oprette lydhøre websites. Desuden hjælper de fleste af dine rammer og andre ressourcer til responsivt design med at dyrke organiserede og af høj kvalitet, standardwebsteder.
Hvad er dine yndlingsmåder til at starte responsive designs? Har vi savnet en ressource, du stoler på? Lad os vide i kommentarerne.