સ્ટાન્ડર્ડ સાઈટ કદ: સુવિધાઓ, જરૂરિયાતો અને ભલામણો

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

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

રુનેટ માટે સાઇટની પ્રમાણભૂત પહોળાઈ પિક્સેલમાં છે

અનુકૂલનશીલ લેઆઉટના વિકાસ પહેલાં, એક સામૂહિક ઘટના એક હજાર પિક્સેલની પહોળાઇ ધરાવતી સાઇટનું વિકાસ હતું. આ આંકડો એક સરળ કારણોસર પસંદ કરવામાં આવ્યો હતો - સાઇટને કોઈપણ સ્ક્રીન પર મૂકવા માટે. અને આનું પોતાનું તર્ક છે, પરંતુ ચાલો ધારીએ કે વ્યક્તિ પાસે ડેસ્કટોપ પર ઓછામાં ઓછી એક એચડી-મોનિટર છે. આ કિસ્સામાં, તમારું લેઆઉટ સ્ક્રીનની મધ્યમાં એક નાનું પટ્ટી જેવું લાગશે, જ્યાં બધું એક ખૂંટોમાં ભરાયેલા છે, અને બાજુઓ પર વિશાળ અવશેષ જગ્યા છે. હવે ચાલો ધારીએ કે કોઈ વ્યક્તિ ટેબ્લેટથી તમારી વેબસાઇટ પર સ્ક્રીન 800 પિક્સલ પહોળા સાથે આવી છે, અને સેટિંગ્સમાં "વેબસાઈટનું સંપૂર્ણ સંસ્કરણ બતાવો" છે. આ કિસ્સામાં, તમારી સાઇટ ખોટી રીતે પ્રદર્શિત થશે, કારણ કે તે ફક્ત સ્ક્રીનમાં ફિટ થતી નથી.

આ વિચારણાઓમાંથી, આપણે એ નિષ્કર્ષ કરી શકીએ છીએ કે લેઆઉટની નિશ્ચિત પહોળાઈ અમને બરાબર નથી અને તે બીજી રીત શોધી શકે છે. ચાલો દરેક સ્ક્રીન પહોળાઈ માટે એક અલગ લેઆઉટના વિચારને વિશ્લેષણ કરીએ.

બધા પ્રસંગો માટે લેઆઉટનો

જો તમે બજાર પર હાજર તમામ સ્ક્રીન માપો માટે લેઆઉટ બનાવવા માટેની વ્યૂહરચના તરીકે પસંદ કર્યું છે, તો તમારી સાઇટ સમગ્ર ઇન્ટરનેટ પર સૌથી અનન્ય બનશે. છેવટે, દરેક વિકલ્પ માટે ચોક્કસ ગોઠવણ કરવાના પ્રયાસરૂપે, આજે ઉપકરણોની સંપૂર્ણ શ્રેણીને આવરી લેવા માટે તે અશક્ય છે. પરંતુ જો તમે મોનિટર અને ડિવાઇસ સ્ક્રીનના સૌથી લોકપ્રિય ઠરાવો પર ધ્યાન કેન્દ્રિત કરો છો, તો તે વિચાર ખરાબ નથી. માત્ર એક જ નાણાંકીય ખર્ચ છે બધા પછી, જ્યારે ઈન્ટરફેસ ડિઝાઇનર, ડિઝાઇનર અને લેઆઉટ ડિઝાઇનરને 5 અથવા 6 વખત સમાન કામ કરવા માટે ફરજ પાડવામાં આવે છે, ત્યારે આ પ્રોજેક્ટ બજેટમાં મૂળ કિંમતની સરખામણીએ વધુ ખર્ચ કરશે.

તેથી, વિવિધ સ્ક્રીનો માટે વિપુલ પ્રમાણમાં બડાશો, તે સિંગલ-પૃષ્ઠ વેબસાઇટ્સ સિવાય, જેનું હેતુ એક પ્રોડક્ટ વેચવાનું છે અને જરૂરી તે સારી રીતે કરે છે. ઠીક છે, જો તમારી પાસે આ લેંડિંગ્સ અને મલ્ટિપલ-પૃષ્ઠ સાઇટ નથી, તો પછી વધુ દલીલ કરવા યોગ્ય છે.

સૌથી લોકપ્રિય સાઇટ કદ

બે અંતિમો વચ્ચે સમાધાન ત્રણ અથવા ચાર સ્ક્રીન કદ માટે લેઆઉટ દોરવાનું છે . તેમની વચ્ચે, એક મોબાઇલ ડિવાઇસ માટે જરૂરી હોવું જરૂરી છે. બાકીનાને નાની, મધ્યમ અને મોટા ડેસ્કટોપ સ્ક્રીન માટે સ્વીકારવામાં આવવો જોઈએ. સાઇટની પહોળાઈ કેવી રીતે પસંદ કરવી? નીચે મે 2017 માટે હોટલોગ સેવાનું આંકડા છે, જે અમને ડિવાઇસ સ્ક્રીન્સના વિવિધ રિઝોલ્યુશન્સની લોકપ્રિયતાની વિતરણ તેમજ આ સૂચક ફેરફારની ગતિશીલતા દર્શાવે છે.

કોષ્ટકમાંથી, તમે ઉપયોગ કરવા માંગતા હો તે સાઇટના કદને કેવી રીતે નક્કી કરવું તે શીખી શકો છો. વધુમાં, અમે તારણ કરી શકીએ છીએ કે સૌથી સામાન્ય ફોર્મેટ આજે 1366 દ્વારા 768 પોઇન્ટ્સથી સ્ક્રીન છે. આવા સ્ક્રીનો બજેટ લેપટોપ્સમાં ઇન્સ્ટોલ થાય છે, તેથી તેમની લોકપ્રિયતા કુદરતી છે. આગામી સૌથી વધુ લોકપ્રિય એ પૂર્ણ એચડી મોનિટર છે, જે વિડિઓ ક્લિપ્સ, રમતો માટે ગોલ્ડ સ્ટાન્ડર્ડ છે અને તેથી સાઇટ લેઆઉટ બનાવવા માટે. ટેબલમાં આગળ આપણે 640 પોઈન્ટ માટે મોબાઇલ ડિવાઇસ 360 ની પરવાનગી જોઈ શકીએ છીએ, અને તે પછી ડેસ્કટોપ અને મોબાઇલ સ્ક્રીનના વિવિધ પ્રકારો પણ.

લેઆઉટ ડિઝાઇન કરો

તેથી, આંકડાઓનું વિશ્લેષણ કર્યા પછી, અમે તારણ કરી શકીએ છીએ કે સાઇટની શ્રેષ્ઠ પહોળાઈમાં 4 ફેરફારો છે:

1. 1366 પિક્સેલની પહોળાઈ સાથે લેપટોપ માટે સંસ્કરણ.
2. પૂર્ણ એચડી સંસ્કરણ
3. નાના ડેસ્કટોપ મોનિટર પર ડિસ્પ્લે માટે 800 પિક્સેલ વ્યાપી લેઆઉટ.
4. સાઇટનું મોબાઇલ સંસ્કરણ 360 પિક્સેલ પહોળું છે.

ચાલો કહીએ કે અમે સાઇટ માટે જનરેટ થયેલા સ્રોતના કદનો ઉપયોગ કેવી રીતે કરવો તે અમે નક્કી કર્યું છે. પરંતુ આવા પ્રોજેક્ટ હજુ પણ ખર્ચાળ હશે. તો ચાલો વધુ વિકલ્પો ધ્યાનમાં લઈએ, આ વખતે ચોક્કસ પહોળાઈનો ઉપયોગ કર્યા વિના.

લેઆઉટ સાનુકૂળ બનાવે છે

ત્યાં એક વૈકલ્પિક અભિગમ છે, જ્યારે તે માત્ર ન્યુનત્તમ સ્ક્રીન કદ માટે જ સમાયોજિત થવો જરૂરી છે અને સાઇટ્સનાં કદ ટકા દ્વારા સેટ કરવામાં આવશે. આ કિસ્સામાં, મેનુઓ, બટન્સ અને લોગો જેવા આવા ઇન્ટરફેસ ઘટકો નિરપેક્ષ મૂલ્યોમાં સેટ કરી શકાય છે, જે પિક્સેલમાં સ્ક્રીન પહોળાઈના ન્યૂનતમ કદ પર ફોકસ કરે છે. સામગ્રી સાથેના વિભાગો, તેનાથી વિપરીત, સ્ક્રીન વિસ્તારની પહોળાઇના નિર્દિષ્ટ ટકાવારી અનુસાર પટશે. આ અભિગમથી ડિઝાઇનર્સ માટે મર્યાદા તરીકે સાઇટ્સના કદને સમજવાનું રોકવું અને આ નોન્સને હરાવવા માટે પ્રતિભાશાળી છે.

સુવર્ણ રેશિયો શું છે, અને તે કેવી રીતે વેબ પૃષ્ઠોની લેઆઉટમાં લાગુ પાડવા?

પુનરુજ્જીવનમાં પણ, ઘણા આર્કિટેક્ટ્સ અને કલાકારોએ તેમની રચનાઓને એક આદર્શ આકાર અને પ્રમાણ આપવાનો પ્રયાસ કર્યો. આ પ્રમાણના અર્થ વિશે પ્રશ્નોના જવાબ આપવા પછી, તેઓ તમામ વિજ્ઞાનની રાણી તરફ વળ્યા - ગણિતશાસ્ત્ર.

પ્રાચીનકાળના સમયથી, એક પ્રયોગ શોધવામાં આવ્યો છે, જે આપણા આંખને સૌથી વધુ કુદરતી અને ભવ્ય તરીકે જોવામાં આવે છે, કારણ કે તે પ્રકૃતિમાં સર્વત્ર જોવા મળે છે. આવા ગુણોત્તરના ફોર્મ્યુલાના શોધક, ફીપિઆસ નામના પ્રતિભાશાળી પ્રાચીન ગ્રીક આર્કિટેક્ટ હતા. તેમણે ગણતરી કરી કે જો પ્રમાણનો મોટો ભાગ ઓછો ઉલ્લેખ કરે છે, કારણ કે આખી મોટા સંદર્ભ આપે છે, તો પછી આ પ્રમાણ શ્રેષ્ઠ દેખાશે. પરંતુ આ તે કેસ છે જો તમે ઓસિમટ્રીકલી ઓબ્જેક્ટને વિભાજિત કરવા માંગો છો. આ પ્રમાણ પાછળથી સુવર્ણ વિભાગ તરીકે ઓળખાતું હતું, જે હજુ પણ સંસ્કૃતિના વિશ્વ ઇતિહાસ માટે તેના મહત્વને વધુ મહત્ત્વ આપતું નથી.

વેબ ડિઝાઇન પર પાછા જાઓ

તે ખૂબ જ સરળ છે - સોનેરી વિભાગનો ઉપયોગ કરીને, તમે એવા પૃષ્ઠોને ડિઝાઇન કરી શકો છો કે જે માનવ આંખને ખુબ ખુબ ખુશી કરશે. સોનેરી વિભાગ માટે સૂત્રની વ્યાખ્યા દ્વારા ગણતરી, અમે અતાર્કિક નંબર 1.6180339887 મેળવીએ છીએ ... પરંતુ અનુકૂળતા માટે આપણે ગોળાકાર મૂલ્ય 1.62 નો ઉપયોગ કરી શકીએ છીએ. આનો અર્થ એ થાય કે અમારા પૃષ્ઠના બ્લોકો તમે ઉપયોગ કરી રહ્યાં છો તે સાઇટ માટે સ્રોત કોડના કદને ધ્યાનમાં લીધા વગર, સમગ્ર પૃષ્ઠનો 62% અને 38% હિસ્સો હોવો જોઈએ. ઉદાહરણ તરીકે તમે આ યોજના પર જોઈ શકો છો:

નવી ટેકનોલોજીનો ઉપયોગ કરો

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

સાઇટ વર્કસ્પેસને કેવી રીતે વધારવું?

એક ઉચ્ચ સંભાવના છે કે તમારી પાસે બધા ઇન્ટરફેસ તત્વોને નાના કદના લેઆઉટમાં ફિટ કરવા માટે પૂરતી જગ્યા નથી. આ કિસ્સામાં, તમારે તમારા પહેલા કરતા પહેલાં સર્જનાત્મક અથવા વધુ રચનાત્મક વિચારવાનું શરૂ કરવું પડશે.

સાઇટ પર જગ્યાને મહત્તમ બનાવો પૉપ-અપ મેનૂમાં નેવિગેશનને છુપાવીને કરી શકાય છે. આ અભિગમ માત્ર મોબાઇલ ઉપકરણો પર, પરંતુ ડેસ્કટોપ પર જ વાપરવા માટે લોજિકલ છે. છેવટે, વપરાશકર્તાને તમારી સાઇટ પરના શુધ્ધાંતોમાં બધા સમય જોવાની જરૂર નથી - તે સામગ્રી માટે આવ્યો છે અને વપરાશકર્તાની ઇચ્છાઓને માન આપવાની જરૂર છે.

મેનુને છુપાવાની એક સારી રીતનું ઉદાહરણ નીચેનું લેઆઉટ છે (નીચે ફોટો).

લાલ વિસ્તારના ટોચના ખૂણામાં , તમે એક ક્રોસ જોઈ શકો છો, જેના પર ક્લિક કરીને મેનૂને નાના ચિહ્નમાં છુપાવી શકો છો, વપરાશકર્તાને વેબસાઇટની સામગ્રી સાથે એકલું છોડીને.

જો કે, તમારે આ કરવાની જરૂર નથી, તમે નેવિગેશન છોડી શકો છો, જે હંમેશા દેખાશે. પરંતુ તમે તેને એક સુંદર ડિઝાઇન ઘટક બનાવી શકો છો, અને સાઇટ પર ફક્ત લોકપ્રિય લિંક્સની સૂચિ નથી. ટેક્સ્ટ લિંક્સ ઉપરાંત અથવા તેના બદલે સાહજિક ચિહ્નોનો ઉપયોગ કરો. આ તમારી સાઇટને વપરાશકર્તાના ઉપકરણ પર વધુ કાર્યક્ષમ રીતે સ્ક્રીન સ્થાનનો ઉપયોગ કરવાની મંજૂરી આપશે.

શ્રેષ્ઠ સાઇટ - અનુકૂલનશીલ

જો તમે જાણતા નથી કે સાઇટ માટે કયા લેઆઉટ પસંદ કરવો, તો પછી બધું તમારા માટે સહેલું છે. કોઈ ઉપકરણ માટે ગરીબ દેખાવને કારણે વિકાસ ખર્ચો બચાવવા માટે અને પ્રેક્ષક ગુમાવવો નહીં, અનુકૂલનશીલ ડિઝાઇનનો ઉપયોગ કરો.

અનુકૂલનશીલને એક ડિઝાઇન તરીકે ઓળખવામાં આવે છે જે વિવિધ ઉપકરણોને સમાન રીતે સારી રીતે જુએ છે. આ અભિગમ લેપટોપ પર ઓછામાં ઓછા એક ટેબ્લેટ પર સ્માર્ટફોન પર પણ તમારી સાઇટ સમજી શકાય તેવું અને અનુકૂળ બનશે. સ્ક્રીનના કાર્યક્ષેત્રની પહોળાઇમાં સ્વચાલિત ફેરફારોને કારણે આ અસર પ્રાપ્ત થઈ છે. સાઇટ માટે અનુકૂલનશીલ શૈલી શીટ્સનો ઉપયોગ કરીને, તમે શક્ય તેટલો વધુ યોગ્ય નિર્ણય કરો છો.

અનુકૂલનશીલ ડિઝાઇન સાઇટના વિવિધ સંસ્કરણોની ઉપલબ્ધિથી શું જુએ છે

અનુકૂલનશીલ ડિઝાઇન સાઇટના મોબાઇલ સંસ્કરણથી અલગ પડે છે જેમાં તે વપરાશકર્તાને એક HTML કોડ પ્રાપ્ત કરે છે જે ડેસ્કટોપ સંસ્કરણથી અલગ પડે છે. ઑપ્ટિમાઇઝ સર્વર પ્રભાવને ધ્યાનમાં રાખીને આ એક ખામી છે, તેમજ સર્ચ એન્જિન ઓપ્ટિમાઇઝેશન. વધુમાં, સાઇટની વિવિધ આવૃત્તિઓ પરના આંકડાને ગણતરી કરવી વધુ મુશ્કેલ બની જાય છે. અનુકૂલનશીલ અભિગમ આવા ખામીઓથી મુક્ત નથી.

વિવિધ ઉપકરણો માટેની સંયોજકતા પહોળાઈની ટકાવારી અથવા ઉપલબ્ધ જગ્યા (ડેસ્કટૉપ પર સ્માર્ટને બદલે સ્માર્ટફોન પર ઊભી વિમાનમાં), અથવા વિવિધ સ્ક્રીનો માટે વ્યક્તિગત લેઆઉટ બનાવવા માટે બ્લોક્સને સ્થાનાંતરિત કરીને લેઆઉટ દ્વારા પ્રાપ્ત થાય છે.

અનુકૂલનશીલ ડિઝાઇન અને તેના વિકાસ વિશે વધુ માહિતી તમે પાઠયપુસ્તકોમાંથી કરી શકો છો.