વેબસાઇટને મોબાઇલ રિસ્પોન્સિવ કેવી રીતે બનાવવી

વેબસાઇટને મોબાઇલ રિસ્પોન્સિવ બનાવવા માટે, વ્યુપોર્ટ મેટા ટેગ ઉમેરો, લવચીક પહોળાઈ સાથે મોબાઇલ-ફર્સ્ટ લેઆઉટ બનાવો, અને મોટી સ્ક્રીન પર તેને ફરીથી ગોઠવવા CSS બ્રેકપોઇન્ટ વાપરો — કૉલમ એક નીચે એક ગોઠવવી, મેનુ સંકોચવું, અને ઇમેજને ફિટ કરવા સ્કેલ કરવી. પછી દરેક પેજને ફોનની પહોળાઈ પર તપાસો: બાજુમાં સ્ક્રોલ, નાનું લખાણ, અને ટેપ કરવા માટે બહુ નાના બટન. AI થી બનેલી સાઇટ પર, એક સ્પષ્ટ પ્રોમ્પ્ટ અને ફોન-સાઇઝ પ્રિવ્યૂમાં એક પાસ મોટાભાગનું ઠીક કરે છે.

રિસ્પોન્સિવ ડિઝાઇન ખરેખર શું છે

રિસ્પોન્સિવ સાઇટ સ્ક્રીનને અનુકૂળ થતા એક જ સેટ પેજ અને URL વાપરે છે. અલગ "m." સાઇટને બદલે, CSS ચોક્કસ પહોળાઈએ લેઆઉટ બદલે છે, જેને બ્રેકપોઇન્ટ કહેવાય છે. તેના બિલ્ડિંગ બ્લોક્સ:

• વ્યુપોર્ટ મેટા ટેગ મોબાઇલ બ્રાઉઝરને ડિવાઇસની વાસ્તવિક પહોળાઈ વાપરવાનું કહે છે.
• ફ્લુઇડ લેઆઉટ નિશ્ચિત પિક્સલ પહોળાઈને બદલે ટકાવારી, flexbox અને grid વાપરે છે.
• Media queries (અથવા Tailwind ના md: જેવા ફ્રેમવર્ક ક્લાસ) આપેલી પહોળાઈથી ઉપર લેઆઉટ બદલે છે.
• લવચીક મીડિયા — ઇમેજ અને વીડિયો જે તેમના કન્ટેનરમાં ફિટ થવા માટે સંકોચાય છે.

તે મહત્ત્વનું છે કારણ કે તમારો ઘણો ટ્રાફિક ફોન પર હોવાની શક્યતા છે, અને Google તમારા પેજનું મોબાઇલ વર્ઝન ઇન્ડેક્સ કરે છે. જો કન્ટેન્ટ કે લિંક ફક્ત ડેસ્કટોપ પર હોય, તો Google તેમને પણ જોઈ શકશે નહીં.

વિકલ્પો અને ટ્રેડ-ઓફ

મોબાઇલ-ફર્સ્ટ સામાન્ય રીતે સરળ છે: એક કૉલમ સૌથી સરળ લેઆઉટ છે, અને જગ્યા વધે તેમ કૉલમ ઉમેરવી તેમને દૂર કરવા કરતાં ઓછું કામ છે.

જે ભાગો સામાન્ય રીતે તૂટે છે

વ્યુપોર્ટ ટેગ

જો પેજ ફોન પર નાની ડેસ્કટોપ સાઇટ જેવું દેખાય, તો વ્યુપોર્ટ ટેગ ગુમ છે:

<meta name="viewport" content="width=device-width, initial-scale=1">

maximum-scale=1 અથવા user-scalable=no ઉમેરશો નહીં. પિન્ચ-ઝૂમ બ્લૉક કરવાથી ઓછી દૃષ્ટિ ધરાવતા લોકો માટે સાઇટ વાપરવી વધુ મુશ્કેલ બને છે.

નિશ્ચિત પહોળાઈ અને આડું સ્ક્રોલ

સૌથી સામાન્ય રિસ્પોન્સિવ બગ સ્ક્રીન કરતાં પહોળી વસ્તુ છે: નિશ્ચિત width: 1200px કન્ટેનર, પહોળું ટેબલ, લાંબી URL અથવા કોડ બ્લોક, max-width: 100% વિનાની ઇમેજ. પછી આખું પેજ બાજુમાં સ્ક્રોલ થાય છે. width ને બદલે max-width વાપરો, ટેક્સ્ટને રૅપ થવા દો, અને પહોળી વસ્તુઓને પોતાનો સ્ક્રોલ વિસ્તાર આપો.

નેવિગેશન

ડેસ્કટોપ મેનુની પાંચ લિંક ભાગ્યે જ ફોનમાં ફિટ થાય છે. સામાન્ય જવાબ એ છે કે મેનુ બટન જે પેનલ ખોલે. સૌથી મહત્ત્વની બે-ત્રણ ક્રિયાઓ — "Book", "Cart", "Sign in" — દૃશ્યમાન રાખો, અને ખાતરી કરો કે મેનુ કીબોર્ડ સાથે કામ કરે અને સહેલાઈથી બંધ થાય.

ટેક્સ્ટ અને ટેપ ટાર્ગેટ

• ફોન પર લગભગ 16 px નું બૉડી ટેક્સ્ટ સમજદાર ન્યૂનતમ છે. નાના ટેક્સ્ટવાળા ઇનપુટ ટેપ કરવા પર iPhone ઝૂમ ઇન કરે છે.
• બટન અને લિંક સરળતાથી ટેપ થઈ શકે તેવા બનાવો. WCAG 2.2 AA ન્યૂનતમ 24 બાય 24 CSS પિક્સલ (અથવા પૂરતું અંતર) નક્કી કરે છે; આંગળી માટે લગભગ 44 પિક્સલ વધુ આરામદાયક છે.
• લોકો ખોટી લિંક ન દબાવે તે માટે નજીકની લિંક વચ્ચે જગ્યા રાખો.

ટેબલ અને ડેટા

પહોળા ટેબલ રિસ્પોન્સિવ એપનો સૌથી અઘરો ભાગ છે. વિકલ્પો, પસંદગીના ક્રમમાં: ફોન પર ઓછી કૉલમ બતાવો, દરેક પંક્તિને કાર્ડમાં ફેરવો, અથવા ટેબલને આડું સ્ક્રોલ થતા કન્ટેનરમાં મૂકો જેની પ્રથમ કૉલમ પિન થયેલી હોય. લોકોને શું સરખાવવાની જરૂર છે તેના આધારે પસંદ કરો.

ઇમેજ અને મીડિયા

max-width: 100% અને height: auto વાપરો, srcset વડે નાની સ્ક્રીન પર નાની ફાઇલો આપો, અને લેઆઉટ જમ્પ ટાળવા માટે width અને height સેટ કરો. એમ્બેડ કરેલા વીડિયો અને મેપને તેમનો આસ્પેક્ટ રેશિયો જાળવવા રિસ્પોન્સિવ રૅપરની જરૂર છે. નાની ઇમેજ પેજને પણ ઝડપી બનાવે છે — જુઓ તમારી વેબસાઇટને ઝડપી કેવી રીતે બનાવવી.

ફોર્મ

લેબલને ફીલ્ડ્સની ઉપર ગોઠવો, ફીલ્ડ્સને પૂરી પહોળાઈના બનાવો, અને યોગ્ય input પ્રકારો વાપરો (type="email", type="tel", inputmode="numeric"), જેથી ફોન મેળ ખાતું કીબોર્ડ બતાવે. સબમિટ બટન એવી જગ્યાએ રાખો જ્યાં આંગળી પહોંચે, અને કીબોર્ડ ખૂલે ત્યારે તે દૃશ્યમાન રહે.

ફક્ત હોવર પર આધારિત ક્રિયાઓ

ફોન હોવર કરતા નથી. ફક્ત હોવર પર દેખાતા ટૂલટિપ, ડ્રોપડાઉન અને પ્રિવ્યૂ ટચ યુઝર્સ માટે અદૃશ્ય છે. તેમને ટેપ પર પણ કામ કરાવો.

કામ કરતા પ્રોમ્પ્ટ

નવા બિલ્ડ માટે, શરૂઆતમાં જ કહો:

આને મોબાઇલ-ફર્સ્ટ બનાવો. ફોન પર એક કૉલમ, ટેબ્લેટ પહોળાઈથી બે કૉલમ, ડેસ્કટોપ પર પૂરું લેઆઉટ. 320 px પહોળાઈ પર આડું સ્ક્રોલ નહીં, બૉડી ટેક્સ્ટ ઓછામાં ઓછું 16 px, ટેપ ટાર્ગેટ ઓછામાં ઓછા 44 px, નાની સ્ક્રીન પર મેનુ બટન, અને ફોન પર કાર્ડમાં ફેરવાતા ટેબલ.

હાલના પેજ માટે, જે તમે જુઓ છો તે વર્ણવો:

ફોન પર /pricing પેજ બાજુમાં સ્ક્રોલ થાય છે અને ત્રણ પ્લાન કાર્ડ એકબીજા પાસે દબાયેલા છે. 768 px થી નીચે કાર્ડ ઊભા ગોઠવો, સરખામણી ટેબલને તેના પોતાના કન્ટેનરમાં આડું સ્ક્રોલ થવા દો જેની ફીચર કૉલમ પિન હોય, અને ડેસ્કટોપ લેઆઉટ બદલશો નહીં.

દરેક પેજ 375 px પહોળાઈ પર તપાસો. જે કંઈ ઓવરફ્લો થાય, ઓવરલેપ થાય, 16 px કરતાં નાના ટેક્સ્ટ કે 44 px કરતાં નાના ટેપ ટાર્ગેટ હોય, અથવા ફક્ત હોવર પર કામ કરે, તેની યાદી બનાવો, પછી દરેકને ઠીક કરો.

પગલું દર પગલું

1. પેજ હેડમાં વ્યુપોર્ટ ટેગ છે તે ખાતરી કરો.
2. 320–375 px પહોળાઈ પર ટેસ્ટ કરો બ્રાઉઝરના ડિવાઇસ મોડ અથવા ફોન-સાઇઝ પ્રિવ્યૂમાં. દરેક પેજ ઉપરથી નીચે સુધી સ્ક્રોલ કરો.
3. પહેલા આડું સ્ક્રોલ ઠીક કરો. જે એલિમેન્ટ બહુ પહોળું છે તે શોધો; તે ન જાય ત્યાં સુધી બાકીનું આકારણ મુશ્કેલ છે.
4. નેવિગેશન ગોઠવો: મેનુ બટન, મુખ્ય ક્રિયાઓ દૃશ્યમાન.
5. દરેક મુખ્ય ફ્લો પર ટેક્સ્ટ, ટેપ ટાર્ગેટ અને ફોર્મ તપાસો — સાઇન અપ, સર્ચ, ચેકઆઉટ, સંપર્ક.
6. ટેબલ અને મીડિયા સંભાળો: કાર્ડ અથવા સ્ક્રોલ કન્ટેનર, રિસ્પોન્સિવ ઇમેજ અને એમ્બેડ.
7. વચ્ચેના કદ તપાસો. પહોળાઈને ફોનથી ડેસ્કટોપ સુધી ધીમે ખેંચો; ટેબ્લેટ પહોળાઈની આસપાસ લેઆઉટ ઘણીવાર તૂટે છે.
8. વાસ્તવિક ફોન પર ટેસ્ટ કરો. એમ્યુલેટર એવી વસ્તુઓ ચૂકી જાય છે જેમ કે સ્ક્રીન કીબોર્ડ બટનને ઢાંકે, નૉચ, અને મોબાઇલ ડેટા પર સાઇટ કેટલી ઝડપી લાગે.

સામાન્ય ભૂલો

• ફક્ત એક ફોન સાઇઝ પર ટેસ્ટ કરવું. નાનો ફોન, મોટો ફોન અને ટેબ્લેટ તપાસો.
• બંધબેસાડવા માટે મોબાઇલ પર કન્ટેન્ટ છુપાવવું. Google મોબાઇલ વર્ઝન ઇન્ડેક્સ કરે છે, અને ફોન વપરાશકર્તાઓને એ જ માહિતી જોઈએ છે.
• વ્યુપોર્ટ ટેગમાં ઝૂમ બંધ કરવું.
• ફોન પર ડેસ્કટોપ-સાઇઝ ઇમેજ, જે લોડ સમય અને ડેટાનો ખર્ચ કરે છે.
• નિશ્ચિત-પોઝિશન એલિમેન્ટનો ઢગલો: સ્ટિકી હેડર, કૂકી બેનર અને ચેટ બબલ અડધી ફોન સ્ક્રીન ઢાંકી શકે છે.
• બંધ ન થઈ શકે તેવા પોપ-અપ નાની સ્ક્રીન પર, કારણ કે બંધ કરવાનું બટન સ્ક્રીનની બહાર છે.

મોબાઇલ ચેકલિસ્ટ

• વ્યુપોર્ટ મેટા ટેગ હાજર; ઝૂમ બંધ નથી
• કોઈ પણ પેજ પર 320 px પર આડું સ્ક્રોલ નહીં
• બૉડી ટેક્સ્ટ લગભગ 16 px; ઇનપુટ ઝૂમ ટ્રિગર કરતા નથી
• ટેપ ટાર્ગેટ આરામથી મોટા અને અંતરે
• મેનુ ફોન પર અને કીબોર્ડ સાથે કામ કરે
• ફોન પર ટેબલ વાંચી શકાય (કાર્ડ, ઓછી કૉલમ અથવા સ્ક્રોલ કન્ટેનર)
• ઇમેજ અને એમ્બેડ સ્કેલ થાય; યોગ્ય કદની ફાઇલો
• ફોર્મ યોગ્ય input પ્રકારો વાપરે; સબમિટ બટન પહોંચી શકાય તેવું
• કંઈ પણ મહત્ત્વનું હોવર પર આધારિત નથી
• ઓછામાં ઓછા એક વાસ્તવિક ફોન પર ટેસ્ટ

રિસ્પોન્સિવ લેઆઉટ એક્સેસિબિલિટી નો પણ ભાગ છે: WCAG ઇચ્છે છે કે કન્ટેન્ટ 320 px પહોળાઈ પર અને 200% ઝૂમ પર કામ કરે. જો તમે એવી એપ બનાવી રહ્યા હો જે લોકો રોજ ફોન પર વાપરશે, તો મોબાઇલ-ફ્રેન્ડલી વેબ એપ કેવી રીતે બનાવવી વધુ આગળ જાય છે, ઇન્સ્ટોલ થઈ શકે તેવી PWA સહિત.

Mythex પર રિસ્પોન્સિવ ડિઝાઇન

Mythex રિસ્પોન્સિવ વેબ એપ બનાવે છે, અને Pro પર તેમને Android અને iPhone એપ તરીકે રેપ કરી શકે છે. વર્કસ્પેસમાં, Preview ની ઉપરના ફોન આઇકન (Switch to Mobile) પર ક્લિક કરો અને તમારી એપ ફોન-સાઇઝ ફ્રેમમાં જુઓ, અને અન્ય પહોળાઈ અજમાવવા ફ્રેમની ધાર ખેંચો (Preview and Code). નાની સ્ક્રીન પરના લેઆઉટને ઠીક કરવા માટે ટૂંકો સ્ટાર્ટર પ્રોમ્પ્ટ મોબાઇલ-રિસ્પોન્સિવ પ્રોમ્પ્ટ માં છે. વાસ્તવિક ફોન પર પણ તપાસો — પબ્લિશ થયેલું URL ખોલો, અથવા પ્રિવ્યૂ લિંક શેર કરીને તમારા ફોન પર ખોલો.

પ્રશ્નો