Използвайте стандартни шрифтове. Задайте подходяща ширина за мобилни устройства

Всички познаваме популярните MOBA игри на компютър - чували сме, знаем. Но относно факта, че можете да играете пълноценен моб на таблет и дори на обикновен смартфонседенето в метрото е истинско откритие за мнозина.

Трябва да се отбележи обаче, че няма много MOBA игри за мобилни телефони. Всички те, разбира се, са много по-ниски от своите конкуренти на компютъра, но предимството им не е в графиката и броя на възможностите, а в удобството, което носи мобилното устройство, защото можете да играете с него навсякъде.

Може също да се интересувате от ТОП 5 игри, подобни на Dota и ТОП 10 на MOBA игри.

И този ТОП изброява първите пет за днес мобилни игрив жанра MOBA!

5. Легендарни герои

Това е единствената тълпа за мобилни устройствакъдето има компания, през която трябва да преминете, за да получите достъп до онлайн режима, което е много странно. И въпреки че компанията е доста вълнуваща, отнема доста време да се премине през нея и може просто да не завършите играта преди онлайн режима.

В играта има само 10 символа, графиката е средно лоша, а анимацията на всички герои е права, много гладка, което предизвиква известно гадене.

След като преминете през въвеждащата кампания, рискувате да останете разочаровани. Тъй като поради малкия брой герои и възможностите за изпомпването им, играта бързо става скучна.

4. Слънцестоене Арена

Игра, разработена от компанията Zing Corporationпрез 2013.

Разработчиците решиха проблема с сюжета просто - тук просто няма сюжетни линии.

След първото стартиране на играта преминавате през кратък урок и веднага преминавате към безплатен хляб, което поразително отличава тази игра от предишната. В главното меню има 3 режима на игра: мултиплейър, кооперативен и разбира се соло. Всеки режим може да се играе изключително 3 по 3.

Графиките в играта също не са активни, както и няма много герои в играта. Следователно, четвъртото място.

3. Суетна слава

Играта, разработена през 2013 г., има доста добра графика и анимации, подобни на Dota.

Тук има само една карта. Битките също се провеждат 3 на 3, но Напразна славаРазличава се от всички останали по това, че има кракен - огромна тълпа, за чието сваляне играта получава сериозен другар, който може да обърне хода на битката.

Графиката в играта е отлична, има малко герои, има някои недостатъци във връзката.

Понякога играта не стартира от първия път, дори в режим olo. Значи трето място.

2. Борбата е завинаги

Играта, също разработена през 2013 г., веднага ни посреща с приятна, макар и леко мрачна картина, както и с доста стилно меню.

След като влезе в него, играчът преминава обучение, което продължава 20 минути, след което може да прави каквото сърцето му пожелае – дори да играе с ботове, дори с хора. В играта има само една карта, но тя е изпипана до най-малкия детайл и на нея можете да играете дълго и вълнуващо.

Битките, както обикновено в повечето от тези играчки, са 3 на 3 и нищо друго.

Графиката в играта е добра, но броят на героите е разочароващ, защото са само 10. Следователно второто място.

1. Heroes of Order & Chaos

Играта е разработена през 2012 г. Тук са представени три карти - една за битки 3v3 и две за битки 5v5, което веднага отличава този проектот всички предишни, където състезанията могат да се провеждат най-много 3 по 3.

Можете да играете както срещу истински играчи, така и срещу изкуствен интелект... Графиката в играта все още се счита за добра, а изборът на герои не разочарова - цели 80 броя!

Така тази игразаслужава почетно първо място в нашия ТОП на мобилни игри за таблети и смартфони.

Сърфисти в метротобезплатна играна Android, който е един от най-ярките и зрелищни представители на жанра аркадни бегачи. Играчът управлява герой, който бяга от преследването, преодолявайки различни препятствия и събирайки бонуси. Не трябва да очаквате дълбок сюжет от играта, но благодарение на пристрастяващия геймплей и красива картинаняма да е лесно да се откъснеш от него.

Mortal KombatхТова е вълнуваща безплатна екшън игра за Android с многобройни възможности, ненадминати техники и други елементи на истинска бойна игра. Потребителите ще бъдат впечатлени от висококачествените видео ефекти, които не само анимират процеса на преминаване на нивата, но и добавят нотка реализъм към всяка битка.

HD тапетиТова е колекция от ефектни тапети за персонализиране мобилен телефонили таблет на платформата Android. Колекцията вече включва над 7 хиляди висококачествени снимки с висока HD резолюция. Приложението ще ви позволи бързо и лесно да зададете оригиналния тапет на работния плот на вашата притурка, елиминирайки необходимостта да прекарвате часове в търсене на подходящо изображение в Интернет.

KMPlayer- доста известен видео плейър за Android на руски език, който вече се е доказал добре стационарни компютри... Вече може да се изтегли безплатно на адрес устройства с Androidи използвайте както на таблети, така и на смартфони.

Крачкомернай-доброто приложениена Android, за да измерите стъпките и изминатите разстояния за избрания период. Предимството на тази програма е дисплеят пълна информацияза вашите натоварвания. Можете да видите разстоянието и изгорените калории, както и колко бързо сте се движили в определени времеви диапазони.

Skype (Skype)безплатна програмана руски, за комуникация в интернет на Android, който се е доказал добре сред потребителите, които активно използват програми за обмен безплатни разговори, съобщения и възможности за видео разговори. На тази страница можете да изтеглите Skype безопасно, без регистрация и SMS.

B612 Selfie from the heart е уникална програма за камера за Android смартфони, специално създадена за любителите на селфита с необичайни възможности... Програмата ви позволява да правите не само висококачествени селфита, но и да създавате кратки селфи видеоклипове и видео колажи с оригинални ефекти, дълги три и шест секунди.

CCleaner- това е полезен инструментза почистването собствен Androidтелефон или таблет от непоискано съдържание и оптимизиране на производителността. Мобилната версия демонстрира точно същата ефективност като компютърния си аналог.

Поздрави на всички. Интернет се развива с колосални бързи темпове и днес вече не е чудно да виждате посещения на сайта от мобилни устройства и таблети, както беше преди. пазар мобилен интернет набира много бързи темповеи следователно създателите на сайтове трябва да адаптират своите сайтове за тези устройства. Ако погледнете последни новиниИнтернет индустрията, тогава можете да видите, че всичко върви към факта, че мобилните устройства през следващите 5-10 години ще заемат повече от половината от пазара за себе си.

накъде водя?И на факта, че трябва да адаптирате сайтовете си и да ги направите удобни за гледане на мобилни джаджи.

Google наскоро заяви, че ще маркира сайтове, които са удобни за смартфони и таблети. Много експерти казват, че сайтовете, които не отговарят на тези критерии, ще намалеят леко в резултатите от търсенето и ще се влошават. Има също предложения, че Google може да направи отделен SERP за мобилни сайтове.

Фактът, че сайтовете ще бъдат маркирани информация 100%, останалата информация е само предположение.

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

5 безплатни онлайн услуги за проверка на сайта на мобилни устройства.

Нека изброим всички безплатни услугии след това нека разгледаме всеки един по ред:

  1. Google Инструменти за уеб администратори ()

По-горе изброих 5 безплатни онлайн услуги, които аз самият използвам и ви препоръчвам. Функционалността им е напълно достатъчна за решаване на всякакви поставени задачи. Нека да разгледаме всеки един от тях по ред.

1. Google Webmaster Tools (Тест за удобен за мобилни устройства).Повечето най-доброто обслужванетъй като е проектиран от Google... Добре е, защото можете да видите не само как сайтът се показва на екрана, но и да получите всички необходими препоръки за отстраняване на грешки и правилен дисплей... За да видите всички грешки, трябва да отидете на Google Webmaster Tools, в елемента „Търсене на трафик“ изберете „Леснота на гледане на мобилни устройства“. След като отидете на страницата, може да видите проблеми с използваемостта.


Удобство за мобилно сърфиране - Google Webmaster

След като прегледате грешките, можете да продължите към теста на самия сайт. Преминаваме към теста, въвеждаме и получаваме всички препоръки, които трябва да се следват. За да видите всички препоръки, вдясно щракнете върху бутона " По-нататък"в точка „Как да направим страница удобна за мобилни устройства“.


2. Сега да преминем към останалите услуги.с които можете да проверите сайта на мобилни устройства.

Всички те са доста лесни за използване, просто въведете адреса на сайта в реда и включете всички резултати от сайта различни устройства... Нека да разгледаме услугата Responsinator като пример. Отидете и въведете адреса и щракнете върху " Отивам“, влизам loleknbolek... Получени резултати.

Превъртайки надолу можете да видите сайта в различни резолюции, което е много добре. Всички останали услуги, изброени по-горе, работят по същия начин. Използвам няколко услуги по-късно, че не винаги е възможно да се получи правилния резултат на една. Когато използвате няколко, процентът на грешката пада до нула.

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

Вашият уебсайт вече оптимизиран ли е за мобилни устройства? Ако още не, това не е краят на света. Модерни браузърисъдържат иновации като увеличение на щипки и автоматично регулиранеразмер на шрифта.

Ако нямате време или пари да оптимизирате уебсайта си мобилна среда- ето десет прости неща, които можете да направите в момента, за да изглеждате прилично за мобилни посетители.

1. Задайте правилните атрибути за полетата на формуляра

Ако използвате полета за въвеждане за потребителско име или адрес на вашия сайт, изключете автоматичното коригиране и включете автоматичното изписване с главни букви:

Твоето име:

Ако не направите това, автоматизираната система за въвеждане на T9 ще замени имената, например "Erwan", с нещо като "Erevan".

Инсталация автоматично използванепървият главни буквитиповете в думите ще освободят потребителите от необходимостта да включват главни букви всеки път - тоест всяка дума ще започва с Главна буква(например „Ken Burns“ става „Ken Burns“):

Помислете за всички клопкикоито потребителят може да срещне на вашия сайт.

И без да се отклонявам от темата. Ако вашият сайт поиска имейл от потребителя, използвайте полето за имейл, така че посетителят да не трябва да въвежда символа @ от клавиатурата на мобилно устройство:

Твоят имейл:

2. Задайте подходяща ширина за мобилни устройства

Отворете сайта си в браузъра на компютъра си и намалете ширината на прозореца на програмата, докато можете да прочетете нещо в него.

Това ще бъде минималната допустима ширина. Вземете текущата ширина и я задайте на свойството @viewport, като зададете мета маркера в главата на страницата:

Следващия път, когато вашият сайт бъде отворен на мобилно устройство, ширината, която сте посочили, ще бъде автоматично зададена. Посетителят на сайта не трябва да използва увеличението:

Тази снимка показва допълнителното пространство вдясно:

И тази снимка показва правилно зададена стойностширина.

Ако вашият сайт е изграден върху плавно оформление и работи с всички размери на екрана, вашата задача става още по-лесна. Трябва да експериментирате с ширината, при която уебсайтът изглежда добре и четим на мобилно устройство, и да зададете тази стойност на мета таг.

3. Задайте ширината на снимките на 100%

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

За да избегнете това, задайте стойността максимална ширинавашите изображения 100%. По този начин изображенията ще бъдат автоматично преоразмерени в случаите, когато са твърде големи за екрана на мобилно устройство. Добавете кода по-долу към CSS на вашия сайт:

img (максимална ширина: 100%)

Ако използвате изображения като фон, а не с img таг, просто задайте свойството CSS background-size да съдържа. Това ще принуди фонова картинапреоразмерете, когато разделителната способност на екрана не е достатъчна, за да се покаже в 100% мащаб:

Заглавка (фон: url (header.png) 50% без повторение; размер на фона: съдържа)

Ако се притеснявате, че изображението ще стане по-малко ясно, тогава се притеснявате излишно. Това няма да се случи на съвременните мобилни устройства.

Когато посетителят използва увеличение, браузърът използва изострянето на картината. Уверете се обаче, че вашият сайт няма свойство user-scalable = no в мета маркера. Ако това не е така, потребителят няма да може да използва увеличението:

4. Задайте ширината на полетата за въвеждане на 100%

След като ширината на изображенията е зададена чрез свойството max-width, направете подобен трик с полетата за въвеждане. Просто добавете към вашия CSS файл - вашия файл на сайта:

въвеждане, текстово поле (максимална ширина: 100%)

Когато разглеждате сайта от мобилно устройство, този параметър няма да даде полета за въвежданеотидете отвъд екрана.

5. Бъдете бдителни, когато използвате бутоните за деактивиране за изпращане на формуляр

За да избегнете многократно щракване върху бутона за изпращане, трябва да направите изпращането неактивно след първото щракване върху него.

За разлика от настолните устройства, мобилните устройства често губят мрежова връзка. Ако направите бутона неактивен, потребителят няма да може да го щракне отново. И в тази ситуация имайте предвид, че причината за тази ситуация може да бъде не само загубата на мрежата.

По време на входящо повикванебраузърът на мобилното устройство ще се затвори. И тогава ситуацията със заключения бутон за потвърждение ще се повтори. Потребителят няма да може да изпрати вече попълнен формуляр.

И ако все пак решите да деактивирате бутон за изпращане- направете го за няколко секунди.

6. В дълги редове използвайте word-wrap

Понякога е необходимо да се показват дълги редове като примерни кодове, връзки, номера на банкови сметки. Ако сайтът ви се окаже тесен, за да се покаже целия ред, той може да „излезе“ извън екрана на мобилното устройство:


Избягвайте тази ситуация, като използвате свойството word-wrap. Това ще се увие, когато линията достигне ръба на екрана. Потребителят ще види всичко, от което се нуждае, без да превърта:

Твоята парола: 435143a1b5fc8bb70a3aa9b10f6673a8

7. Внимавайте с интервалите

Обичайна практика при показване дълги линиие използването на интервали на всеки пет знака. Това ще улесни потребителя да ги запомни за въвеждане в друго приложение.

но интелигентен потребителняма да го направи ръчно. Той ще използва клипборда. Въпреки това, в случай на интервали, той ще трябва да ги премахне. Колко удобно и бързо е премахването на интервали на мобилно устройство?

Да избегна подобни ситуации, вместо интервали между групи от знаци, използвайте отстъп:

Вашият код: 435143a1b5fc8bb

Както виждате, "интервалите" между знаците остават, но с тази разлика, че при копиране-поставяне няма нужда да изтривате нещо. Най-малкото е удобно и спестяващо време!

8. Предимства на медийните запитвания

Можете да създавате персонализирани стиловекойто ще работи само при преглеждане на сайта от мобилни устройства (или показване в малък прозорец на браузъра) и на настолен компютъробичайната версия на уеб страницата ще работи. За да направите това, използвайте целеви стилове в медийни заявки, както е в примера по-долу:

Сега знаете още един трик, за да помогнете на уебсайта си да изглежда по-добре на мобилни устройства.

9. Избягвайте фиксирано позициониране

Ако заглавието или страничната лента на вашия сайт са фиксирани, свойството позиция на CSS е настроено на фиксирано. Бъди внимателен.

Когато маркирате по този начин, заглавието ви ще расте със страницата и вероятно ще заема цялото пространство на екрана:

Най-простото решение е да не се използват фиксирани позиции на елементи за показване на мобилни устройства.

Примерът по-долу, използвайки метода на медийна заявка, ще ви покаже как да оживите това:

10. Използвайте стандартни шрифтове

Приложение персонализирани шрифтовепридава на сайта вид на професионално изпълнен продукт, но потребителите трябва да качват файлове с шрифтове. Това се прави преди сайтът да се покаже на устройството.

По правило размерът на такива файлове е доста голям. На мобилно устройство този процес може да отнеме голям бройвреме. В този момент на екрана виждаме бяло пространство вместо текст:

Кога с помощта на google Font Loader за зареждане на шрифтове, вие ще можете да показвате текст с помощта на стандартен шрифт, докато се зарежда персонализиран. След това генерирате отново страницата и се показва желаният от вас шрифт.

За да направите това, трябва да напишете два варианта на CSS правила. Едната опция е да използвате шрифта по подразбиране, а другата е да използвате изтегления шрифт.

Това ще бъде най-добрият вариант. Потребителят чете текста, докато шрифтовете се зареждат, и се наслаждава на красотата, когато приключат със зареждането. Ето кода.

Решихме да разберем на какво трябва да обърнат внимание собствениците на такива ресурси, когато оптимизират своите сайтове.

Делът на мобилните потребители нараства стабилно

Няколко години подред, в годишното си изследване на аудиторията на Рунет, Yandex отбелязва значително увеличение на потребителите, които имат достъп до интернет от мобилни устройства. Статистическите данни потвърждават друга зараждаща се тенденция – в редица теми делът на потребителите, които посещават сайта от различни мобилни устройства, вече надвишава дела на потребителите на персонални компютри. Това е прекрасно илюстрирано от сайтовете социални мрежи... Например към октомври 2014 г. мобилната аудитория на Facebook се равнява на общата дневна аудитория активна публикаобслужване.

Увеличава се и процентът на покупките, направени от мобилни устройства. Според статистиката на Google 39% от потребителите на смартфони са направили покупки с мобилни устройства, 55% от потребителите, търсещи информация за стоки или услуги на смартфони, планират да направят покупка в рамките на един час, 83% в същия ден. В 47% от случаите подобно търсене е преобразувано в последваща покупка от компютър, в 82% при покупка в офлайн магазин, в 17% при покупка с помощта на смартфон.

Управление на репутацията на марката

ORM е един от най-бързо развиващите се сегменти на дигиталния пазар. Станете експерт в управлението на репутацията с новия курс Skillbox и Sidorin.Lab (агенция № 1 на Rouward в рейтинга на профилите).

3 месеца онлайн обучение, работа с ментор, дипломна работа, заетост за най-добрите в групата. Следващият поток от обучение започва на 15 март. Cossa препоръчва!

Удобството за гледане на мобилни устройства е изключително важно, тъй като пряко влияе върху превръщането в покупки, разговори или полезен трафик.

Опции за мобилни сайтове

В момента има три основни решения за удобна употребауебсайт от мобилни устройства:

  • Мобилна версия на сайта(някои сайтове имат и WAP версия) - те се поставят на отделни URL адреси (www.domain.ru/mobile/page_1) или дори на отделен поддомейн (m.domain.ru/page_1) на страницата на сайта. Най-често това е съкратена версия на основния сайт с ограничена функционалност. V последните временамобилните версии губят своята актуалност поради подобрения CSS и редица недостатъци при анализиране на потребителски агенти на сървъри. Допълнително неудобство за потребителя е необходимостта да запомни няколко URL адреса на сайта.
  • Мобилно приложение на сайта -специално приложение, разработено за конкретна мобилна платформа (iOS, Android, Windows Phone). Атрактивно най-близката интеграция с платформата, която ви позволява да внедрите интерфейса, познат на потребителите, също се характеризира с висока производителност. Оправдан вариант, ако проектът е по-предназначен за офлайн работа и за мобилни потребители... Основният недостатък е необходимостта от изтегляне на приложението, в в противен случайпотребителят вижда пълна версиясайт в малък мащаб. Следователно, дори и да имате мобилно приложение, това не е достатъчно, във всеки случай е необходимо да се направи висококачествена мобилна версия на ресурса.
  • Сайтове с адаптивен дизайн - автоматично се адаптира към параметрите на устройството, от което се извършва влизането. Значителен плюс - един URL за всички устройства, което спестява разработчиците от пренасочвания, а потребителите от необходимостта да запомнят адреса мобилна версиясайт. Най-популярният вариант през последните години, тъй като ви позволява да работите на един сайт за всички видове устройства и осигурява значителни икономии на разходи за труд при извършване на промени в сайта и последващата му оптимизация.

Характеристики на оптимизацията на уебсайтове за мобилни устройства

Ако искате да направите сайта си удобен за мобилни устройства, вие задължителноима три основни компонента, които трябва да се вземат предвид:

  • оптимизиране на CSS и персонализиране на медийни заявки;
  • персонализиране на изгледа с помощта на специални мета тагове;
  • оптимизиране на използваните плъгини.

Оптимизиране на CSS и настройка на медийни заявки

Първият проблем, с който се сблъсква потребителят при достъп до пълната версия на сайта от мобилно устройство и обратно, е неправилното показване на ресурса по отношение на разделителната способност на екрана.

Това се случва, защото дизайнерите на оформление, когато получават оформление, по подразбиране предписват стойностите на ширината или височината на различни елементи в абсолютни стойности (в пиксели) за най-често срещаните разделителни способности на обикновените компютри, например:

Контейнер (ширина: 210px; височина: 200px;)

Това може да се избегне, като се използват относителни стойности (например в проценти) вместо абсолютни стойности при определяне на размерите на елементите на страницата:

Контейнер (широчина: 21,75%; височина: 20,408%;)

Това ще позволи на елементите на страницата да се приспособят към мащаба на цялата страница.

Персонализиране на изгледа

Повечето сайтове, когато се гледат от малък екран, се показват на потребителя с точно същата разделителна способност (обикновено около 980 пиксела), както при гледане от компютър, например:

В резултат на това посетителят трябва да увеличи необходимата зона за гледане, за да види поне нещо.

Използването на специализиран мета-таг „viewport“ помага да се регулира ширината на екрана за всяко устройство:

съдържание на "viewport" = "ширина = ширина на устройството, начален мащаб = 1,0">

Атрибутът „първоначална скала = 1“ казва на браузъра на потребителя съотношението CSS пиксел към устройство (1: 1 независимо от ориентацията на дисплея), за да се показва правилно в пейзажна ориентация.

Оптимизиране на използвани плъгини

Много мобилни устройства и браузъри не поддържат или не поддържат всички версии на съвременните плъгини, поради което се препоръчва да се преразгледа необходимостта от присъствие на страницата Flash плъгини, Silverlight или Java. Включени са много HTML5 елементи този моментви позволяват да намерите заместители за всички плъгини, без да губите качеството на показване на съдържанието.

Освен всичко друго, намаляването или пълното изоставяне на плъгините в сайта ще оптимизира теглото на страницата, което също ще има положителен ефект върху индексирането й от търсачките.

В допълнение към основните точки, изброени по-горе, има много допълнителни настройкикоето ще направи вашия сайт лесен за използване от мобилни платформи:

Пример за оптимизация на текст за смартфони и компютри

  • Оптимизирайте JavaScript колкото е възможно повече.
  • Използвайте ясна навигация в сайта в горната част на страниците. Това важи особено за сайтове с гъвкав дизайн. Помнете това, когато сърфирате с мобилна платформапотребителят трябва да е също толкова удобен да използва сайта, както и с компютър. Ясно меню и удобна навигацияще ви позволи да не се изгубите на страниците с ресурси. Добър вариантоформления на целевите страници с отзивчив дизайн -http: //www.theverge.com/a/virtual-reality.

Пример за навигация на сайта с отзивчив дизайн на екран на компютър и смартфон

  • Не пренебрегвайте gzip или deflate компресията, това има положителен ефект върху скоростта на зареждане на страниците на сайта на всички устройства.
  • Не забравяйте да използвате кеширане на изображения.
  • Коригирайте преди и след ревизии стойностите на такива показатели като време и дълбочина на показвания на страници, степен на отпадане, основни позиции на сайта за всички ключови запитванияи статистика за мобилни устройства и технологии. Това ще ви позволи да прецените дали сте направили всичко правилно.

Заключение

Мобилното търсене се развива активно и ще заеме голям пазарен дял през следващите години. Ако искате да сте в крак с времето, да бъдете пред конкурентите си или поне да сте в крак с тях, не пренебрегвайте оптимизацията на уебсайтове за мобилни устройства. Гарантирано е допълнителен трафики преобразувания в продажби.