ટેબ્લેટ્સ અને મોબાઇલ ફોન્સ દ્વારા ઇન્ટરનેટનો વપરાશ કરનારા વપરાશકર્તાઓમાં વધારો થઈ રહ્યો છે. આ, જેમ તમે પહેલાથી જાણો છો, તેનો અર્થ એ છે કે તે ફક્ત આપણા કમ્પ્યુટર પર સારું લાગે તેવું સારું વેબ પૃષ્ઠ ડિઝાઇન કરવા માટે પૂરતું નથી: તે દરેક મોબાઇલ ડિવાઇસ પર પણ જોવાનું રહેશે. મુશ્કેલી? વિવિધ સ્ક્રીન કદ અને ઠરાવો. એટલા માટે તે ડિઝાઇન બનાવવી એટલી મુશ્કેલ છે કે જે બધા માધ્યમો (પ્રખ્યાત) ને યોગ્ય રીતે સ્વીકારે પ્રતિભાવ ડિઝાઇન, તરીકે ભાષાંતર અનુકૂલનશીલ ડિઝાઇન).
આ લાક્ષણિકતાઓ સાથે ડિઝાઇન બનાવતી વખતે ધ્યાનમાં રાખવા માટે અહીં કેટલીક ટીપ્સ આપી છે. ધ્યાન આપો!
અનુકૂલનશીલ ડિઝાઇન માટેની ટીપ્સ
- એક સરળ નમૂના બનાવોસરળ દ્વારા મારો અર્થ નહિતર નથી. હું વિશે વાત કરું છું માળખું તમારી વેબસાઇટનું એચટીએમએલ: તે જેટલું સ્પષ્ટ છે તે વધુ સારું છે. ધ્યાનમાં રાખો કે કમ્પ્યુટર સ્ક્રીન ત્રણ icalભી કumnsલમ બંધબેસશે; મોબાઇલની સ્ક્રીન પર, તમે ફક્ત એક જ ફીટ કરશો. તેના વિશે વિચારો અને તમે તત્વોને કેવી રીતે સ્થાન આપશો.
- બિનજરૂરી બધું કાી નાખોJQuery અસરો, ફ્લેશ એનિમેશન અને તમારા પૃષ્ઠના લોડિંગને ધીમું પાડતા કોઈપણ અન્ય કોડને ટાળો. તમારી પાસે આ પ્રકારની ઓછી સામગ્રી, ઝડપી વેબ લોડ થશે.
- શૈલી વ્યાખ્યાયિત કરો દરેક "કદ" માટે CSSએક નાના સી.એસ.એસ., સ્મોલ.એસ.એસ., અને બી.જી.એસ.એસ. (ઉદાહરણ તરીકે) બનાવો જે તેના પર જોયેલા ડિવાઇસના આધારે ચાલે છે. દાખ્લા તરીકે:
@ ઇમ્પોર્ટ યુઆરએલ (ટિની.એસ.એસ.) (મિનિટ-પહોળાઈ: 300 પીએક્સ);
@ ઇમ્પોર્ટ યુઆરએલ (સ્મોલ સીએસએસ) (મિનિટ-પહોળાઈ: 600 પીએક્સ);
@ ઇમ્પોર્ટ યુઆરએલ (બિગ સીએસએસ) (મિનિટ-પહોળાઈ: 900 પીએક્સ);
- સૌથી વધુ ઉપયોગમાં લેવાતા ઠરાવો320px/480px/720px/768px/900px/1024px
- તમારા નમૂનાને ફ્લેક્સિબલ બનાવોજ્યારે પણ તમે કરી શકો, નિયત માત્રાને બદલે ટકાવારી સાથે કામ કરો. અહીં કેટલાક સંદર્ભ સમકક્ષ છે: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- ટાઇપોગ્રાફી પહેલા કરતા વધુ મહત્વપૂર્ણ કેટલીકવાર તમારી ડિવાઇસની સ્ક્રીન એટલી નાનો હોઇ શકે છે કે તમે જે જુઓ તે ટેક્સ્ટ છે. તેથી જ આપણે અમારી સાઇટ પરના શ્રેષ્ઠ ફોન્ટ્સને ખૂબ કાળજીપૂર્વક પસંદ કરવા પડશે, જેથી જ્યારે તેઓ કદમાં ઘટાડો થાય ત્યારે તેઓ સુવાચ્યતા ગુમાવતા નહીં. આ ઉપરાંત, આપણે જાણવું જોઈએ કે વ્યક્તિત્વ સાથે અન્ય તટસ્થ ફ personalityન્ટ્સને કેવી રીતે જોડવું, જે વેબને આવશ્યક પાત્ર આપે છે. તેથી, પ્રથમ ટીપ એ છે કે તમે જે ફોન્ટ્સનો ઉપયોગ કરવા જઈ રહ્યા છો તે પસંદ કરવા માટે તમે સમય પસાર કરો છો.
- ઉપયોગની ઉચ્ચ ગુણવત્તાની છબીઓજગ્યા ઓછી થતાં, છબીઓ તેની સાથે રહેશે. જેઓ ઘટાડો થાય ત્યારે ગુણવત્તા ગુમાવતા નથી, અને જ્યારે માપવામાં આવે છે ત્યારે તે જ કાર્ય કરે છે તે પસંદ કરો. નબળી ગુણવત્તાવાળી છબી તમારી વેબસાઇટને ખરાબ દેખાશે.
- કે તમારી છબીઓ હંમેશા જોવા મળે છે ભરેલુંતમારા CSS માં img (પહોળાઈ: 100%;) કોડ ઉમેરીને તમારા ફોટાઓને કાપી નાખતા અટકાવો. આ રીતે, તમે ડિવાઇસને ઈમેજને આપવામાં આવતી heightંચાઇને ફરીથી ગણતરી કરવાનું કહી રહ્યા છો જેથી તેની પહોળાઈ એકસો ટકા જોઇ શકાય.
- બધા નીચા સમાન URLWww.mysite.com / મોબાઇલ જેવા સબડોમેન્સ વિશે ભૂલી જાઓ, કારણ કે રુટ ફોલ્ડરમાં સમાન ઇન્ડેક્સ. Html ફાઇલ બધા ઉપકરણો માટે કાર્ય કરશે (જો તમે અનુકૂલનશીલ ડિઝાઇન યોગ્ય રીતે કરો છો). તમે ફાયદો પહેલાથી જ જાણો છો: ઓછા સબડોમેન્સ, પૃષ્ઠ લોડ ઝડપી થશે.
- સપોર્ટનો લાભ લો: કલ્પનાશીલ બનો આઇપેડ અથવા મોબાઇલ ફોનથી ડેસ્કટ .પ કમ્પ્યુટરથી વેબસાઇટને toક્સેસ કરવી તે સમાન નથી. પ્રથમ સાથે, તમે શાંત અને શાંત રીતે નેવિગેટ કરશો. બાદમાં સાથે, તમે તે નિષ્ક્રિય કલાકોમાં કરી શકશો અને કંટાળો આવતાની સાથે જ વિંડો બંધ કરી દેશો. વપરાશકર્તાની મનોરંજન કરવા આ શરતોનો લાભ લો અને તે થોડીવારમાં તેમને આનંદ કરો કે તેઓ તમને સમર્પિત કરશે. કદાચ જ્યારે તે ઘરે પહોંચશે ત્યારે તે તમને વધુ હળવાશથી મુલાકાત લેવાનું નક્કી કરશે.
- પ્રેરણા મળી ડિજિટલ પ્રકાશનોમાં, તમને આશ્ચર્ય થશે કે આ સલાહ શા માટે છે. બહુજ સરળ: ડિજિટલ સામયિકો (સારું) સપોર્ટનો લાભ કેવી રીતે લેવો તે જાણો અને તેમની ડિઝાઇન ખૂબ હોશિયાર છે. તેમના દ્વારા પ્રેરણા લો અને એક વેબસાઇટ બનાવો જે છોડી દેવાનું મુશ્કેલ છે.
વધુ મહિતી - ડિજિટલ સામયિકો
સોર્સ - સ્પ્લિયો, 960.gs, સ્તંભિક
એવી વસ્તુઓ છે જે હું ખૂબ સહમત નથી.
બિંદુ 5 માં ... 200 પીએક્સ = 15,38% થી અને નીચેના લોકો ... આ સંદર્ભ તુલના કોઈપણ પેરેંટલ પગલા વગર કરી શકાતી નથી, પિક્સેલ્સ દીઠ કદ એ ટકાવારી જેવો સાપેક્ષ માપ નથી!
છબીઓ પહોળાઈ સાથે સ્પષ્ટ કરો: 100% ખોટું, મને નથી લાગતું કે તે કોઈ ભલામણ હોવી જોઈએ. છબીઓ તેમની પહોળાઈ અને heightંચાઇ સાથે તેમને વધુ સારી રીતે વ્યાખ્યાયિત કરે છે, તેથી સર્વર માહિતીને પ્રક્રિયા કરવા માટે ઓછો સમય લે છે (તેના કદની ગણતરી કરવી જરૂરી નથી) અને અમે પૃષ્ઠની લોડિંગ ગતિમાં સુધારો કરીએ છીએ (જે અનુકૂલનશીલ અથવા પ્રતિભાવપૂર્ણ વેબમાં ખૂબ મહત્વપૂર્ણ છે) ડિઝાઇન).
હું પહેલેથી જ શામેલ હોત, જોકે તે નાકનું કામ છે ... રેટિના સ્ક્રીનો માટેની છબીઓ. જો આપણે રિસ્પોન્સિવ વેબ ડિઝાઇન કરવા માંગતા હો, તો રેટિના ડિસ્પ્લે માટે છબીઓનો ઉપયોગ કરવો ફરજિયાત છે, કેમ કે મોબાઈલ અને ટેબ્લેટના viewsંચા દૃશ્યો આ સ્ક્રીનોનો ઉપયોગ કરે છે. તેથી અર્ધ થ્રોટલ પર તેમના માટે ડિઝાઇનમાં પ્રયત્નો મૂકવાનો કોઈ અર્થ નથી.
બાકીના માટે સારું
બિંદુ 5 માં, તેઓ તમને સંદર્ભમાં મૂકે છે અને 1300, 3 અને 200 માંથી એક, 300 કumnsલમવાળા 1000px ના કુલ લેઆઉટ વિશે તમને કહે છે.
જો તમે તેને ટકાવારીઓ પર પસાર કરો છો, તો તેમના કિસ્સામાં તે તમારા કહેવા મુજબ છે, 15,38% ((200 * 100) / 1300) (દશાંશ નીચે, આંતરરાષ્ટ્રીય સિસ્ટમ: પી)
પરંતુ જો આપણે 500 પીએક્સ લેઆઉટ વિશે વાત કરીએ અને અમારી પાસે 3 ક colલમ, 200 માંથી એક, 200 ની બીજી અને 100 પીએક્સની બીજી, ટકાવારી હવે સમાન નથી, આ કિસ્સામાં 200 પીએક્સ = 40% ((200 * 100) / 500)
તે હશે: 200px = 40% અને 100px = 10%
ચાલો, મેં કહ્યું તેમ, તે તમે સંદર્ભિત કરો છો તે સંદર્ભ નથી, તે ફક્ત 1300 પીએક્સ લેઆઉટ પરનો સંદર્ભ છે.
સાદર
શું નિષ્ફળતા, તમે વિશ્વમાં એકદમ સાચા છો! ફરીવાર આભાર ;)