Мобилна версия на сайт?

webstil

webstil

Well-Known Member
Може би, защото не ползвам толкова смартфоните , а по-скоро лаптопа и таблета, чак наскоро забелязах, че сайта ми изглежда зле на малък екран така да се каже. Все го гледах на таблета пък той 10 инча и се вижда, както на лаптопа - с две думи супер. Обаче искам да изглежда нормално и на телефоните, как да го направя? Сайта сам съм си го правил- онлайн магазин на OpenCart с готова тема, леко едитвана от мен. Възможно ли е сам да се справя с тази задача и да си го направя сайта да изглежда на телефона съразмерен като на таблета? А ако не е по силите ми от кой да потърся помощ и колко ще ми струва? И пак да си кажа, че не искам специална мобилна версия за телефони като на големите сайтове, ами просто да не се разбъркват всички елементи по сайта и да не е мисия невъзможна да се поръча през телефона.

П.П. Сега се загледах, че си го изкарва сайта като на лаптопа, но понеже не е такъв широк екрана наслагва всичко едно под друго. Примерно като има 4 продукта хоризонтално на началната страница и то ги изкарва 4 в колонка един под друг. Има ли начин поне в някакви граници да се пипнат нещата, за да изглежда по-добре?
Как се справяте с вашите сайтове?
 
От: Мобилна версия на сайт?

webstil каза:
П.П. Сега се загледах, че си го изкарва сайта като на лаптопа, но понеже не е такъв широк екрана наслагва всичко едно под друго. Примерно като има 4 продукта хоризонтално на началната страница и то ги изкарва 4 в колонка един под друг. Има ли начин поне в някакви граници да се пипнат нещата, за да изглежда по-добре?
Как се справяте с вашите сайтове?
Увеличете...

Това е адаптивният дизайн. Точно така би трябвало да излизат. Когато екранът е твърде тесен, елементите се стакват един под друг, за да се виждат добре. Иначе няма да видиш особено много, ако 4-те ти продукта останат на един ред и се свият до минимални размери.
 
От: Мобилна версия на сайт?

И менюто също се скрива, а на негово място излиза едно квадратче с три хоризонтални реда и като го натиснеш вече се показват отделните думички от менюто, съответно с линковете към другите страници.
Тоест не е толкова лош дизайна на сайта?
Как излизат вашите сайтове? Искам просто да е по-удобно на хората и да правят по-лесно поръчки, аз смартфони почти не ползвам, че са ми супер малки и неудобни :D
 
От: От: Мобилна версия на сайт?

webstil каза:
И менюто също се скрива, а на негово място излиза едно квадратче с три хоризонтални реда и като го натиснеш вече се показват отделните думички от менюто, съответно с линковете към другите страници.
Тоест не е толкова лош дизайна на сайта?
Как излизат вашите сайтове? Искам просто да е по-удобно на хората и да правят по-лесно поръчки, аз смартфони почти не ползвам, че са ми супер малки и неудобни :D
Увеличете...
То точно това му е идеята на респонзива. Когато устройството е малко няма нужда да се зарежда излишни елементи. Винаги можеш да си изкараш главното меню, да е извън колапсе бутона. Ти си решаваш какво искаш да се вижда и на каква резолюция.
 
От: Мобилна версия на сайт?

canopus каза:
Можеш да провериш сата си тук: https://www.google.com/webmasters/tools/mobile-friendly/
Увеличете...

Дава: Прекрасно! Тази страница е удобна за мобилни устройства.
Ама сигурно се бърка нещо, на мен ми изглежда много гадно.

Мога ли да направя примерно някои неща да не се виждат на телефоните? И как?
Примерно текста на началната страница на лаптопа стои супер, но на телефона като се сложи в една колонка и докато го превъртиишшш... не знам как изобщо хората поръчват от сайта ми през телефоните, явно са свикнали :D
 
От: Мобилна версия на сайт?

Разликата между екрана на лаптопа и този на телефона е именно в това, че при второто устройство ориентацията е вертикална. Освен това на него могат да се поберат по-малко неща, защото е по-малък и за да са със същия размер, трябва да бъдат подредени вертикално. Едно дълго хоризонтално меню не може да се събере и именно затова се правят тези адаптивни варианти, които при малка резолюция се свиват и събират всичко в себе си - пример: http://indexbg.net . Този вариант е много удобен за телефон, защото менюто не пречи и се отваря само, когато трябва. Телефоните вече се използват много масово, затова е немислимо да се прави сайт, без да се тества на малък екран.
 
От: Мобилна версия на сайт?

webstil каза:
Дава: Прекрасно! Тази страница е удобна за мобилни устройства.
Ама сигурно се бърка нещо, на мен ми изглежда много гадно.

Мога ли да направя примерно някои неща да не се виждат на телефоните? И как?
Примерно текста на началната страница на лаптопа стои супер, но на телефона като се сложи в една колонка и докато го превъртиишшш... не знам как изобщо хората поръчват от сайта ми през телефоните, явно са свикнали :D
Увеличете...
Да, можеш. Зависи как точно е изграден респонзива, дали е къстъм или фреймуърк. Ако сайта ти е правен с някой от двата най-популярни към момента фреймоуърка bootstrap или foundation се прави така:
- за Bootstrap: http://getbootstrap.com/css/#responsive-utilities
- за Foundation: http://foundation.zurb.com/docs/components/visibility.html
 
От: От: Мобилна версия на сайт?

webstil каза:
И менюто също се скрива, а на негово място излиза едно квадратче с три хоризонтални реда и като го натиснеш вече се показват отделните думички от менюто, съответно с линковете към другите страници.
Тоест не е толкова лош дизайна на сайта?
Как излизат вашите сайтове? Искам просто да е по-удобно на хората и да правят по-лесно поръчки, аз смартфони почти не ползвам, че са ми супер малки и неудобни :D
Увеличете...

Също е направено нарочно. Това е мобилно меню. Темата ти звучи добре за мобилни устройства. Не мисля, че има нужда да се тревожиш.
 
От: Мобилна версия на сайт?

Да май е добре всъщност. Само ако мога да направя така, че текстовете на началната страница, както и тези по категориите да не се показват на телефона? Те хората така или иначе не ги четат, но за оптимизацията са полезни. Дали е възможно? madseason как да разбера към кой фреймуърк е? И като разбера трябва да коригирам css файла?

П.П. видях сега на 1 конкурент сайта и излиза едно към едно, както на лаптопа и таблета, разбира се в по-малки размери, но е доста добре направено. Системата там определено не е Opencart, доста опростен дизайн и сайт, но е по-нов от моя, а аз моя сайт като го създавах изобщо не знаех дали ще стане нещо :D
Сега предполагам трябва целият дизайн на ново да се прави, за да стане така. Ако има вариант да не се бута всичко бих го направил, защото е важно за посетителите с телефони, а и уж за SEO цели, но ако трябва да сменя целият дизайн ще има според мен по-скоро отрицателен ефект на класирането и продажбите, така че може би няма да го бутам :)
 
От: Мобилна версия на сайт?

https://www.google.bg/search?q=media+queries&ie=utf-8&oe=utf-8&gws_rd=cr&ei=VFvmVPLaGcemygPW3oLwCA
webstil каза:
Да май е добре всъщност. Само ако мога да направя така, че текстовете на началната страница, както и тези по категориите да не се показват на телефона? Те хората така или иначе не ги четат, но за оптимизацията са полезни. Дали е възможно? madseason как да разбера към кой фреймуърк е? И като разбера трябва да коригирам css файла?

П.П. видях сега на 1 конкурент сайта и излиза едно към едно, както на лаптопа и таблета, разбира се в по-малки размери, но е доста добре направено. Системата там определено не е Opencart, доста опростен дизайн и сайт, но е по-нов от моя, а аз моя сайт като го създавах изобщо не знаех дали ще стане нещо :D
Сега предполагам трябва целият дизайн на ново да се прави, за да стане така. Ако има вариант да не се бута всичко бих го направил, защото е важно за посетителите с телефони, а и уж за SEO цели, но ако трябва да сменя целият дизайн ще има според мен по-скоро отрицателен ефект на класирането и продажбите, така че може би няма да го бутам :)
Увеличете...
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе