Czy responsywne motywy WordPress dla firm to właściwy wybór?

responsywne motywy wordpress dla biznesu

Od kilku lat, kiedy Google ogłosiło, że przyjazność dla urządzeń mobilnych jest czynnikiem rankingowym, projektowanie stron mobilnych lub responsywnych nie jest już refleksją dla małych i średnich witryn biznesowych.

Urządzenia mobilne stanowią dziś znaczną część ruchu internetowego (53% w 2019 r.).

Firmy, które oferują słabe doświadczenia użytkownikom mobilnym, ryzykują utratę klientów i przychodów. Istnieje kilka sposobów na zapewnienie dobrej obsługi mobilnej, ale elastyczny projekt to najlepszy wybór dla MŚP korzystających z WordPressa.

Ten rodzaj projektu jest less drogie, oferuje ujednolicone wrażenia i spójną markę na różnych urządzeniach i jest lepsze dla SEO — projektowanie zorientowane na urządzenia mobilne jest preferowaną strategią optymalizacji mobilnej Google. (Nawet ich roboty przeglądają witrynę z urządzenia mobilnego).

1. Co to jest projektowanie responsywne i jak wpływa na biznesowe motywy WordPress?

Jeśli nie znasz jeszcze tej koncepcji, oto wyjaśnienie w skrócie: jest to projekt, który wykorzystuje zapytania o media CSS i proporcjonalną siatkę, aby zmienić sposób wyświetlania stron w zależności od rozmiaru urządzenia.

Na przykład elementy, które obejmują stronę w poziomie w przeglądarce na komputerze, zostaną ułożone pionowo w przeglądarce smartfona. Obrazy i typ są zmieniane w celu odzwierciedlenia rozmiaru ekranu urządzenia.

Sercem projektowania responsywnego są zapytania o media CSS.

Arkusze stylów CSS służą do kontrolowania wyglądu strony internetowej: używanych kolorów, układu strony, typografii i tak dalej. Zapytania o media umożliwiają projektantowi selektywne stosowanie reguł CSS tylko wtedy, gdy spełniony jest określony warunek. (np. jeśli rozmiar ekranu wygląda jak ekran telefonu komórkowego, zastosuj projekty odpowiednie dla telefonów komórkowych, ale jeśli jest większy, zastosuj projekty dla większych ekranów...).

Mamy nadzieję, że możesz zobaczyć, jak jest to przydatne do tworzenia różnych projektów dla różnych układów ekranu. Zapytania o media pozwalają programiście powiedzieć, na przykład, jeśli okno przeglądarki internetowej ma określoną szerokość, należy zastosować określony zestaw reguł.

Typowe zapytanie o media wygląda tak:

.mój kontener {
width: 800px;
}
@media (maksymalna szerokość: 600px) {
.mój_kontener {
width: 500px;
}
}

W powyższym przykładzie domyślna szerokość klasy .my_container jest ustawiona na 800px.

Oczywiście nie chcemy, aby była tak szeroka na węższym urządzeniu, więc używamy zapytania o media.

Zapytanie o media określa tutaj warunek — jeśli szerokość przeglądarki w poziomie wynosi 600 pikseli lub less, szerokość .my_container powinna wynosić 500px. Jeśli jest wyzwalany przez spełniony warunek, reguły w zapytaniu o media mają pierwszeństwo przed regułą „domyślną”.

Responsywne projektowanie motywów biznesowych wykorzystuje te cechy CSS do zmiany prezentacji stron internetowych w zależności od rozmiaru ekranu urządzenia, rozmiaru okna przeglądarki, orientacji urządzenia i wielu innych czynników.

2. Responsywne ramy projektowania

Unless znasz już CSS — a nawet jeśli tak — możesz nie cieszyć się pomysłem pisania zapytań o media dla każdego aspektu responsywnego motywu biznesowego WordPress, w którym w grę wchodzą frameworki projektowe.

Responsywny framework do projektowania zajmuje się dużą częścią złożoności tworzenia witryny, która obsługuje ekrany o różnych rozmiarach.

Najpopularniejszym frameworkiem do projektowania jest Bootstrap - wersje od v3.0 są w pełni mobilne. Bootstrap zawiera ogromną liczbę funkcji, które nas tutaj nie dotyczą, ale kluczem do wdrożenia responsywności w Bootstrap jest jego siatka.

Zalecana literatura: Jak przekonwertować PSD na motyw WordPress za pomocą Bootstrap w 5 krokach: samouczek i Elementor vs Divi - co jest najbardziej warte swojej ceny?

Zamiast prosić o pisanie własnych zapytań o media, Bootstrap implementuje system, który dzieli stronę HTML na siatkę wierszy i kolumn. Zamiast pisać zapytania o media, użytkownicy dołączają klasy do kodu HTML swojego motywu WordPress, aby podzielić stronę zgodnie z siatką.

Weźmy trywialny przykład, pomyśl o dwukolumnowej stronie internetowej.

Na dużych ekranach chcemy, aby kolumny były wyświetlane obok siebie. Na małych ekranach chcemy, aby układały się jeden na drugim.

dwukolumnowy responsywny projekt biznesowy

 

Nasz kod HTML wyglądałby tak:

  To jest kolumna pierwsza


To jest kolumna druga

Po dodaniu kodu CSS Bootstrap Grid na stronie ten kod HTML utworzy układ, którego szukamy.

Gdy strona zostanie załadowana do okna mniejszego niż określone dla zapytań o media wbudowanych w Bootstrap dla średnich kolumn, będą one układać się jeden na drugim, zamiast rozciągać się na stronę.

Możesz zobaczyć bardziej złożone przykłady tego, jak to działa w in Dokumentacja Bootstrapa.

Bootstrap nie jest jedynym frameworkiem, który zapewnia taką siatkę; w rzeczywistości są ich dziesiątki, począwszy od kompleksowych frameworków do projektowania stron internetowych, takich jak Bootstrap i Fundacja, do lekkich struktur siatki, takich jak Simple Grid, które zawierają tylko siatkę.

W ciągu ostatnich lat coraz bardziej popularne stało się alternatywne podejście, które zawiera wszystkie zmiany znaczników w CSS (lub SASS), zamiast zaśmiecania stron HTML niesemantycznymi znacznikami.

SASS responsywne systemy siatek projektowych, takie jak Susy i Burbon schludny wykorzystać moc SASS do tworzenia frameworków, które utrzymują kod układu strony tam, gdzie powinien być — w plikach CSS, co pozwala na czystszy kod HTML.

Wybór deweloperów to kwestia gustu i doświadczenia, ale my osobiście wolimy SASSoparte na siatce systemy, które pozwalają mi pisać semantyczne strony internetowe, które nie są pełne niesemantycznych nazw klas i nadmiernego zagnieżdżania div.

3. Responsywne ramy tematyczne projektowania

Struktury, takie jak Bootstrap i Foundation, są świetne dla projektantów stron internetowych, ale nie pomagają programistom WordPress, którzy szukają przewagi podczas tworzenia nowych szablonów.

Na szczęście istnieje wiele responsywnych frameworków motywów WordPress, które zapewniają gotowe podstawy.

1. Geneza

genesis framework dla biznesowych motywów wordpress

Genesis to niezwykle popularny framework tematyczny od StudioPress (które w pełni sprawdziliśmy tutaj). Chociaż jest skierowany bardziej do doświadczonych programistów WordPressa niż dla początkujących, nie jest trudno się z nim uporać, jeśli masz odrobinę wiedzy na temat PHP i CSS.

Genesis to projekt nadrzędny, z którego można stworzyć dowolną liczbę motywów potomnych. Jeśli wolisz kupić gotowe motywy potomne i dostosować je, StudioPress oferuje wiele różnych motywów potomnych odpowiednich dla wszystkich typów witryn.

Oprócz tego motywu często udostępniamy wysoko oceniane motywy WordPress, dzięki czemu możesz podjąć dobrą decyzję, czy kupić, czy nie.

2. Themify Builder

prosty motyw biznesowy od themify

Jeśli nie jesteś specjalistą od PHP i CSS, możesz rozważyć wtyczkę do tworzenia szablonów, taką jak Themify.

Zamiast zmuszać Cię do zakasania rękawów i zagłębienia się w kod, Themify Builder oferuje intuicyjny interfejs typu „przeciągnij i upuść” do tworzenia w pełni responsywnych motywów WordPress. Dzięki Themify możesz wybierać spośród wielu gotowych motywów lub zaprojektować własne od podstaw.

Themify odrzuca wszystkie szczegóły implementacji, które leżą u podstaw projektowania stron internetowych dla różnych rozmiarów ekranu, ułatwiając szybkie uruchomienie witryny.

3. Komponenty

generator motywów komponentów

Components było doskonałym rozwiązaniem do tworzenia dostosowywalnych responsywnych motywów WordPress od Automattic, firmy stojącej za WordPress.com.

Aby użyć komponentów, wystarczy wybrać układ z listy — klasyczny blog, witryna biznesowa, portfolio, między innymi — a witryna Components wypluwa SASSoparty na szablonie z układami zoptymalizowanymi pod kątem urządzeń mobilnych oraz menu zarówno na komputery stacjonarne, jak i na urządzenia mobilne.

Niestety komponenty zostały wycofane.

4. Divi

Divi, o którym wspomnimy również poniżej jako jeden z najlepszych motywów WordPress do wykorzystania w biznesie, zaczął jako motyw.

W końcu ewoluował, aby stać się motywem, narzędziem do tworzenia stron typu „przeciągnij i upuść”, a teraz, wraz z ostatnimi wydaniami, także pełnym narzędziem do tworzenia motywów. W tym momencie Divi jest pełną ramą motywów WordPress, której można użyć do stworzenia dowolnego potrzebnego motywu, dzięki szerokiej gamie narzędzi.

4. Responsywne motywy WordPress dla biznesu

Jeśli wolisz po prostu kupić coś gotowego dla swojego biznesu, masz do wyboru tysiące, jedne lepsze od innych. Responsywność jest postrzegana jako „niezbędna” funkcja na rynku motywów WordPress i prawie każdy programista twierdzi, że ich produkt jest responsywny. Jednak ta funkcja może być trudna i nawet doświadczeni programiści mogą mieć problem z jej prawidłową implementacją.

Zanim przejdziemy dalej, możesz sprawdzić nasze pełne podsumowanie up Motywy WordPress dla witryn biznesowych i korporacyjnych.

To powiedziawszy, jeśli wybierzesz jeden z tych popularnych projektów, z których wszystkie można dostosować do potrzeb Twojej firmy, nie popełnisz błędu.

Divi

Divi elegant themes

Divi to niezwykle popularny responsywny motyw WordPress dla biznesu (lub czegokolwiek innego), kreator stron (Divi Builder), a także kreator motywów.

Produkt pochodzi z Elegant Themes — ugruntowana firma, która stworzyła wiele moich ulubionych produktów WordPress. Divi to motyw „dołączony do baterii” — zawiera każdą funkcję, jakiej możesz chcieć.

Wśród najważniejszych są Divi builder, który pozwala użytkownikom tworzyć układy bez kodowania, osiemnaście gotowych układów do wyboru i inteligentnie zaimplementowane reakcja na coś oznacza to, że Twoja witryna będzie wyglądać świetnie, niezależnie od tego, czy zostanie wyświetlona na komputerze stacjonarnym z dużym monitorem, czy na smartfonie z małym ekranem.

Wypróbuj Divi teraz i uzyskaj 10% ZNIŻKI do październik 2021

Polecam czytanie: jeśli masz ochotę korzystać z Divi wymeldować się CollectiveRay's pełna recenzja Divi.

Avada

Motyw biznesowy Avada WordPress

Avada to kolejna bardzo popularna pozycja.

Avada jest bogata w funkcje jak Divi i doskonale nadaje się do budowania witryn biznesowych, które można dostosować do różnych rozmiarów ekranu. Podobnie jak Divi, Avada umożliwia użytkownikom tworzenie unikalnych witryn bez konieczności kodowania.

Wizualny kreator stron Avada (Fusion) jest przyjemny w użyciu, a produkt zawiera wiele przemyślanych elementów, które sprawiają, że jest to doskonały wybór dla less technicznie skłonny właściciel witryny WordPress.

Spis zalecanych lektur: Po raz kolejny, dla głównych tematów, stworzyliśmy doskonała recenzja motywu Avada WordPress więc możesz w pełni zrozumieć, jak może ci to pomóc.

Sprawdź Avadę teraz

X

x wp biznes responsywny motyw

X to kolejny responsywny motyw WordPress dla biznesu, który ma na celu ułatwienie rozpoczęcia pracy dzięki pięknemu i niepowtarzalnemu projektowi, który świetnie wygląda na każdym urządzeniu.

Jedną z wyróżniających cech X jest jego system rozszerzeń.

Zamiast implementować funkcje w rdzeniu szablonu, X zapewnia wiele rozszerzeń funkcji, w tym siatkę, integrację TypeKit, suwak i wtyczki galerii. Podział funkcjonalności na rozszerzenia pozwala użytkownikom wybrać potrzebne im możliwości i uniknąć ładowania witryny zbędnym kodem, który może prowadzić do problemów z wydajnością i bezpieczeństwem.

Sprawdź demo X teraz

Inne szablony dla biznesu w Themeforest

Jeśli motywy, które tu przyjrzeliśmy, Cię nie ekscytują, nie martw się, są ich setki Motywy responsywne WordPress (dla wszelkiego rodzaju firm, organizacji i we wszelkiego rodzaju specyficznych niszach) do wyboru w Themeforest.

Wybierając produkt z oferty dostępnej w Themeforest, zwróć szczególną uwagę na oceny użytkowników — pomogą one oddzielić ziarno od plew. Należy również zwrócić uwagę na to, jak ostatnio przedmiot został zaktualizowany.

Jeśli nie był aktualizowany przez kilka miesięcy, powinieneś rozważyć poszukanie gdzie indziej; nieaktualne motywy mogą powodować problemy ze zgodnością i bezpieczeństwem.

5. Dlaczego responsywność jest najlepszym wyborem dla Twojej witryny biznesowej?

Responsywność to nie jedyny sposób na radzenie sobie z ruchem w sieci mobilnej.

Alternatywy obejmują dedykowane witryny mobilne i aplikacje natywne oraz aplikacje PWA (hybryda między witrynami mobilnymi i aplikacjami). Problem z każdym podejściem polega na tym, że wymagają one więcej pracy niż responsywna witryna.

Jeśli Twoja firma wybierze aplikację mobilną lub PWA, musi zainwestować w jej projektowanie, rozwój, utrzymanie i promocję. Pieniądze i czas są dzielone między witrynę internetową i aplikację — lub kilka aplikacji, aby obsługiwać popularne platformy mobilne.

Ten projekt pozwala jednak MŚP na utrzymanie jednej bazy kodu i poświęcenie zasobów na tworzenie najlepszej strony internetowej, jaką mogą. Istnieją okoliczności, w których aplikacje natywne są najlepszym wyborem, ale dla większości MŚP responsywność to lepsze wykorzystanie zasobów.

Wyobraź sobie, że potencjalny klient szuka usługi, którą oferuje Twoja firma, używając swojego iPhone'a. Znajduje to, czego chce, i dodaje to do zakładek na później.

Tego wieczoru otwiera zakładkę na swoim komputerze, a strona wygląda okropnie, bo dodała do zakładek wersję mobilną. Ten scenariusz nie jest tak zły, jak gdyby witryna w ogóle nie miała wersji mobilnej, a ona była zmuszona do radzenia sobie z niezmodyfikowaną wersją komputerową na swoim telefonie – nikt nie lubi szczypać i przesuwać, aby znaleźć to, czego chce – ale ten projekt umożliwić tej samej witrynie i tym samym linkom działanie zgodnie z przeznaczeniem na obu urządzeniach.

Posiadanie jednej witryny, która reaguje na urządzenie użytkownika, umożliwia również firmom zapewnienie spójnego brandingu we wszystkich punktach kontaktu.

Witryna będzie wyglądać tak samo, aczkolwiek dostosowana, i zapewni taką samą nawigację, ten sam wygląd i działanie oraz takie same wrażenia. Małe firmy z ograniczonymi budżetami często nie mają zasobów, aby utrzymać stałą jakość w wielu wersjach witryn i aplikacji.

Reagowanie oznacza, że ​​nie muszą.

Podobnie jak użytkownikom nie powinno się oferować fragmentarycznego środowiska, dla ruchu w sieci wyszukiwania lepiej jest, jeśli istnieje jedna kanoniczna lokalizacja online dla firmy. . Według Google zalety responsywnego projektowania to:

  • Utrzymywanie treści na komputery i telefony komórkowe pod jednym adresem URL, co ułatwia użytkownikom interakcję, udostępnianie i tworzenie linków do treści oraz przypisywanie właściwości indeksowania do treści przez algorytmy Google.

  • Google może skuteczniej wykrywać Twoje treści, ponieważ nie musielibyśmy indeksować strony za pomocą różnych programów klienckich Googlebota w celu pobrania i zindeksowania całej treści.

Google jest w stanie stwierdzić, czy użytkownicy mają dobre wrażenia w Twojej witrynie. Jeśli nie oferujesz witryny dostosowanej do urządzeń mobilnych, współczynniki odrzuceń dla użytkowników mobilnych wzrosną. Większość z nich powróci do wyszukiwarki. Google wie, kiedy użytkownik natychmiast wraca do SERP po kliknięciu wyniku i używa współczynników odrzuceń jako sygnału rankingowego.

Wreszcie, dla użytkowników WordPressa responsywność jest najłatwiejszą i najtańszą metodą zapewnienia dobrego doświadczenia użytkownikom mobilnym. Wiele najlepszych motywów premium jest zaprojektowanych tak, aby były responsywne, a koszt dostosowania istniejącego motywu do responsywności może być znacznie less niż koszt stworzenia aplikacji natywnej.

Biorąc pod uwagę te zalety, dla właścicieli małych i średnich firm, którzy korzystają z motywów WordPress, responsywne projektowanie jest zdecydowanie najlepszym rozwiązaniem w świecie, w którym korzystanie z Internetu mobilnego będzie tylko rosło.


O autorze
David Attard
Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/
David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.

Jeszcze jedna rzecz... Czy wiesz, że osoby, które udostępniają przydatne rzeczy, takie jak ten post, również wyglądają NIESAMOWITE? ;-)
Proszę zostaw użyteczny skomentuj swoje przemyślenia, a następnie udostępnij to na swoich grupach na Facebooku, które uznają to za przydatne i wspólnie zbierzmy korzyści. Dziękuję za udostępnienie i bycie miłym!

Ujawnienie: Ta strona może zawierać linki do zewnętrznych witryn produktów, które kochamy i gorąco polecamy. Jeśli kupisz sugerowane przez nas produkty, możemy otrzymać opłatę za polecenie. Takie opłaty nie wpływają na nasze rekomendacje i nie przyjmujemy płatności za pozytywne recenzje.

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...