Die meeste webwerwe gebruik responsive ontwerp gebruik dit verkeerd, wat tot probleme lei. Die algemene benadering tot responsive ontwerp is 'n lui een, en as jy daardie benadering volg, sal sommige van jou responsive werwe sal absoluut foutloos werk, en baie van hulle sal nie. Vir diegene wat wel perfek werk, sal dit waarskynlik op 'n kwessie van geluk neerkom.
Die konsep van responsive ontwerp is eenvoudig, maar die eenvoud daarvan is wat mense daartoe lei om so maklik foute te maak. Ontwerpers met jare se ondervinding het gewoond geraak om te ontwerp vir die desktop, en daarom sal hulle gewoonlik 'n ontwerp beplan wat gebaseer is op 'n desktop uitleg.
Desktop uitlegte verskil van tabletuitlegte en mobiele uitlegte omdat hulle normaalweg multi-kolom is, gewoonlik groot hoeveelhede wit spasie insluit, en alles is net "groot", by gebrek aan 'n beter woord. As responsive ontwerptegnieke gebruik word, is hierdie multi-kolom uitleg veronderstel om in 'n enkele kolom af te breek.
As dit al joune is responsive ontwerp eintlik doen wanneer dit op 'n mobiele toestel bekyk word, kan jy 'n probleem hรช. Hoeveel van 'n probleem hang af van jou houding, maar goeie ontwerpers gee om vir goeie UX. Hulle gee selfs meer om oor slegte UX. As u webwerf 'n slegte UX het en u 'n goeie ontwerper wil wees, moet u dit regstel.
Die probleem met die saamvou van 'n meervoudige kolomuitleg in 'n enkele kolom is dat dit nie op 'n proporsionele basis werk nie. As u iets horisontaal moet inkrimp en u geen ander veranderinge aanbring nie, gaan dit natuurlik vertikaal uitbrei.
Giet water uit 'n kort vetglas in 'n lang dun glas, en die water neem die vorm aan van die lang dun glas, terwyl die volume water presies dieselfde bly. Wat ontwerpers moet verstaan, is dat ons met die webwerf die volume moet verander. Dit is gewoonlik nie 'n goeie idee om die vorm te verander nie, maar die inhoud te behou presies dieselfde. Iets moet gee.
Iemand wat werklik die titel van ontwerper verdien het, sal verstaan โโdat dit 'n probleem verteenwoordig wat opgelos moet word, en wat ontwerpers eintlik doen is om oplossings vir probleme te vind. Daarom is dit die perfekte werk vir jou om die beste manier te vind om die kerninhoud van die webwerf te lewer sonder om die gebruikerservaring in 'n frustrerende rolfees te verander. Hier is 'n paar van die dinge wat die moeite werd is om te oorweeg wanneer jy 'n afbreek desktop ontwerp in 'n mobiele ontwerp:
1. "Mobile First" is moeries
Jammer, maar dit is. Almal is besig om dit te papegaai, maar as 'n konsep is dit nie baie nuttig nie, want as jy werklik "mobiel eerste" ontwerp, sal dit nagmerrieagtig wees om dit terug te probeer skaal na 'n desktop ontwerp, tensy jy by 'n suiwer enkelkolom-uitleg die hele pad op hou.
Die beste benadering is om ten minste drie (en tot 11) verskillende uitlegte fisies te ontwerp. Die minimum wat u kan oorweeg, sluit in:
- Desktop
- Landskap selfoon
- Portretmobiel
As u 'n bietjie grondiger wil wees, moet u ook die volgende oorweeg:
- Landskapstablet
- Portret tablet
En die volledige lys, as u absoluut volledig wil wees, sou wees:
- Groot Desktop
- Gewone Desktop
- Groot landskap tablet
- Groot portret tablet
- Klein landskap tablet
- Klein portret tablet
- Groot landskap mobiele
- Groot portretmobiel
- Klein landskap mobiele
- Klein portretmobiel
- Klein / draend
Met soveel verskillende moontlikhede is dit duidelik waarom 'n lui 'one-size-fits-all' benadering so aanloklik is, maar dit is ook duidelik waarom daar soveel maniere is om dit te verwoes.
2. Skep die uitgestrekte bladsyvoettitel
Die desktop ontwerp sluit een van daardie groot, bonkige bladsyvoetskrifte met baie interne skakels in? Groot, dit sal waarskynlik baie handig wees op 'n desktop. Op 'n selfoon lyk dit belaglik, en is meer as net 'n tikkie irriterend. Jy kan heeltemal verskillende bladsyvoetskrifte vir elke toestelbreekpunt ontwerp. Maak net daardie voetskrifskakels beskikbaar in 'n modale dialoog en almal wen.
3. Aanvaar enkele geringe aanvalle op obskure toestelle
As 'n spesifieke toestel nie gereeld voorkom nie, is dit nie so sleg as daar 'n paar eienaardighede in die ontwerp is wat slegs verskyn as u op daardie toestel kyk nie. Hoe meer gewild 'n toestel is, hoe meer sal u moet werk om ontslae te raak van enige eienaardighede wat daarop verskyn.
4. U kan inhoud verberg wat nie tot die kernboodskap bydra nie
Die belangrikste deel van 'n webwerf is die kernboodskap. Ja, op sommige webwerwe is die belangrikste advertensie en bestaan โโdit net om advertensies te lewer, maar as u moet kies tussen die kernboodskap of die advertensie wys, kies die boodskap. Google beskou u waarskynlik meer as persona non grata as u kerninhoud verberg en dan 'n klomp advertensies lewer. Dit is omdat die kerninhoud is waarop Google u geรฏndekseer het, en wanneer die inhoud nie getoon word nie, beskou Google dit as misleidend.
Boonop is dinge soos prente wat suiwer dekoratief of esteties is, maar wat nie 'n belangrike bydrae tot die kernboodskap lewer nie, kandidate vir die vermindering of wegkruip.
Sommige mense het voorgestel dat die wegsteek van inhoud mobiele gebruikers "straf", maar dit is 'n bietjie van 'n absurde idee. Die realiteit is dat jy die inhoud wegsteek omdat dit daar is om die te verbeter desktop ondervinding, maar dra nie voldoende by tot die kernboodskap van die webwerf sodat dit nodig is nie
5. U kan alternatiewe agtergronde gebruik
Onlangs het ek 'n belaglike opdrag gekry waar die eienaar van die webwerf vir 'n spesifieke agtergrond betaal het en wou hรช dat al die inhoud op die agtergrond pas. Koelpuntitems moes 'n baie presiese aantal karakters hรช, die totale aantal reรซls moes presies wees, ensovoorts.
Dit is beslis slegte praktyk in webontwerp, want jy moet dit doen nooit ontwerp inhoud om by 'n uitleg te pas. Die uitleg moet altyd ontwerp word om die inhoud te hou. As die uitleg om een โโof ander rede nie die inhoud kan bevat nie, moet die uitleg herontwerp word, nie die inhoud nie. Dit is heel moontlik om verskillende agtergronde vir verskillende toestelle te gebruik. Jy is 'n ontwerper. Gebruik jou verbeelding.
Inhoud is die lewensbloed van 'n webwerf, en om dit te wysig of te beperk op grond van die beperkinge van 'n uitleg, is 'n duidelike teken van amateurisme aan die kant van die eienaar van die webwerf, en 'n teken dat die uitleg swak ontwerp is in die eerste plek. Staan volgens u beginsels, want daardie kliรซnt gaan moeilik wees as u vryspraak doen.
Die kliรซnt is altyd reg, behalwe wanneer daardie kliรซnt 'n webontwerpkliรซnt is. Kliรซnte weet selde wat die beste vir hulle is, en dit is belangrik om jouself te laat geld as 'n webontwerper wat weet hoe om die regte resultaat vir die kliรซnt te lewer. Anderwise jy loop die risiko om nog 'n webwerf te skep gruwel.
6. Beheer die ineenstortingsorde handmatig (of vermy ruimtelike verwysings binne die inhoud)
Dit is 'n ingewikkelde probleem. Die ineenstortingsorde van 'n webwerf hang af van die volgorde waarin die divs gestapel is. U moet u divisies in die regte volgorde stapel sodat dit in die regte volgorde sal ineenstort.
Een van die probleme wat van die WYSIWYG-webwerfbouwers afkomstig is van sleep-en-drop, is dat u normaalweg nie kan bepaal in watter volgorde die divs ingebou word nie, en in die baie seldsame gevalle waar u dit kan doen, word u harde werk elke keer ongedaan gemaak maak u die kleinste bewerking, en u moet weer ingaan en die bronkode hack.
As u nie die ineenstortingsbevel beheer nie, hierdie beeld verduidelik wat verkeerd kan gaan. U moet ook vermy om ruimtelike verwysings te maak (soos "in die kolom aan die linkerkant"), want op 'n mobiele telefoon kan alles wat links of regs is, na bo of onder verskuif word, plus as u die leser laat dink dat dit belangrik genoeg is om te blaai om te sien, sal hulle weer moet terugrol, en dit is nie cool nie.
7. U kan verskillende lettergroottes benodig vir verskillende uitlegte
Dit is maklik om fontgrootte met CSS te beheer en u kan verskillende lettergroottes en selfs verskillende lettertipes (as dit beter lyk) instel vir spesifieke vertoongroottes. U kan die vertoongrootte vind met CSS-mediavrae, en dan verander u die lettergrootte of lettertipe sodat dit ooreenstem met waardes wat die inhoud tot die beste voordeel vertoon op die tipe toestel wat u rig.
8. Dit is die beste om te gebruik responsive beelde
Alle beelde moet wees responsive wanneer moontlik. Dit bring mee dat die detail van 'n beeld soms verlore kan gaan as dit te veel afgeskaal word. 'n Oplossing vir hierdie probleem is om die prent klikbaar te maak sodat die gebruiker 'n ingezoomde weergawe van die prent apart van die inhoud kan sien. Die normale manier om dit te doen is via 'n modale dialoogkassie.
opskrif van hoofde met vergunning van
Mobiele eerste beteken net dat in die kodebasis die "standaard" css vir selfoon is en jy bou veranderinge vir groter formats van daar af. Ek verstaan โโregtig nie jou eerste punt nie