Jak zoptymalizować Joomla na iPada

1. Dostosuj szablon.
2. CSS na iPada
3. Tryb pionowy i poziomy
4. Jak to zrobiłem
5. Użyj Firebug!
6. Dodawanie ikony specjalnie dla iPada
7. Idź i zrób to!

Na początku tego roku ( narracja w tym artykule została napisana w imieniu Kristoffera Sandvena (Kristoffer Sandven) ) odwiedziła Londyn na kilka dni. Jako oddany fan Apple musiałem odwiedzić lokalny Apple Store. Pierwszy, który odwiedziłem, był na Regent Street i po spędzeniu tam czasu postanowiłem kupić iPada. Jasne, już myślałem o zakupie, ale raz w sklepie zdecydowałem. Odwiedziłem także nowy sklep w Covent Garden i kupiłem kilka dodatkowych akcesoriów do iPada. Przy okazji, sklep jest po prostu świetny, jest ogromny, dobrze zaprojektowany, a personel jest bardzo przyjazny i wykwalifikowany. Sklep był pełen ludzi, którzy przyszli na nowy IPhone 4 ( wtedy właśnie wyszło - ok. Lane ). Więc co ja ... och tak! Kiedy zacząłem grać z iPadem, zdałem sobie sprawę, że ma on ogromny potencjał dla tworzenia stron internetowych. Tworzenie wygodnej witryny dla iPada i innych urządzeń mobilnych jest ważniejsze każdego dnia. Wcześniej zoptymalizowałem stronę na iPhone'a, ale po zakupie iPada potraktowałem to poważnie, ponieważ Otwiera to ogromne możliwości dla programistów internetowych.

Przeprowadziłem kilka eksperymentów, aby zoptymalizować mojego bloga na iPada. W tym artykule pokażę, używając konkretnego bloga jako przykład, jak zoptymalizować moją stronę.

Dostosuj szablon.

Pierwszym i najbardziej oczywistym krokiem jest dodanie meta tagu do głowy twojego szablonu (zwykle w index.php twojego układu).

Ten znacznik wskazuje przeglądarce, że powinien całkowicie wypełnić ekran urządzenia na szerokość.

Lillian Rigo bloguje na Template Monster napisałem artykuł na ten temat pod tytułem „Projektowanie stron internetowych dla iPada - WTF og FTW?” nie widzę powodu, aby wymyślać nowe koło, więc po prostu wstawię tutaj cytat:

Każda strona, która jest większa niż szerokość ekranu iPada, będzie skalować się i zmniejszać, jeśli Twoja witryna jest mniejsza, to po bokach mogą pojawić się nieprzyjemne puste tory. Treść musi zostać rozszerzona, aby wypełnić całą widoczną przestrzeń ekranu.

Narzucając szablon na iPada, zaleca się użycie siatki 960gs. Ta siatka stała się bardzo popularna ze względu na fakt, że pasuje do większości nowoczesnych ekranów, a jeśli z niej korzystasz, Twoja strona całkowicie wypełni iPada, nie będzie z tym żadnych problemów. Zasadniczo strony powinny być „płynne” zarówno w trybie pionowym, jak i poziomym. Uwaga: Safari (główna przeglądarka na iPadzie) zawsze oblicza szerokość urządzenia na podstawie orientacji pionowej. Jeśli obrócisz urządzenie, witryna nie zostanie „ponownie skonfigurowana”, ale po prostu się rozciąga.

CSS na iPada

Jeśli planujesz szeroką modyfikację witryny pod iPadem, może być konieczne dodanie oddzielnego arkusza stylów. Chciałem zrobić tylko kilka ustawień, więc dodałem kod bezpośrednio do custom.css w moim szablonie z YooTheme. Aby dowiedzieć się, w którym pliku dodajesz kod, przestudiuj dokumentację swojego szablonu, zazwyczaj plik template.css.

Aby utworzyć oddzielny styl dla iPada, użyj następującego kodu:

Ekran @media i (max-device-width: 1024px) {/ * Specjalnie dla iPada * / div.right {display: none; }}

Tryb pionowy i poziomy

Ciekawą funkcją iOS jest możliwość ustawiania różnych stylów w zależności od orientacji urządzenia. W ten sposób można wyświetlać różne bloki w trybie pionowym i poziomym.

Aby użyć różnych stylów dla różnych orientacji ekranu, użyj następującego kodu:

Portret:

Ekran @media i (max-device-width: 1024px) i (orientacja: portrait) {}

Krajobraz:

Ekran @media i (max-device-width: 1024px) i (orientacja: portrait) {}

Jeśli masz iPada, możesz zobaczyć zmiany na joomlablogger.net. Oto jak to wygląda:

Pamiętaj, że witryna ma prawą kolumnę.

W trybie portretowym go wyłączyłem, zwiększyłem także rozmiar nagłówków i tekstu, zwiększa czytelność w tym trybie, dodałem baner w menu głównym:

Jak to zrobiłem

Przede wszystkim musisz zdecydować, co chcesz zrobić ze swojej strony. W moim przypadku było to całkiem proste. Chciałbym poprawić czytelność mojego bloga, więc usunąłem prawą kolumnę. W tym miejscu usunąłem wszystkie reklamy i reklamy, które nie są dobre, więc wyświetlałem osobny baner na górze strony, znajdujący się w górnej pozycji mojego szablonu. Ponieważ Nie używam go do niczego innego. Postanowiłem ukryć tę domyślną pozycję za pomocą następującego CSS:

div # top {display: none; }

Teraz musiałem stworzyć specyficzne style dla iPada, aby usunąć dodatkowe elementy i dodać te, których potrzebuję w trybie pionowym:

/ * Specjalnie dla ekranu tylko dla iPada * / @media i (max-device-width: 1024px) i (orientacja: portrait) {div # banner {display: none; } // Usuń banery div # right {display: none; } // Usuń prawą kolumnę div # main-shift {margin-right: 0; } // Usuń wcięcia w środkowej kolumnie div # middle-expand {width: 200%; } div # content p {font-size: 120%; } // Zwiększ rozmiar tekstu h1 {rozmiar czcionki: 32px; } // Zwiększ rozmiar nagłówków div.joomla h1.title {width: 100%; } // Rozwiń pełną szerokość strony strony div # top {display: block; } // Wyświetl baner w centrum powyżej}

To samo dotyczy trybu poziomego, ale w tym przypadku chcę po prostu usunąć baner po prawej stronie.

Ekran @media only i (max-device-width: 1024px) i (orientation: landscape) {div # banner {display: none; } // Usuń baner}

Więc to wszystko. Konkretne style, które musisz dodać, zależą od używanego szablonu. Jeśli nie znasz CSS, polecam przeczytanie mojego artykułu. Joomla CSS dla początkujących .

Użyj Firebug!

Gorąco polecam korzystanie z Firefoksa i Firebuga, aby dowiedzieć się, jakie style trzeba zmienić na iPada. Firebug to rozszerzenie dla Firefoksa, które zapewnia wiele informacji o CSS i strukturze HTML strony internetowej. Po zainstalowaniu Firebug możesz kliknąć element prawym przyciskiem myszy i wybrać „Analizuj element”, a następnie pojawi się okno na dole ekranu. Teraz możesz zobaczyć strukturę HTML po lewej stronie i CSS po prawej (patrz poniżej). Dzięki Firebug możesz edytować arkusze stylów w przeglądarce internetowej i natychmiast zobaczyć zmiany. W ten sposób możesz eksperymentować przed wprowadzeniem zmian w CSS. Oszczędza dużo czasu.

W poniższym przykładzie dodałem display: none do div z id = „right”, aby zobaczyć, co się stanie. Kiedy to zrobiłem, zdałem sobie sprawę, że muszę również usunąć wcięcie z głównej części witryny, aby wypełnić cały obszar wyświetlania treścią.

Dodawanie ikony specjalnie dla iPada

To jest krem. Dodanie ikon do iPada pozwala na użycie go jako skrótu podczas dodawania witryny do ekranu głównego iPada (lub iPhone'a).

Ta ikona musi być w formacie PNG lub JPG i nie może być większa niż 114 pikseli na 114 pikseli

Stworzyłem tę ikonę dla JoomlaBlogger.net:

Dodaj ikonę do folderu z szablonem, a następnie dodaj tag meta w nagłówku, odwołując się do niego:

<link rel = "apple-touch-icon" href = "/ templates / YOUR TEMPLATE / apple-touch-icon.png" />

Teraz, gdy użytkownicy dodadzą witrynę do ekranu głównego, zobaczą specjalną ikonę.

W mobilnym Safari kliknij ikonę + i wybierz „ Dodaj do ekranu głównego ”

Wybierz nazwę ikony

Ikona na ekranie głównym

Idź i zrób to!

Mam nadzieję, że ten artykuł zainspirował Cię do zoptymalizowania witryny na iPada / iPhone'a. Moim zdaniem takie ulepszenia działają najlepiej, gdy są przezroczyste dla użytkownika. To znaczy użytkownik nie zauważy różnicy od razu, jest po prostu wygodniejszy w pracy z witryną.

Zoptymalizowałeś swoją stronę Joomla na iPada i iPhona? Opowiedz nam o tym w komentarzach poniżej!