Një faqe interneti e parë në një ekran desktop, mund të përmbajë të gjithë informacionin në një kolonë të gjerë.

E njëjta faqe interneti e parë në një smartphone nuk e shfaq dot të gjithë informacionin në një kolonë, kështu që përdoruesi duhet të lëvizë horizontalisht.
Por, përdoruesve nuk u pëlqen të lëvizin në faqe dhe të zmadhojnë.

Një problem tjetër me faqet e internetit është koha e ngarkimit të tyre në pajisjet mobile. Imazhet e mëdha e ngadalësojnë faqen e internetit.

Duke përdorur dizajnin e përshtatshëm, tablet-i dhe smartphone do të përshtaten automatikisht me gjerësinë e faqes së internetit.

Përdoruesi lexon përmbajtjen e faqes pa patur nevojë të lëvizin në faqe me ndihmën e ashensorit horizontal. Imazhet e mëdha do të përshtaten mirë dhe pa u shtrembëruar.

Disa nga avantazhet kryesore e dizajnit të përshtatshëm janë:

• SEO preferon faqet e internetit me dizajn të përshtatshëm.
  Një faqe interneti e cila nuk është me dizajn të përshtatshëm mund të ketë një version të veçantë për pajisjet mobile. Kjo do të thotë dyfish punë për të krijuar dhe për të mbajtur link për të dyja versionet mobile dhe desktop.
  Duke pasur një dizajn të përshtatshëm, optimizimi dhe mirëmbajtja e faqes fokusohen në një URL të vetme. Kjo gjë jep qëndrueshmëri në strukturën e URL-së, në të gjitha pajisjet, për rrjedhojë faqja do renditet më lart në rezultateve e kërkimit.
   
• Një website që përshtatet do të thotë i thjeshtë për tu mirëmbajtur. Ndërtimi i një faqeje të vetme me dizajn Responsive do të përgjysmojë koston e dizajnit dhe koston e mirëmbajtjes së faqes së internetit. Në terma afatgjatë, përdorimi i dizajnit të përshtatshëm do të minimizojë përpjekjet e mirëmbajtjes duke ndikuar ndjeshëm në koston totale të faqes së internetit.
   
• Një faqe interneti i dizenjuar me Responsive Web do të rrisë shitjet e dyqanit tuaj online. Nëse menaxhoni një dyqan online, të gjithë vizitorët nga pajisjet smartphone janë blerës potencialë, prandaj është më mirë të mos i injoroni ato. Nëse përdoruesit do të pëlqejnë faqen tuaj, ata do të qëndrojnë më gjatë dhe ndoshta do të blejnë produkte të dyqanit tuaj. Gjithashtu, një lundrim i thjeshtë në faqen e internetit bën që marketingu dhe komunikimi me blerësin të jenë në një tjetër nivel.

Dizajni i përshtatshëm bazohet në teknikat : Fluid Grids, imazhe fleksibël dhe Media Queries.

1.Fluid Grids

Teknika e Fluid Grids(rrjeteve fluide) përbëhet nga specifikimi i elementeve të faqes në varësi të madhësisë së faqes dhe jo me pixel. Projektuesi përcakton një madhësi maksimale të faqes web dhe rrjetëzimi bëhet me një numër specifik kolonash. Në këtë mënyrë faqosja organizohet e rregullt dhe e lehtë për tu trajtuar.

Secili element i faqes së internetit vendoset me gjerësi dhe lartësi proporcionale, në vend të një numri të pixel. Sa herë që ndryshon pajisja ose madhësia e ekranit të përdoruesit, elementët e faqes do të përshtaten automatikisht në gjerësitë dhe lartësitë e tyre, duke ruajtur përmasat e specifikuara në raport me gjerësinë e faqes.

Për shembull, nëse faqja ka dy kolona dhe gjerësia e elementeve në faqe nuk vendoset në pixel, por në përpjesëtim me gjerësinë e faqes. Kolona e parë mund të ketë 60% të gjerësisë së faqes dhe rrjedhimisht kolona e dytë do të ketë pjesën tjetër prej 40% të gjerësisë totale të faqes.

Avantazhi i teknikës Fluid Grids është se dizajni përcakton gjerësinë e elementeve me gjerësinë maksimale të faqes, duke u përshtatur në ekranet më të mëdha.

2.Imazhe fleksibël

Një imazh fleksibël ndryshon përmasat e tij në varësi të madhësisë së pajisjes nga ku përdoruesi po lundron faqen e internetit. Një opsion për imazhin fleksibël është që të gjitha pajisjet do të ngarkojnë të njëjtat imazhe. Ikonat dhe logot e vogla nuk përmbajnë problematika, por imazhet e mëdha kërkojnë vëmendje të veçantë.

Në mënyrë që të ngarkoni më shpejt faqen e internetit, shfletuesit parapërgatitin të gjitha imazhet e saj. Ata mund t'i identifikojnë imazhet në kodin burim, përpara se të ngarkojnë stilet CSS apo kodin e JavaScript.

Kjo qasje do të penalizonte në të vërtetë vizitorët që përdorin pajisjet smartphone, duke i detyruar ata të shkarkojnë automatikisht të gjitha versionet e të njëjtit imazh!

Një zgjidhje për këtë problem është përdorimi i imazheve grafikë vektorial, të cilët janë të shkallëzueshëm, ruajnë cilësinë e tyre dhe mund të përshtaten me madhësinë e ekranit të çdo pajisjeje.

3. Media Queries

Dizajni i përshtatshëm realizohet duke përdorur Media Queries, të cilat tregojnë si duhen zbatuar rregullat e CSS. Media Queries i tregojnë shfletuesit nëse duhen aplikuar ose jo rregulla të caktuara CSS.

Ky fakt varet nga lloji i pajisjes që po përdor vizitori. Media Queries aplikojnë rregulla të ndryshme të CSS për të njëjtën përmbajtje HTML. Në vend që të krijohet një version për smartphones dhe një version krejtësisht të ndryshëm për kompjuterët desktop, programuesi përdor të njëjtin skedar HTML për të këto pajisje.

Kur shtohet një artikull të ri ose modifikohet diçka në skedarin HTML, ndryshimet do të shfaqen njëson në të dy llojet e pajisjeve: smartphone dhe desktop. Në këtë mënyrë, përmbajtja dhe paraqitja janë në skedarë të ndryshëm.

Shfletuesi tregon paraqitje të ndryshme për pajisje të ndryshme. Duke përdorur Media Query, përmbajtjes do i aplikohen rregulla të ndryshme CSS.

Duke ndjekur modelin për ndërtimin fillimisht të versionit për pajisjet smartphone (teknika Mobile First), dizajni i përshtatshëm është ndërtuar në bazë të pajisjeve më të vogla që mund të ketë përdoruesi, siç janë smartphone ose tablet. Kur projektuesi përfundon dizajnin për pajisjet e vogla, ai shton pjesë kodi për çdo madhësi të ekranit.

Dy avantazhet kryesore të teknikës Mobile First:

• Projektuesi bën një plan për atë që është me të vërtetë e nevojshme për tu shfaqë në ekranin më të vogël, dhe më pas ai do të shtojë përmbajtjen për ekranin më të gjerë. Ky rrugëtim ndihmon shumë në ndërtimin e përmbajtjes thelbësore të faqes.
   
• Me teknikën Mobile First, kodi do të jetë i thjeshtë dhe elegant.

Smartphone kanë procesorë më të vegjël, kështu që kodi nuk duhet të jetë kompleks. Më vonë, stile shtesë mund të shtohen për të përshtatur paraqitjen për pajisje me ekran më të madh.

Tipografia është paraqitja e tekstit. Mënyra se si shfaqet një titull në faqe është një faktor kyç për të tërhequr vizitorët, për të mbajtur vëmendjen e tyre dhe për ti inkurajuar që të qëndrojnë më shumë në faqen web.

Gjithashtu, tipografia është e rëndësishme për të theksuar një pjesë teksti. Praktikisht, tipografi e mirë është ajo që përmirëson komunikimin me vizitorin. Vlen për tu theksuar që teksti në faqen e internetit duhet të lexohet lehtësisht.

Më poshtë listohen parametrat e tipografisë, të cilat duhen përcaktuar në fazën e projektimit:

• Fonti i shkrimit
• Madhësia e shkrimit
• Gjerësia e tekstit
• Lartësia Parametri Font i shkrimit jep efektin emocional në leximin të tekstit.

Zakonisht, projektuesit gjejnë Familjen optimale të Fontit, bazuar në temën e faqes së internetit. Tre parametra të tjerë: madhësia e shkrimit, gjerësia e tekstit dhe lartësia përcaktojnë nëse teksti është lehtësisht i lexueshëm.

Në dizajnin e përshtatshëm, tipografia duhet të ndjekë gjithashtu disa rregulla. Projektuesi duhet të rrisë madhësinë e shkrimit kur kalon në një version më të gjerë të ekranit. Kjo, për arsyen se ne tentojmë të lexojmë nga larg kur pajisja është më e madhe.

Gjithashtu, dizajni nuk duhet të ndryshojë proporcionin mes tekstit dhe elementëve të tjerë të faqes. Projektuesi duhet t'i kushtojë vëmendje theksimeve. Duke theksuar një titull, pjesa tjetër e tekstit duhet të mbahet në një madhësi relative që tërheq vizitorin.

Kodi në JavaScript nuk është i detyrueshëm për një dizajn të përshtatshëm.

Është e vërtetë se JavaScript e bën faqen më të bukur dhe më të lehtë për t'u përdorur, por një dizajn plotësisht i përshtatshëm mund të krijohet vetëm me HTML dhe CSS.

Ne ju sugjerojmë që projekti i dizajnit të jetë sa më i thjeshtë.

Smartphone janë pjesë e jetës sonë, janë me ne kudo ku shkojmë. Por, jo gjithmonë jemi në lidhje me internetin. Gjithashtu, shpesh kemi nevojë për informacion sa më të shpejtë.

Duke marrë parasysh të gjitha këto, dizenjimi i versionit Mobile të faqes së internetit nuk është thjesht çeshtje "përshtatja e përmasave", por edhe zgjidhja e shumë problemeve të projektimit në Mobile.

Sfidë është ngarkimi i përmbajtjes së faqes web sa më shpejt që të jetë e mundur, me të gjitha funksionet e saj.

Kjo sfidë është kryesisht për pajisjet smartphone. Versionet për desktop dhe për tablet nuk kanë nevojë për këtë ngarkim të menjëhershëm të faqes. Shpresojmë që ky artikull ju ndihmoi të kuptoni qëllimin kryesor të dizajnit të përshtatshëm.

Nëse jeni ende të paqartë rreth këtij dizajni, mos hezitoni të na pyesni, duke na shkruajtur e-mail.