Spojrzenie na projektowanie urządzeń mobilnych
Kiedy pierwszy iPhone został wydany, szturmem zajął świat technologii. Od tego czasu minęło już prawie 5 lat, a rynek smartfonów zyskał na popularności, a nawet Microsoft przeszedł do konkurencji z systemem operacyjnym Windows 7 i partnerami. Przy tak wielu użytkownikach Internetu w ich smartfonach w dzisiejszych czasach powszechne jest oczekiwanie agresywnego wzrostu liczby stron internetowych na telefony komórkowe.
Jednak projektowanie dla sieci mobilnej jest zupełnie inną operacją ze wspólnym projektowaniem stron internetowych. Nasze strony są zaprojektowane na ogromny ekran, ale rozmiar ekranu smartfona jest zbyt mały w porównaniu z tym, co prowadzi do denerwujących problemów z użytecznością. Nowe standardy i praktyki projektowe są bardzo potrzebne do lepszego zaprojektowania strony mobilnej i płynnego użytkowania.
W tym przewodniku postaramy się zaprojektować przyjazną dla użytkownika witrynę dla mobilnych przeglądarek smartfonów. Będę mówił o najlepszych praktykach i użytecznym narzędziu programistycznym, aby zaprojektować lepszą stronę mobilną, więc przejdźmy do tego po skoku!
Planowanie silnego doświadczenia użytkownika
Kiedy budujesz mobilną stronę internetową, ważne jest zawsze pamiętaj o swoich użytkownikach, W końcu twoja strona jest projektowana i tworzona z myślą o użytkownikach. Zwykle użytkownicy oczekują, że witryna mobilna będzie zachowywać się podobnie do środowiska pulpitu przyjazne dla użytkownika powinien być twoim głównym celem podczas budowania udanej witryny mobilnej.
Istnieje wiele koncepcji użyteczności do rozważenia dla użytkowników. Te rozważania obejmują rozmiar ekranu, obrazy wbudowane, hiperłącza, rozmiary czcionek, i nawigacja po stronie. Napisaliśmy o projekcie mobilnej użyteczności, abyś mógł wyrzeźbić swoją stronę dla lepszej użyteczności. Oprócz przewodnika musisz zawsze bądź czujny na nowe pomysły poprawić swoją witrynę.
Planowanie silnego doświadczenia użytkownika oznacza również, że powinieneś zastanów się, jak użytkownik będzie wchodzić w interakcję z Twoją witryną. Na pulpicie Twoja strona internetowa może współpracować z myszą i klawiaturą, ale na smartfonie użytkownicy będą stukający, strzepywanie, i przesuwając swoją drogę po twojej stronie. Prawdopodobnie będziesz musiał zaprojektować witrynę w taki sposób, w jaki użytkownicy mogą uzyskaj łatwy dostęp do informacji o witrynie za pomocą tych fizycznych ruchów.
Zachowaj strony krótkie i słodkie
Mięso i ziemniaki z dowolnej strony internetowej to zawartość strony. Każda z twoich stron internetowych zawiera znaczną ilość przydatnych informacji dla użytkowników, takich jak tekst, zdjęcia lub filmy. Znajdziesz tu także artykuły z wiadomościami i wpisy na blogach, które trwają przez kilka stron, co może pomóc w rozbiciu tekstu, ale nie jest zalecane dla urządzeń mobilnych jako technika wymaga więcej ładowania strony, co oznacza więcej czasu oczekiwania po stronie użytkownika.
Chyba że jest to absolutnie konieczne, polecam utrzymywanie krótkiej zawartości strony. Powinieneś również rozważyć, aby wyglądał słodko stylizowanie czcionki na znacznie większy rozmiar I może odsuwanie obrazów na bok. Dzięki zawartości na pełnym ekranie przyciąga ona uwagę, nie wspominając już o tym, że optymalizacja sprawia, że skanowanie stron jest znacznie prostsze. Jest to również powód, dla którego a układ pojedynczej kolumny idealnie pasuje do rachunku.
W większości przypadków przeglądarki mobilne nie będą ładować stron internetowych tak szybko, jak przeglądarki na komputerach, a to może denerwować czytelników, dlatego musisz optymalizować zawartość i stronę internetową do szybkiego ładowania zawartości. Możesz albo skrócić artykuł, zachowując pełną treść, lub po prostu usuń niepotrzebne obrazy. Skup się na prostocie zamiast na pięknie.
Twoja podstawowa nawigacja jest ratunkiem dla użytkowników, którzy chcą przechodzić między stronami. Na urządzeniu mobilnym łącza ekranowe z natury wydają się znacznie mniejsze, a zatem znacznie trudniejsze. Istotnym ulepszeniem w celu rozwiązania tego problemu jest zmaksymalizuj czcionkę i miejsce na linki nawigacyjne, może zajmując cały blok. Alternatywnie możesz zaprojektuj pasek nawigacyjny tak, aby był podobny do paska kart aplikacji na iPhone'a, jak ten przedstawiony powyżej.
Budowanie mobilnych stylów CSS
Teraz, gdy wiemy, jak zoptymalizować mobilną stronę internetową dla lepszej czytelności i użyteczności, dobrze byłoby mówić o stylach CSS. Każdy arkusz stylów CSS zawiera wiele selektorów z właściwościami dotyczącymi czcionek, rozmiarów, pozycjonowania i ustawień wyświetlania. Jeśli chodzi o telefon komórkowy, powinieneś zwracać na to uwagę jak twoje bloki wchodzą na swoje miejsce.
(Źródło obrazu: Smashing Magazine)
Jednym z obszarów do rozpoczęcia jest zresetuj szerokości opakowania witryny w procentach. Powszechnie używa się pikseli jako jednostki do pozycjonowania, wysokości linii, rozmiaru czcionki i szerokości div, ale w przypadku telefonów komórkowych chcesz, aby Twoje strony były płyn i przejście między urządzeniami naturalnie. Ustawienie kontenerów div na 100% szerokości umożliwi treść wypełniaj łatwo między trybem pionowym / poziomym bez przepuszczania krawędzi.
Jeśli jesteś jedną z osób, które chcą zmienić strukturę całego układu, upewnij się uderz wszystko nastawić. Również akapity, nagłówki i linki nawigacyjne powinny być ustawione na Blok wyświetlacza; więc masz wrażenie liniowego stylu drukowania. Zmień położenie marginesów i dopełnienia, aby usunąć wzdęcia z układu. Unikaj tabel jeśli to możliwe, ponieważ mają tendencję do generowania błędnych wyników między urządzeniami.
Duże obrazy to także kłopot między urządzeniami. Większość obrazów Twojej witryny będzie większa niż 480 pikseli i możesz nie chcieć, aby złamały kontener. Pierwsza opcja to ustaw ich szerokość na 100%, aby obrazy mogły naturalnie zmieniać rozmiar. Z pewnością jest to możliwe tworzyć różne zestawy obrazów na swojej stronie internetowej i renderuj je inaczej w oparciu o agenta przeglądarki, ale szczerze mówiąc, to po prostu dodaje więcej prac po twojej stronie, więc spróbuj używaj tej techniki tylko wtedy, gdy jest to naprawdę potrzebne.
Projektowanie stron internetowych dla iPhone'a
Udział w rynku telefonii komórkowej jest dość duży i podzielony, ale Apple ma duży kawałek tortu ze swoimi iDevices. Zarówno iPhone, jak i iPad to mobilne urządzenia internetowe z wbudowaną funkcją ekranu dotykowego. Zawierają one tę samą domyślną przeglądarkę internetową, Safari i wiele innych opcji.
W przypadku witryn specyficznych dla iPhone'a musisz kierować na rozmiar ekranu. Ustalony rozmiar ekranu jest ustawiony na 320 x 480 pikseli dla starszych modeli iPhone'a i 640 pikseli na 960 pikseli na iPhone 4 i iPhone 4S.
Ekrany iPhone'a są ograniczone do miejsca. Powinieneś mieć jeden blok treści, który rozciąga się tak długo, jak to konieczne. Przechowywanie elementów w pojedynczej kolumnie zaoszczędzi ci bólów głowy i umożliwić płynny układ “wypełniać” zarówno w trybie pionowym, jak i poziomym. W tym celu prawdopodobnie będziesz musiał opracować inny szablon i znaleźć sposób na sprawdzenie, czy odwiedzający korzystają z iPhone'a. Mały fragment kodu PHP poniżej powinien działać dobrze:
Zasadniczo logika przyciąga nasz globalny $ _SERVER zmienna dla agenta HTTP i sprawdza, czy słowo “iPhone” pojawia się w dowolnym miejscu. Jeśli tak, to wiemy, że nasz gość korzysta z iPhone'a i stamtąd możemy umieścić nieco inny HTML lub nawet zupełnie nowy układ szablonu! Można to również wykorzystać zawierać arkusz stylów specyficzny dla iPhone'a, zmień tytuły stron, usuń obrazy lub prawie wszystkie efekty dynamiczne.
Jeśli chodzi o obsługę nowych stylów, jest łatwiejszy sposób. Jak wspomniano wcześniej, maksymalny rozmiar ekranu dla iPhone'a wynosi 960 pikseli. Dzięki nowym zapytaniom o media CSS3 możesz dodawać style bezpośrednio do głównego arkusza stylów witryny tylko wyświetlanie na iPhone. Poniżej znajduje się mały przykładowy kod:
Ekran @media i (max-device-width: 960px) / * iPhone css * /
To działa, ponieważ CSS może teraz wykrywać agentów przeglądania i ich właściwości. Maksymalna szerokość ekranu jest jedną z właściwości, które można również wykryć.
Wszechstronna mobilna strona internetowa dla urządzeń iPhone'a nie jest zbyt trudna do zaprojektowania, jest tylko zbyt wiele przykładów, na które można się odwołać, tj. CSS iPhone. Bądź zajęty nauką i nie bój się eksperymentować z nowymi technikami projektowania interfejsu użytkownika.
Mobilne skrypty jQuery
Większość czołowych twórców stron internetowych zna bibliotekę jQuery. Oferuje fantastyczne skróty do kodowania efektów, animacji, rozwijanych menu i wielu innych funkcji w przeglądarce, a po ogłoszeniu jQuery Mobile staje się jeszcze bardziej niesamowite. To jest nie zaleca się bezpośredniego wskakiwania w technologię i ładuj swoją stronę z efektami wszędzie, ale dla celów testowych zaawansowana funkcjonalność może grać bardzo dobrze.
jQuery Mobile różni się nieco od zwykłego jQuery, ponieważ zapewnia pełne środowisko do rozbudowy. Podczas pracy z ich plikami nie są to tylko JavaScript, ale także style CSS dla przycisków, łączy i efektów przejścia. Nadal piszesz strony internetowe w kodzie HTML, ale zespół jQuery Mobile ma dostarczył wiele opcjonalnych funkcji projektowania interfejsu użytkownika. Wiele możemy zrobić z tymi ramami, ale od tego czasu struktura jest nadal w fazie beta, trzymajmy się prostych efektów.
Mały poradnik na blogu DevGrow zawiera kilka niesamowitych przykładów. Oficjalna strona oferuje także wersje demonstracyjne do wypróbowania. Zauważ, że używamy atrybutu HTML, zmiana danych dodawać efekty animacji z dowolnymi predefiniowanymi wartościami. Należą do nich slajdy, pop, flip, fade itp. Sprawdź mały przykład DevGrow, aby poznać smak tych efektów.
Efekty i przejścia są całkiem fajne, a fakt, że można zbudować cały interfejs mobilny ściśle z jQuery, jest również ogromnym krokiem naprzód dla tej platformy, ale z platformą tylko w wersji beta nie polecam budowania całej witryny mobilnej za pomocą ich biblioteka, zwłaszcza z tym, że jest nie jest obsługiwany przez wszystkie główne smartfony w czasie pisania (szczególnie Windows Phone 7), ale z czasem będzie lepiej.
Ostatecznie polecam zapoznanie się z tą nową platformą mobilną przed wdrażanie na żywo w dowolnym projekcie.
Pomocne narzędzia programistyczne
Deweloperzy mobilni nie szukają tylko kodu i zasobów projektowych. Istnieje również duże zapotrzebowanie na narzędzia programowe i środowiska IDE, nie wspominając o potężnych platformach mobilnych. Tworzenie stron internetowych jest trudnym zadaniem, które wymaga sporego poświęcenia, ale korzystanie z dodatkowych narzędzi ułatwi Ci pracę.
Opera Mobile Emulator
Szukasz sposobu na sprawdzenie, jak wygląda Twoja witryna mobilna? To może być ogromny ból, jeśli nie masz smartfona z dostępem do Internetu. Lub po prostu nie chcesz używać smartfona do testowania witryny za każdym razem, gdy aktualizacja jest wypychana na serwer. Opera Mobile Emulator to fantastyczne oprogramowanie do testowania Twojej mobilnej strony internetowej.
Emulator obsługuje wokół 20 profili mobilnych takich jak Samsung Galaxy S, HTC Desire, a nawet tablet jak Motorola Xoom. Możliwe jest również ustawienie niestandardowa rozdzielczość i zagęszczenie pikseli do intensywnych testów. Co najważniejsze, nie musisz wykonywać zbyt wielu czynności konfiguracyjnych, po prostu wykonaj kilka kliknięć i dobrze jest iść.
Pobieranie jest całkowicie bezpłatne, a oprogramowanie działa zarówno w środowisku Mac OS X, jak i środowisku Windows. Ich programiści ciężko pracują nad tworzeniem odpowiednich standardów internetowych i dostosowywaniem swojego silnika renderującego. Polecam ich inne narzędzia dev, jeśli szukasz dodatkowych narzędzi, które pomogą Ci po drodze.
PhoneGap
Nie opracowano wielu interfejsów API w oparciu o HTML5, aby zbudować solidne aplikacje mobilne. W szczególności w krajobrazie mobilnym brakuje tego typu stron internetowych, dlatego właśnie PhoneGap tak dobrze wypełnia niszę. Ich platforma pozwala łatwo konstruować aplikacje oparte na HTML5 jako natywne aplikacje na 6 różnych platformach.
Proces ten polega na pierwszym skompresowaniu kodu i przekazaniu go przez framework aplikacji PhoneGap. Stamtąd Twoje aplikacje mogą dotrzeć do dużej części rynku mobilnego, w tym Androida, iOS, Windows Phone 7 i BlackBerry.
Jeśli jesteś trochę zdezorientowany, nie przejmuj się zbytnio. Ich strony pomocy starannie przedstawiają proces i oferują linki do przydatnych zasobów. Aplikacje, które zostały już opracowane, zostały skompilowane w pięknym portfolio w stylu biblioteki. Sprawdź ich pełną kolekcję aplikacji, którą możesz następnie sortować według urządzeń ze zrzutami ekranu.
Aptana Studio
Strona internetowa Aptana to najlepsza lokalizacja do nauki o narzędziach programistycznych. Najnowsza wersja pakietu Aptana 3.0.3 zawiera w pełni zintegrowane środowisko IDE do tworzenia stron internetowych, stylów CSS i zagnieżdżania tagów HTML, a co najważniejsze: Aptana jest całkowicie wolny pobrać! Oferują pakiety dla wszystkich 3 głównych systemów operacyjnych (w tym Linux), co jest ogromną wygodą dla programistów.
To, co sprawia, że Aptana jest wyjątkowa, to jak szybko możesz stworzyć małą aplikację internetową i przetestować swój projekt. Apartament typu studio pozwala szybko opracuj i przetestuj aplikację internetową działającą na Ruby on Rails, PHP, Python lub po prostu HTML / CSS, a ich funkcje podświetlania kodu zostały niedawno ulepszone zawierać nowe biblioteki znaczników HTML5 i CSS3. Jest również wyposażony w integrację Git, wbudowany terminal, debuger kodu i kilka innych ciekawych funkcji.
Mobilne zestawy GUI i ikony
Jaka byłaby sieć bez gratisy? Dla projektantów stron internetowych znaczenie interfejsu użytkownika jest wyższe niż wszystko inne. Proste GUI są trudne do zdobycia i tylko najbardziej kreatywni projektanci opracowali rozwiązania robocze.
Istnieje jednak wiele darmowych, ale wysokiej jakości zasobów dostępnych dla projektanta stron internetowych do przetestowania. Te zestawy GUI są głównie przeznaczone dla Adobe Photoshop lub Fireworks, gdzie można poruszać się po elementach i eksportować je jako płaskie pliki obrazów.
Ikony to bardzo przydatne źródło. Projektanci tworzą bezpłatne zestawy i oferują je częściej niż kiedykolwiek wcześniej. Jedna z takich witryn Glyphish ma prezentację zarówno darmowych, jak i profesjonalnych ikon. Projekty te opierają się na jednym temacie, który ma być używany na szablonach mobilnych i projektach aplikacji.
Nasza kolekcja szablonów prototypów urządzeń mobilnych będzie dla Ciebie wspaniałą pomocą w rozwoju strony i aplikacji. Nie powinieneś zaczynać kodowania, dopóki nie będziesz miał silnego interfejsu graficznego, a te zestawy internetowe sprawią, że zaczniesz na właściwej ścieżce.
Zestaw GUI iOS 5
Elementy wektorowe interfejsu użytkownika iPhone'a
Zestaw ikon aplikacji na iPhone'a
Magnesy szkieletowe (DIY Kit)
Interfejs GUI systemu Android
