20 niesamowitych responsywnych szablonów i motywów (bezpłatny i premium)
Elastyczne projektowanie stron internetowych jest w tej chwili modne, ale jako projektant zatrudniony w pełnym wymiarze godzin trudno jest znaleźć czas na zapoznanie się z nowymi trendami, bez względu na to, jak przydatne, a może nawet konieczne.
Gotowe motywy i szablony zapewniają szybki i łatwy sposób na rozpoczęcie pracy z responsywnym projektowaniem stron internetowych. Wiele z nich wykonuje całą pracę za Ciebie i zapewnia prosty przepływ pracy plug and play, inni zajmują się ciężkim podnoszeniem, zajmując się zapytaniami o media i dają pełną kontrolę nad projektem. Ten post zawiera 20 darmowych i premium szablonów, z których wszystkie są w pełni responsywne od razu po wyjęciu z pudełka.
Elastyczny układ: moda czy konieczność?
Ostatnio dyskutowano na temat responsywnego projektowania stron internetowych. Wiele osób uważa to za przyszłość projektowania stron internetowych, a nawet posunęło się do stwierdzenia, że po prostu nie robisz tego we właściwy sposób, jeśli witryny nie są zgodne z ich formułą dotyczącą maksymalnej kompatybilności. Inni twierdzą, że jest to kolejna zabawka z długiej linii mod, które przychodzą i odchodzą.
Odpowiedź jest prawdopodobnie gdzieś pomiędzy tymi dwoma. Prawda jest taka, że projektowanie stron internetowych rzeczywiście uderzyło w poważną przeszkodę w związku z bogactwem różnych rozmiarów ekranów, które teraz regularnie uzyskują dostęp do sieci. Wiele witryn nie może sobie pozwolić na pominięcie dużej części użytkowników mobilnych, ani nie może tworzyć niestandardowych witryn idealnie dopasowanych do każdego smartfona, tabletu, laptopa i komputera stacjonarnego na rynku.
Elastyczne projektowanie, czy to trend, czy nie, jest obecnie najlepszą odpowiedzią na ten problem. Jeśli zapytania mediów nie będą przychylne, będzie to po prostu dlatego, że pojawiło się lepsze rozwiązanie, a nie dlatego, że problem przestaje być ważny.
Nie mogę powiedzieć, w jaki sposób będziemy rozwijać witryny za dziesięć lat, ale można się założyć, że rozmiary ekranów będą coraz bardziej rozdrobnione, ponieważ wszystko, co ma bateria lub wtyczka, szybko uzyskuje dostęp do Internetu. Jeśli zdefiniujemy „responsive” projektowanie stron internetowych jako zestaw technik stosowanych w celu zapewnienia maksymalnej kompatybilności na jak największej liczbie urządzeń, to zdecydowanie nie patrzymy na modę, ale na obecny i przyszły standard dla profesjonalistów w naszej branży.
Niektórzy narzekają na dodatkowy wysiłek i czas programowania, ale tak naprawdę nie jest tak źle, jak mogłoby się wydawać, a po kilkakrotnym wpływie na przepływ pracy może być dość minimalny. Narzędzia w tym poście sprawiają, że jest jeszcze szybszy, odciążając cię, jeśli chodzi o elementy responsywne.
20 responsywnych szablonów i motywów
Yoko - darmowy motyw HTML5 / CSS3 WordPress 3.1+
„Yoko to nowoczesny i elastyczny motyw WordPress. Dzięki responsywnemu układowi opartemu na zapytaniach o media CSS3 motyw dostosowuje się do różnych rozmiarów ekranu. Projekt jest zoptymalizowany dla dużych ekranów komputerów stacjonarnych, tabletów i małych ekranów smartfonów. Aby Twój blog był bardziej indywidualny, możesz użyć nowych formatów postów (takich jak galeria, bok lub cytat), wybrać własne logo i obraz nagłówka, dostosować tło i kolor linku. ”
Szkielet
Szkielet to podstawa, dzięki której tworzenie responsywnych stron internetowych jest dziecinnie proste. Pisaliśmy o tym kilka razy na Design Shack i naprawdę uwielbiamy jego prostotę. Wraz z pobraniem otrzymujesz oczywiście plik demonstracyjny, który można łatwo wykorzystać jako szablon początkowy do budowania własnej pracy.
Responsive Twenty Ten (WP Theme)
Responsive Twenty Ten jest motywem potomnym domyślnego motywu WordPress z wieloma wspaniałymi funkcjami, takimi jak elastyczne obrazy. Autorzy dają ci pozwolenie na „pobieranie, branie, używanie, zmianę i robienie z nim wszystkiego, co chcesz”.
Onextrapixel Responsive Web Design Template
Bardzo prosty, ale solidny, darmowy szablon / samouczek do responsywnego projektowania stron internetowych. Jest to idealne, jeśli chcesz po prostu przekopać się i zobaczyć, jak działa prosty responsywny szablon bez całego puchu.
The Novelist: Responsive WP Theme for Writers
Wyjątkowo wyglądający motyw z symulowanym interfejsem otwartej książki, który skaluje się ładnie po zmianie rozmiaru przeglądarki. Idealny do osobistych portfolio pisarzy.
Motyw Ari WordPress
Ari to bardzo minimalistyczny motyw bloga, który jest bardzo atrakcyjny w swojej prostocie. Jest zbudowany dla WordPress 3 i nowszych i zawiera zarówno jasny, jak i ciemny motyw. Na pewno będziesz chciał rzucić na to okiem.
Golden Grid
Podobnie jak Skeleton, Golden Grid jest czymś więcej niż szablonem, jest strukturą do budowania responsywnych stron. Samo etykietowane jako składana siatka do responsywnego projektowania, „16 kolumn można łączyć lub składać w 8 kolumn dla ekranów o wielkości tabletu i 4 kolumny w przypadku ekranów mobilnych”.
Dobry minimalny - responsywny szablon HTML5
„Dobry minimalny to czysty i minimalistyczny szablon, który jest dobry dla portfolio, blogów i firm.” Pod wieloma względami bardzo podobny do poprzedniego szablonu, ale odważniejszy, bardziej unikalny design. Naprawdę podoba mi się wygląd typografii w tym.
iTheme2 (WordPress)
iTheme2 to wspaniały darmowy szablon bloga, który ma responsywny układ i mnóstwo wspaniałych funkcji, takich jak dostosowywany suwak funkcji, widżet mediów społecznościowych, dwie skórki motywów i wiele innych.
Folio Two
„Folio Two to zaawansowane portfolio, praktyczny i użyteczny szablon zaprojektowany w HTML5 + CSS3 i wykorzystujący jQuery, aby poprawić niesamowite wrażenia użytkownika.”
Ten szablon zawiera naprawdę ładną dużą siatkę obrazów, która zmienia się płynnie wraz ze zmianą rozmiaru okna przeglądarki. Siatka wygląda świetnie zarówno mała, jak i duża!
Motyw Grido WP
Grido jest niesamowitym i imponującym wyczynem sztuczek z układaniem stron internetowych. Ma zarówno układ podobny do muru, jak i responsywny system, który dostosowuje ten układ do kilku rozmiarów ekranu. Zawiera wiele schematów kolorów, galerię lightbox, siedem skórek i wiele innych.
Elastyczny motyw WordPress
„Elastyczny to motyw WordPress, który pomaga prezentować zawartość i wyświetlać ją tak, aby pasowała do różnych rozmiarów ekranów, z własnym projektem. Zapewnia również bardzo łatwą integrację z Facebookiem i opcją Fan Gate, którą musisz mieć, jeśli prowadzisz witrynę. ”
Motyw konstelacji WordPress
Ten motyw ma to wszystko. Jest nie tylko responsywny, ale oparty na HTML5 Boiler Plate i zawiera zarówno poziomą siatkę, jak i pikselowy idealny rytm pionowy, który ładnie skaluje się na różnych urządzeniach. To idealny punkt wyjścia do następnego projektu WordPress.
Bezszwowa, elastyczna siatka na zdjęcia
Miły mały eksperyment Chrisa Coyiera, który można pobrać i użyć. Jest to po prostu duża siatka zdjęć, która natychmiast dostosowuje się do różnej wielkości okna przeglądarki.
Motyw Tisa WP
Kolejny świetnie wyglądający i responsywny motyw Themify z dużą ilością dużych obrazów, piękną kolorystyką i sześcioma skórkami motywu.
Surykatka Responsywny motyw WordPress
„Motyw Meerkats został opracowany z myślą o różnych platformach i urządzeniach. Jest to prosty i podstawowy motyw WordPress zbudowany przez Gregora McKelvie. ”
Struktura tablicy
„Struktura tablicy dla WordPress została opracowana w celu przyspieszenia procesu tworzenia motywu WordPress. Whiteboard robi to, eliminując czas spędzany na kodzie wspólnym dla wszystkich motywów WordPress i zawiera nieinwazyjny kod, który poprawia ogólny motyw WordPress na wiele sposobów - w tym SEO, szybkość, użyteczność i wsparcie mobilne. ”
Zbudowany na popularnym frameworku Less, Whiteboard wykorzystuje zarówno HTML5, jak i CSS3 i daje prawie nie do pobicia punkt wyjścia do opracowania doskonale reagujących motywów WP.
Wniosek
Dzięki dwóm niesamowitym zasobom powinieneś być w pełni uzbrojony, aby rozpocząć tworzenie responsywnych projektów internetowych zarówno w prostym HTML / CSS, jak i WordPress. Bez względu na budżet, dostępnych jest kilka motywów i szablonów, które są dla Ciebie idealne.
Zostaw komentarz poniżej i daj nam znać, jeśli coś przeoczyliśmy. Czy natrafiłeś na jakieś świetnie reagujące szablony i motywy? Chcemy je zobaczyć!
){kind=link}