'n Omvattende gids tot regstelling Responsive Ontwerpkwessies in 2023

As jy inteken op 'n diens vanaf 'n skakel op hierdie bladsy, kan Reeves and Sons Beperk 'n kommissie verdien. Sien ons etiese verklaring.

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 gewoonlik multi-kolom is, gewoonlik groot hoeveelhede wit spasie insluit, en alles is net "groot", omdat hulle 'n beter woord ontbreek. 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.

Hierdie probleem met die ineenstorting van 'n multi-kolom-uitleg in 'n enkele kolom is dat dit nie op 'n proporsionele basis werk nie. As jy iets horisontaal moet krimp en jy maak geen ander veranderinge nie, gaan dit natuurlik vertikaal uitbrei.

Gooi water uit 'n kort vet glas in 'n lang dun glas, en die water neem die vorm van die lang dun glas aan, terwyl die volume water presies dieselfde bly. Wat ontwerpers moet verstaan, is dat ons met 'n webwerf die volume nodig het om te verander. Dit is gewoonlik nie 'n goeie idee om die vorm te verander nie, maar hou die inhoud 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 voor die hand liggend hoekom 'n lui "een-grootte-pas-almal"-benadering so aanloklik is, maar dit is ook duidelik hoekom 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 algemeen is nie, is dit nie so erg as daar 'n paar eienaardighede in die ontwerp is wat slegs verskyn wanneer dit op daardie toestel gekyk word nie. Hoe gewilder 'n toestel is, hoe meer sal jy moet werk om ontslae te raak van enige eienaardighede wat daarop verskyn.

4. Jy kan inhoud versteek wat nie bydra tot die kernboodskap 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 jy kerninhoud versteek en dan 'n klomp advertensies aanbied. Dit is omdat daardie kerninhoud is waarop Google jou geรฏndekseer het, en wanneer daardie inhoud nie gewys word nie, beskou Google dit as bedrieglik.

Boonop is dinge soos beelde wat suiwer dekoratief of esteties is, maar wat nie noemenswaardig tot die kernboodskap bydra nie, kandidate om heeltemal te verklein of weg te steek.

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 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 hou 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 beweer 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 komplekse probleem. Die ineenstortingsvolgorde van 'n werf hang af van die volgorde waarin die divs gestapel word. Jy moet jou divs in die regte volgorde stapel sodat hulle in die regte volgorde sal ineenstort.

Een van die probleme wat van sleep-en-drop WYSIWYG-webwerfbouers kom, is dat jy nie normaalweg kan dikteer in watter volgorde die divs gestapel word nie, en in die baie seldsame gevalle waar jy dit kan doen, word jou harde werk elke keer ongedaan gemaak jy maak die kleinste wysiging, en jy sal moet teruggaan en die bronkode weer hack.

As jy 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 jy die leser laat dink dis belangrik genoeg om te blaai om te sien, dan sal hulle weer moet terugblaai, en dit is nie cool nie.

7. U kan verskillende lettergroottes benodig vir verskillende uitlegte

Dit is maklik om lettergrootte met CSS te beheer en jy kan verskillende lettergroottes en selfs verskillende lettertipes (as hulle beter lyk) vir spesifieke vertoongroottes stel. U kan die vertoongrootte met CSS-medianavrae vind, en dan verander u die lettergrootte of lettertipe om teen waardes te wees wat die inhoud tot maksimum voordeel sal vertoon op die toesteltipe wat u teiken.

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

Bogdan Rancea

Bogdan is 'n stigterslid van Inspired Mag, en het bykans 6 jaar ervaring in hierdie periode opgedoen. In sy vrye tyd studeer hy graag klassieke musiek en verken visuele kuns. Hy is ook behep met fixies. Hy besit al 5.

Kommentaar 1 Response

  1. M p sรช:

    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

Lewer Kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk *

Gradering *

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.