Átfogó javítási útmutató Responsive Tervezési kérdések 2023-ban

A legtöbb weboldal használ responsive a tervezés helytelenül használja, ami problémákhoz vezet. Az általános megközelítés a responsive a tervezés lusta, és ha ezt a megközelítést alkalmazod, akkor néhányat a te responsive az oldalak teljesen hibátlanul fognak működni, és sok közülük nem. Azok számára, akik tökéletesen működnek, valószínűleg a szerencse dolga lesz.

A koncepció responsive A tervezés egyszerű, de az egyszerűsége az, ami miatt az emberek olyan könnyen hibáznak. A több éves tapasztalattal rendelkező tervezők hozzászoktak ahhoz, hogy a desktop, és így általában a terv alapján terveznek desktop elrendezés.

Desktop az elrendezések különböznek a táblagépek és a mobil elrendezésektől, mert általában több oszlopból állnak, általában hatalmas mennyiségű szóközt tartalmaznak, és minden csak „nagy”, jobb szó híján. Ha responsive tervezési technikákat használnak, ez a többoszlopos elrendezés egyetlen oszlopra bomlik le.

Ha ez mind a tied responsive a design valóban működik, ha mobileszközön tekintik meg, akkor lehet, hogy problémája van. Hogy mekkora probléma, az a hozzáállásodon múlik, de a jó tervezőknek fontos a jó felhasználói élmény. Még jobban érdekli őket a rossz UX. Ha webhelyének rossz a felhasználói élménye, és jó tervező szeretne lenni, akkor meg kell javítania.

A többoszlopos elrendezés egyetlen oszlopba összecsukásával kapcsolatos probléma az, hogy nem arányos alapon működik. Ha vízszintesen kell zsugorítani valamit, és nem hajt végre semmilyen más változtatást, az nyilvánvalóan függőlegesen fog bővülni.

Egy rövid zsíros pohárból öntsön vizet egy magas, vékony üvegbe, és a víz felveszi a magas vékony üveg alakját, miközben a víz térfogata pontosan ugyanaz marad. A tervezőknek meg kell érteniük, hogy egy webhely esetében szükségünk van a hangerő változására. Általában nem jó ötlet az alakot megváltoztatni, de a tartalmat megtartani pontosan ugyanaz. Valamit adni kell.

Valaki, aki valóban kiérdemelte a tervezői címet, megérti, hogy ez egy megoldandó probléma, és a tervezők valójában megoldást keresnek a problémákra. Ezért ez a tökéletes munka az Ön számára, hogy megtalálja a legjobb módot a webhely alapvető tartalmának továbbítására anélkül, hogy a felhasználói élményt frusztráló görgetéssé változtatná. Íme néhány dolog, amit érdemes figyelembe venni az a desktop tervezés mobil dizájnná:

1. A „Mobile First” butaság

Bocs, de ez van. Mindenki papagáj ezt, de mint koncepció, ez nem túl hasznos, mert ha valóban „előbb a mobilt” tervezi, akkor rémálomszerű lesz, ha megpróbálja visszaméretezni egy desktop design, hacsak nem ragaszkodik a tisztán egyetlen oszlopos elrendezéshez egészen felfelé.

A legjobb megközelítés legalább három (és legfeljebb 11) különböző elrendezés fizikai tervezése. A minimálisan figyelembe vehetők a következők:

• Desktop
• Tájkép Mobil
• Portré Mobil

Ha egy kicsit alaposabb akar lenni, akkor a következőket is figyelembe kell vennie:

• Tájkép tábla
• Portré táblagép

És a teljes lista, ha teljesen teljes akar lenni, ez lenne:

• Hatalmas Desktop
• Rendes Desktop
• Nagy tájképű táblagép
• Nagy portré táblagép
• Kis tájképű táblagép
• Kis portré táblagép
• Nagy táj mobil
• Nagy portré mobil
• Kis táj mobil
• Kis portré mobil
• Apró / hordható

A sokféle lehetőség mellett nyilvánvaló, hogy miért csábító a lusta „mindenkire való” megközelítés, de az is nyilvánvaló, hogy miért lehet annyiféleképpen tönkretenni.

2. Szelídítsd meg azt a szerteágazó oldalláblécet

A desktop a dizájn egyike azoknak a hatalmas, vaskos oldalláboknak, amelyek rengeteg belső hivatkozást tartalmaznak? Remek, ez valószínűleg nagyon hasznos lesz a desktop. Mobilon nevetségesen néz ki, és több, mint egy érintés bosszantó. Teljesen különböző oldallábokat tervezhet minden eszköz töréspontjához. Csak tegye elérhetővé a lábléc hivatkozásait egy modális párbeszédpanelen, és mindenki nyer.

3. Fogadjon el néhány kisebb furcsaságot a homályos eszközökön

Ha egy adott eszköz nem elterjedt, akkor nem olyan rossz, ha van néhány furcsaság a kialakításban, amelyek csak az adott eszközön való megtekintéskor jelennek meg. Minél népszerűbb egy eszköz, annál többet kell dolgoznia, hogy megszabaduljon a rajta megjelenő furcsaságoktól.

4. Elrejtheti azokat a tartalmakat, amelyek nem járulnak hozzá az alapvető üzenethez

A webhely legfontosabb része az alapvető üzenet. Igen, egyes oldalakon a legfontosabb része a reklámozás, és csak azért léteznek, hogy ezt a reklámot közvetítsék, de ha választania kell az alapüzenet vagy a reklám megjelenítése között, válassza az üzenetet. A Google nagyobb valószínűséggel tekint rád persona non grata ha elrejti az alapvető tartalmat, majd megjelenít egy csomó hirdetést. Ez azért van, mert a Google az alapvető tartalom alapján indexelte Önt, és ha ez a tartalom nem jelenik meg, a Google megtévesztőnek tekinti.

Ezenkívül az olyan dolgok, mint a pusztán dekoratív vagy esztétikus képek, de nem járulnak hozzá jelentősen az alapvető üzenethez, csökkenthetők vagy teljesen elrejthetők.

Vannak, akik azt javasolták, hogy a tartalom elrejtése „bünteti” a mobilhasználókat, de ez egy kicsit abszurd felfogás. A valóság az, hogy elrejti a tartalmat, mert az azért van, hogy javítsa a tartalmat desktop tapasztalattal, de nem járul hozzá kellőképpen a webhely alapvető üzenetéhez ahhoz, hogy az szükséges legyen

5. Használhat alternatív háttereket

Nemrég kaptam egy nevetséges feladatot, amelyben a webhely tulajdonosa fizetett egy adott háttérért, és azt akarta, hogy az összes tartalom ehhez a háttérhez legyen igazítva. A felsoroláspontos elemeknek nagyon pontos karakterszámúaknak kellett lenniük, a sorok teljes számának pontosnak kellett lennie, és így tovább.

Ez határozottan rossz gyakorlat a webdizájnban, mert meg kell tennie soha Tervezze meg a tartalmat az elrendezéshez illeszkedően. Az elrendezésnek kell mindig úgy kell kialakítani, hogy megtartsa a tartalmat. Ha valamilyen oknál fogva az elrendezés nem tudja megtartani a tartalmat, akkor az elrendezést kell újratervezni, nem a tartalmat. Nagyon lehetséges, hogy különböző háttereket használjon a különböző eszközökhöz. Te tervező vagy. Használd a képzeleted.

A tartalom a webhely éltető eleme, és annak módosítása vagy korlátozása az elrendezés korlátai alapján az oldal tulajdonosának amatőrségének egyértelmű jele, és annak a jele, hogy az elrendezést az első alkalommal rosszul tervezték meg. hely. Álljon ki elvei mellett, mert az ügyfélnek baja lesz, ha beleegyezik.

Az ügyfélnek mindig igaza van, kivéve, ha az ügyfél webtervező. Az ügyfelek ritkán tudják, mi a legjobb számukra, és fontos, hogy olyan webdesignerként érvényesüljön, aki tudja, hogyan lehet a megfelelő eredményt elérni az ügyfél számára. Egyébwise azt kockáztatja, hogy újabb webhelyet hoz létre utálat.

6. Manuálisan szabályozza az összecsukási sorrendet (vagy kerülje a térbeli hivatkozásokat a tartalomban)

Ez egy összetett probléma. A webhely összecsukási sorrendje attól függ, hogy a divek milyen sorrendben vannak egymásra rakva. A div lemezeket a megfelelő sorrendben kell egymásra raknia, hogy a megfelelő sorrendben omoljanak össze.

A drag-n-drop WYSIWYG webhelykészítők egyik problémája az, hogy általában nem tudod megszabni, milyen sorrendben kerüljenek egymásra a divek, és azokban a nagyon ritka esetekben, amikor ezt megteheti, a kemény munka minden alkalommal félbemarad. elvégzed a legkisebb módosítást, és újra be kell lépned, és újra fel kell törnöd a forráskódot.

Ha nem te irányítod az összecsukási sorrendet, ez a kép világosan elmagyarázza, mi lehet a baj. Kerülje a térbeli hivatkozásokat is (például a „bal oldali oszlopban”), mivel mobiltelefonon, ami balra vagy jobbra volt, az eltolódhat fent vagy lent, plusz ha azt gondolja az olvasó, hogy elég fontos görgetni, hogy lássa, akkor újra vissza kell görgetnie, és ez nem jó.

7. A különböző elrendezésekhez különböző betűméretekre lehet szüksége

Könnyen szabályozható a betűméret a CSS segítségével, és különböző betűméreteket és akár különböző betűtípusokat is beállíthat (ha jobban néznek ki) bizonyos méretű kijelzőkhöz. A megjelenítési méretet CSS-médialekérdezésekkel találhatja meg, majd módosíthatja a betűméretet vagy a betűtípust olyan értékekre, amelyek a tartalmat maximálisan megjelenítik a megcélzott eszköztípuson.

8. A legjobb használni responsive képek

Minden képnek ilyennek kell lennie responsive amikor csak lehetséges. Ez azzal jár, hogy néha a kép részletei elveszhetnek, ha túlságosan kicsinyítik. A probléma megoldása a kép kattinthatóvá tétele, így a felhasználó megtekintheti a kép nagyított változatát a tartalomtól függetlenül. Ennek szokásos módja egy modális párbeszédpanel.

fejléckép jóvoltából Artur Martynowski