ድረ-ገጽን ለሞባይል ምቹ (ሪስፖንሲቭ) እንዴት ማድረግ

ድረ-ገጽን ለሞባይል ምቹ ለማድረግ፣ viewport meta tag ጨምር፣ አቀማመጡን መጀመሪያ ለሞባይል በተለዋዋጭ ስፋቶች ገንባ፣ እና በCSS ብሬክፖይንቶች ትላልቅ ማያዎች ላይ እንደገና አደራድር — ዓምዶችን መቆለል፣ ምናሌውን መሰብሰብ፣ ምስሎችን ማስተካከል። ከዚያ እያንዳንዱን ገጽ በስልክ ስፋት ተመልከት፦ በጎን የሚንሸራተት ነገር፣ ትንሽ ጽሑፍ፣ ለመንካት በጣም ትናንሽ ቁልፎች። በAI የተገነባ ጣቢያ ላይ አንድ ግልጽ ጥያቄና በስልክ ቅድመ-እይታ አንድ ማለፊያ ብዙ ጊዜ አብዛኛውን ያስተካክላል።

ሪስፖንሲቭ ዲዛይን በእውነት ምንድነው?

ሪስፖንሲቭ ጣቢያ ለማያው የሚስማማ አንድ የገጾችና URLዎች ስብስብ ይጠቀማል። የተለየ “m.” ጣቢያ ከመሆን ይልቅ CSS አቀማመጡን በተወሰኑ ስፋቶች ይለውጠዋል፤ እነዚህ ብሬክፖይንቶች ይባላሉ። መሠረታዊ ክፍሎቹ፦

• የviewport meta tag የሞባይል አሳሾች የመሣሪያውን እውነተኛ ስፋት እንዲጠቀሙ ይነግራቸዋል።
• ፈሳሽ አቀማመጦች ከቋሚ ፒክስል ስፋቶች ይልቅ መቶኛዎችን፣ flexboxንና gridን ይጠቀማሉ።
• Media queries (ወይም እንደ Tailwind md: ያሉ የማዕቀፍ ክፍሎች) ከተወሰነ ስፋት በላይ አቀማመጡን ይለውጣሉ።
• ተለዋዋጭ ሚዲያ — ምስሎችና ቪዲዮዎች ከኮንቴይነራቸው ጋር ለመስማማት የሚጠበቡ።

ይህ አስፈላጊ ነው ምክንያቱም ብዙ ትራፊክህ በስልክ ሊሆን ይችላል፣ እና Google የገጾችህን የሞባይል ስሪት ስለሚጠቁም። ይዘትና አገናኞች በዴስክቶፕ ላይ ብቻ ካሉ፣ Google ደግሞ ላያያቸው ይችላል።

አማራጮችና ንግድ-ልውውጦች

መጀመሪያ-ለሞባይል ብዙ ጊዜ ቀላል ነው፦ ነጠላ ዓምድ ቀላሉ አቀማመጥ ነው፣ እና ቦታ ሲጨምር ዓምዶችን መጨመር ከማስወገድ ያነሰ ሥራ ነው።

ብዙ ጊዜ የሚሰብሩ ክፍሎች

የviewport tag

ገጽ በስልክ ላይ እንደ ትንሽ የዴስክቶፕ ጣቢያ ከታየ፣ viewport tag የለም፦

<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 ተጠቀም፣ ጽሑፍ እንዲጠቀለል ፍቀድ፣ እና ሰፊ ነገሮች የራሳቸው የመሸብለያ ቦታ ይስጧቸው።

ናቪጌሽን

አምስት የዴስክቶፕ ምናሌ አገናኞች ብዙ ጊዜ በስልክ ላይ አይገቡም። የተለመደው መልስ ፓነል የሚከፍት የምናሌ ቁልፍ ነው። ሁለቱንና ሦስቱን አስፈላጊ ድርጊቶች — “ቀጠሮ”፣ “ጋሪ”፣ “ግባ” — የሚታዩ አድርግ፣ እና ምናሌው በቁልፍ ሰሌዳ እንደሚሠራና በቀላሉ እንደሚዘጋ አረጋግጥ።

ጽሑፍና የመንኪያ ዒላማዎች

• በስልክ ላይ ወደ 16 ፒክስል አካባቢ የሚሆነው የዋና ጽሑፍ ዝቅተኛ ልክ ምክንያታዊ ነው። ትንሽ ጽሑፍ ያላቸው ግብዓቶች iPhone ሲነካ እንዲያጎሉ ያደርጋሉ።
• ቁልፎችንና አገናኞችን ለመምታት ቀላል አድርግ። WCAG 2.2 AA ዝቅተኛ ወሰን 24 በ24 CSS ፒክስል (ወይም በቂ ክፍተት) ነው፤ ወደ 44 ፒክስል አካባቢ ለአውራ ጣት የበለጠ ምቹ ነው።
• በጎን ያሉ አገናኞች መካከል ክፍተት ተው፣ ሰዎች የተሳሳተውን እንዳይነኩ።

ሰንጠረዦችና ውሂብ

ሰፊ ሰንጠረዦች በሪስፖንሲቭ መተግበሪያ ውስጥ በጣም አስቸጋሪው ክፍል ናቸው። አማራጮች፣ በቅድሚያ ቅደም ተከተል፦ በስልክ ላይ ያነሱ ዓምዶች ማሳየት፣ እያንዳንዱን ረድፍ ወደ ካርድ መቀየር፣ ወይም ሰንጠረዡን በአግድም ሊሸብለል በሚችል ኮንቴይነር ውስጥ ማስቀመጥ ከመጀመሪያው ዓምድ ጋር ተስተካክሎ። ሰዎች ምን ማነጻጸር እንዳለባቸው ላይ በመመስረት ምረጥ።

ምስሎችና ሚዲያ

max-width: 100% እና height: auto ተጠቀም፣ ለትናንሽ ማያዎች ትናንሽ ፋይሎችን በsrcset አቅርብ፣ እና የአቀማመጥ መዝለልን ለማስወገድ ስፋትና ቁመት አዘጋጅ። የተካተቱ ቪዲዮዎችና ካርታዎች የምጥጥን ጥምርታቸውን እንዲይዙ ሪስፖንሲቭ መጠቅለያ ያስፈልጋቸዋል። ትናንሽ ምስሎች ገጾችን ፈጣን ያደርጋሉ — ድረ-ገጽህን እንዴት ፈጣን ማድረግ ተመልከት።

ቅጾች

መለያዎችን ከመስኮቹ በላይ ቁልል፣ መስኮቹን ሙሉ ስፋት አድርግ፣ እና ትክክለኛ የግብዓት ዓይነቶችን (type="email"፣ type="tel"፣ inputmode="numeric") ተጠቀም ስልኮች ተዛማጁን ቁልፍ ሰሌዳ እንዲያሳዩ። የመላኪያ ቁልፉን አውራ ጣት ሊደርስበት በሚችልበት ቦታ አስቀምጥ፣ እና ቁልፍ ሰሌዳው ሲከፈት እንዲታይ አድርግ።

በማንዣበብ ብቻ የሚሠሩ ድርጊቶች

ስልኮች ማንዣበብ የላቸውም። በማንዣበብ ብቻ የሚታዩ ቲፕስ፣ ተቆልቋይ ምናሌዎችና ቅድመ-እይታዎች ለመንኪያ ተጠቃሚዎች የማይታዩ ናቸው። በመንካትም እንዲሠሩ አድርጋቸው።

የሚሠሩ ጥያቄዎች

ለአዲስ ግንባታ፣ ከመጀመሪያው ይበሉት፦

ይህን መጀመሪያ-ለሞባይል ገንባ። በስልኮች ነጠላ ዓምድ፣ ከታብሌት ስፋት ሁለት ዓምዶች፣ በዴስክቶፕ ሙሉ አቀማመጥ። በ320 ፒክስል ስፋት በጎን መሸብለል የለም፣ የዋና ጽሑፍ ቢያንስ 16 ፒክስል፣ የመንኪያ ዒላማዎች ቢያንስ 44 ፒክስል፣ በትናንሽ ማያዎች የምናሌ ቁልፍ፣ እና በስልኮች ወደ ካርዶች የሚቀየሩ ሰንጠረዦች።

ለነባር ገጽ፣ የምታየውን ግለጽ፦

በስልኮች የ/pricing ገጽ በጎን ይሸበለላል፣ እና ሦስቱ የዋጋ ካርዶች ጎን ለጎን ተጨምቀዋል። ከ768 ፒክስል በታች ካርዶቹን በአቀባዊ ቁልል፣ የንጽጽሩን ሰንጠረዥ በራሱ ኮንቴይነር ውስጥ በአግድም እንዲሸበለል አድርግ የባህሪው ዓምድ ተስተካክሎ፣ እና የዴስክቶፕ አቀማመጡን አትቀይር።

ሁሉንም ገጾች በ375 ፒክስል ስፋት ፈትሽ። የሚሞሉ፣ የሚደራረቡ፣ ከ16 ፒክስል ጽሑፍ ወይም ከ44 ፒክስል የመንኪያ ዒላማ ያነሱ፣ ወይም በማንዣበብ ብቻ የሚሠሩ ነገሮችን ዘርዝር፣ ከዚያ እያንዳንዱን አስተካክል።

በደረጃ

1. የviewport tagው በገጹ head ውስጥ መኖሩን አረጋግጥ።
2. በ320–375 ፒክስል ስፋት ፈትሽ በአሳሹ የመሣሪያ ሁነታ ወይም በስልክ-መጠን ቅድመ-እይታ። እያንዳንዱን ገጽ ከላይ እስከ ታች አሸብልል።
3. መጀመሪያ በጎን መሸብለልን አስተካክል። በጣም ሰፊ የሆነውን ኤለመንት ፈልግ፤ ይህ ካልጠፋ ሌላው ነገር ለመፍረድ ከባድ ነው።
4. ናቪጌሽኑን አስተካክል፦ የምናሌ ቁልፍ፣ ቁልፍ ድርጊቶች የሚታዩ።
5. ጽሑፍ፣ የመንኪያ ዒላማዎችና ቅጾች በእያንዳንዱ ዋና ፍሰት ላይ ፈትሽ — ምዝገባ፣ ፍለጋ፣ ክፍያ፣ ያግኙን።
6. ሰንጠረዦችንና ሚዲያን አያያዝ፦ ካርዶች ወይም የመሸብለያ ኮንቴይነሮች፣ ሪስፖንሲቭ ምስሎችና መክተቶች።
7. በመሃከል ያሉትን መጠኖች ፈትሽ። ስፋቱን ከስልክ ወደ ዴስክቶፕ በዝግታ ጎትት፤ አቀማመጦች ብዙ ጊዜ በታብሌት ስፋት አካባቢ ይሰበራሉ።
8. በእውነተኛ ስልክ ፈትሽ። ኢሙሌተሮች እንደ በስክሪን ቁልፍ ሰሌዳ ቁልፍ መሸፈን፣ ኖትቾች፣ እና በሞባይል ዳታ ጣቢያው ምን ያህል ፈጣን እንደሚሰማው ያጣሉ።

የተለመዱ ስህተቶች

• በአንድ የስልክ መጠን ብቻ መፈተሽ። ትንሽ ስልክ፣ ትልቅ ስልክና ታብሌት ፈትሽ።
• ይዘትን በሞባይል መደበቅ ለመግጠም። Google የሞባይሉን ስሪት ይጠቁማል፣ የስልክ ተጠቃሚዎችም ተመሳሳይ መረጃ ይፈልጋሉ።
• ዙምን ማሰናከል በviewport tag።
• ለዴስክቶፕ የተመጠኑ ምስሎች በስልኮች ላይ፣ የመጫኛ ጊዜና ዳታ ያስከፍላሉ።
• የተጣበቁ ቋሚ ኤለመንቶች ይከማቻሉ፦ ተጣባቂ ራስጌ፣ የኩኪ ባነር እና የቻት አረፋ ግማሹን የስልክ ማያ ሊሸፍኑ ይችላሉ።
• ሊዘጉ የማይችሉ ፖፕ-አፖች በትንሽ ማያ ላይ ምክንያቱም የመዝጊያ ቁልፉ ከማያው ውጭ ነው።

የሞባይል ዝርዝር

• viewport meta tag አለ፤ ዙም አልተከለከለም
• በ320 ፒክስል በየትኛውም ገጽ በጎን መሸብለል የለም
• ዋና ጽሑፍ ~16 ፒክስል፤ ግብዓቶች ዙም አያስነሱም
• የመንኪያ ዒላማዎች በቂ ትልቅና የተራራቁ
• ምናሌው በስልኮችና በቁልፍ ሰሌዳ ይሠራል
• ሰንጠረዦች በስልኮች ይነበባሉ (ካርዶች፣ ያነሱ ዓምዶች ወይም የመሸብለያ ኮንቴይነር)
• ምስሎችና መክተቶች ይጠበባሉ፤ ትክክለኛ መጠን ያላቸው ፋይሎች ይቀርባሉ
• ቅጾች ትክክለኛ የግብዓት ዓይነቶችን ይጠቀማሉ፤ የመላኪያ ቁልፉ ይደረሳል
• ለመጠቆም ጥገኛ የሆነ ጠቃሚ ነገር የለም
• ቢያንስ በአንድ እውነተኛ ስልክ ተፈትኗል

ሪስፖንሲቭ አቀማመጥ የተደራሽነት አካልም ነው፦ WCAG ይዘት በ320 ፒክስል ስፋትና በ200% ዙም እንዲሠራ ይጠይቃል። በየቀኑ በስልካቸው የሚጠቀሙበት መተግበሪያ እየገነባህ ከሆነ፣ ለሞባይል ምቹ የድር መተግበሪያ እንዴት መገንባት ይበልጥ ይሄዳል፣ የሚጫኑ PWAዎችን ጨምሮ።

ሪስፖንሲቭ ዲዛይን በMythex

Mythex ሪስፖንሲቭ የድር መተግበሪያዎችን ይገነባል፤ በPro ዕቅድ ላይ ደግሞ ወደ Android እና iPhone መተግበሪያዎች ሊጠቀለሉ ይችላሉ። በስራ ቦታው ውስጥ፣ ከPreview በላይ ያለውን የስልክ አዶ (Switch to Mobile) ጠቅ አድርግ መተግበሪያህን በስልክ መጠን ፍሬም ለማየት፣ እና የፍሬሙን ጠርዝ ጎትት ሌሎች ስፋቶችን ለመሞከር (ቅድመ-እይታና ኮድ)። ሰነዱ በሞባይል ሪስፖንሲቭ ጥያቄዎች ውስጥ ትንሽ ስክሪን አቀማመጥን ለማስተካከል አጭር መነሻ ጥያቄ አለው። በእውነተኛ ስልክም ፈትሽ — የታተመውን URL ክፈት፣ ወይም የቅድመ-እይታ አገናኝ አጋርተህ በስልክህ ክፈተው።

ጥያቄዎች