Planowanie i budowa witryny mobilnej dla Twojej głównej strony

Question

Jesteśmy na początkowych etapach planowania budowy strony mobilnej dla jednego z naszych klientów. Ta witryna mobilna będzie stanowić dodatek do strony głównej, którą już dla nich stworzyliśmy. Stwierdziliśmy, że treść będzie niewielkim podsekcji strony głównej i będzie kierowana do głównych odbiorców, którzy będą korzystać z tej witryny.

Patrząc przez kilka przykładowych stron mobilnych zauważyliśmy, że wiele z witryny, które mają w adresie URL WAP są właściwie tylko uproszczone pliki HTML. http://wap.mlb.com tak naprawdę nie obsługuje WAP, ale prosty HTML.

Moje pytanie brzmi WAP myśl o przeszłości? Czy ze smartfonami i iPhone'em, które mają możliwość renderowania stron, musimy się martwić WML i WAP, czy wystarczy tylko wersja HTML?

Można również polecić blog lub samouczek lub odpowiedź poniżej, w jaki sposób najlepiej sprawdzać urządzenia przenośne? Czy my, jako programista, musimy znać każdą odmianę programu klienckiego, aby przekierować go na naszą stronę mobilną?

Wreszcie, należy zaprogramować stronę mobilną dla przeglądarki Safari iPhone/dotykowy lub po prostu opuścić plac jak jest?

Answer 1

Nowsze telefony pochodzą z WAP2 który wykorzystuje HTML Mobil Profil e (XHTML MP), który jest dość podobny do normalnego HTML. Starsze telefony używają Wireless Markup Language (WML).

W zależności od grupy odbiorców rozważam stworzenie przyjaznej dla telefonu komórkowego wersji witryny za pomocą XHTML MP i całkowite usunięcie WML. Przez przyjazny telefon komórkowy mam na myśli lekką grafikę, trochę JavaScript i prostą nawigację.

Aby sprawdzić możliwości różnych telefonów ręcznych, spójrz na numer WURFL.

Możesz również rzucić okiem na Mobile Web Best Practices z w3c.

Answer 2

Myślę, że główną różnicą w porównaniu z telefonami 2.5G i nowymi telefonami 3G jest to, że podczas gdy telefony 2.5G używały własnych przeglądarek, przeglądarki na telefonach 3G stały się bardziej podobne/dokładne w swoich możliwościach renderowania.

Z drugiej strony, możesz użyć CSS do renderowania tego samego HTMLa w formacie dużego ekranu lub małego zoptymalizowanego pod kątem urządzeń mobilnych, więc domyślam się, że to, co się stało, było podobne do "prostego HTML". najmniej trudna droga do podjęcia. Ponadto szablony bez tablic pozwalają na skalowanie stron internetowych, co ułatwia renderowanie witryny w formatach dużych i małych.

Tak więc ostatecznym pytaniem będzie pytanie o rynek docelowy. Czy kierujesz reklamy do osób, które znają się na technologiach, a które mają tendencję do posiadania telefonów obsługujących 3G? Czy celujesz w ludzi, którzy mogą mieć najwyżej 2,5G?

Answer 3

Moje doświadczenie jest to, że naprawdę zależy od tego, co próbujesz zrobić i kto/gdzie użytkownicy.

Podczas WAP ma dużo złej prasy, to siła jest gdzie trzeba niskiej przepustowości połączenia wysokich opóźnieniach. Zawartość WML zostaje zoptymalizowana przez bramkę operatora, aby znacznie zmniejszyć ilość danych przesyłanych bezprzewodowo. Jeśli masz iPhone'y i tym podobne, w obszarach o solidnym zasięgu 3G możesz pozwolić sobie na bogatszą zawartość, ale jeśli chcesz, aby aplikacja nadal dobrze działała w bardziej oddalonych obszarach, WAP ma dużą zaletę.

Jedno trzeba uważać z WAP jest to, że jakość wsparcia WAP w telefonach jest bardzo różna (przypuszczam, że także ci powiedzieć to samo dla przeglądarek internetowych smartphone). Większość z nich wyświetla strony w porządku, ale obsługa formularzy jest naprawdę okropna w niektórych przeglądarkach.

Jeśli zmieniasz treść na podstawie klienta użytkownika, powinieneś również zapewnić wyraźny sposób dostępu do określonego rodzaju treści (np. Oddzielne pliki URI) - automatyczny wybór nie zawsze jest właściwy i chcesz, aby klient mógł przesłonić to.

Jeśli pójdziesz z rozwojem WAP sprawdzeniu WinWAP - przeglądarka WAP Windows.

Answer 4

Gorąco polecam sprawdzenie Cameron Molls' książki Mobile Web Design. To nie jest techniczne rozwiązanie do tworzenia witryn zoptymalizowanych pod kątem urządzeń przenośnych, ale pozwala myśleć o różnych dostępnych opcjach i podsumowuje wszystkie swoje wady i zalety.Z pewnością sprawi, że pomyślisz o tym, jakie podejście podejmiesz i czy jest właściwe. Wydaje mi się, że ma również kilka wskazówek dotyczących zasobów, które pomagają wykrywać żądania urządzeń mobilnych do Twojej witryny, są różne opcje.

Answer 5

Jeśli chcesz wydać bardzo małe pieniądze, możesz znaleźć użyty egzemplarz mojej książki "Palm OS Web Application Developer's Guide" w serwisie Amazon za mniej niż 1 USD. Podczas gdy konkretne wskazówki dotyczące starych urządzeń Palm VII już nie obowiązują, istnieje kilka sekcji dotyczących tworzenia witryn mobilnych, które mogą nadal obowiązywać. Moja podstawowa rada jest następująca: spraw, aby strony były małe, najpierw zawierając istotne informacje, a następnie linki nawigacyjne; pchnąć zawartość generic/boilerplate na inne strony; spróbuj zoptymalizować, aby skrócić czas spędzany przez użytkownika na jednej stronie; i unikaj pobierania wielu obiektów (obrazów, plików JavaScript) dla strony, aby zmniejszyć opóźnienie.

Answer 6

Oto dwie rzeczy, które można zrobić, aby poprawić obsługę iPhone'ów nie robiąc dużo pracy:

stronę Producent przewijania w górę, aby ukryć pasek URL:

<script type="application/x-javascript"> 

    if (navigator.userAgent.indexOf('iPhone') != -1) { 
    addEventListener("load", function() { 
     setTimeout(hideURLbar, 0); 
    }, false); 
    } 

    function hideURLbar() { 
    window.scrollTo(0, 1); 
    } 

</script> 

i ustawić skalowanie do szerokości strony (najlepiej zrobić kilka testów i grać z tym, również szukać innych przykładów, które mogą wykorzystywać user-scalable=true):

<meta name="viewport" content="width=320; user-scalable=false" /> 

Answer 7

Kod: Powoduje, że weryfikator w3 zwraca 11 erorrs, gdy go używam. Oto strona indeksu, na którym próbowano: Nie będziesz mieć kilku linii, nieużywanych. To linie szablonów.

<!DOCTYPE HTML> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title> 
<meta name="description" content="A Thomas Image professional photography serving Cleveland 
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby"> 
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,"> 
<meta name="y_key" content="7b00158550200c1c"> 
<meta name="y_key" content="b5a3e0c1d778ff8a"> 
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" /> 
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" /> 
<meta name="viewport" content=”width=320,user-scalable=false”> 

Answer 8

W chwili obecnej (2014)

Możemy nie potrzebują osobnego strony dla urządzeń mobilnych, a nie możemy iść na przód bibliotekami końcowych jak Twitter Bootstrap który wykorzystuje czułe renderingu więc który dostosowuje witryn sam do rozmiaru ekranu czy to Tablet lub urządzenie mobilne lub Pulpit

Jedną z głównych zalet jest to, że w porównaniu z oddzielnymi witrynami dla urządzeń przenośnych i komputerów stacjonarnych potrzeba mniej konserwacji .

Aby dowiedzieć się więcej na temat Twitter Bootstrap kliknięcie here