21 świetnych narzędzi do responsywnego projektowania stron internetowych
Jako projektant stron internetowych wiemy, że responsywne projektowanie stron internetowych zostało na zawsze. Poświęciłeś swój czas na zbudowanie bardzo pięknej i solidnej witryny, ze znaczną liczbą odwiedzin w Twojej witrynie z wyszukiwarek. Następnie dochodzisz do rzeczywistości urządzeń. Jakie urządzenie będzie używane do otwierania Twojej witryny? A co z wysokością i szerokością urządzenia? Istnieją tysiące urządzeń wraz z kilkoma wymiarami i rzutniami.
Jako projektanci stron internetowych wiemy, że nasz projekt będzie oglądany z różnych urządzeń i przeglądarek, a jednocześnie nasze bloki kodu będą wykonywane na różnych urządzeniach.
Nastąpił ogromny wzrost liczby urządzeń obsługujących Internet, wraz z dużą gęstością pikseli, interakcją, rozdzielczością itd., a także sądząc po obecnych trendach technologicznych, będzie więcej urządzeń, za pomocą których ludzie będą mogli uzyskać dostęp do sieci.
Fakt, że responsywne projektowanie stron internetowych jest niezbędne dla każdej sieci, nie oznacza, że jest to takie proste, biorąc pod uwagę fakt, że trzeba wziąć pod uwagę kilka urządzeń, a także wymiary i rzutnie. Wyzwanie polega na tym, że musimy stworzyć interfejs, który będzie skalować się z praktycznie wszystkimi urządzeniami, od małego ekranu po duże ekrany w sali teatralnej.
To po prostu sprawiło, że wszystkie strony internetowe musiały reagować na różne urządzenia, aby ułatwić nawigację i zapewnić lepszą obsługę.
Jeśli widziałeś jeden z naszych poprzednich postów na temat przydatnego zestawu narzędzi do projektowania responsywnych stron internetowych, wiesz, że w Internecie jest tak wiele narzędzi do responsywnego projektowania stron internetowych. Ale na podstawie mojego wieloletniego doświadczenia jako projektanta stron internetowych, programisty i konsultanta, w połączeniu z dokładnymi badaniami, które przeprowadziłem, podzielę się 21 wspaniałymi narzędziami i zasobami do responsywnego projektowania stron internetowych. Pamiętaj, dla projektantów, którzy jeszcze nie pogodzili się z responsywnym projektowaniem stron internetowych. Polecam przeczytać artykuł Znaczenie i przyczyny responsywnego projektowania stron internetowych, możesz również zadać pytanie, a ekspert odpowie na Twój adres e-mail. Następnie możesz kontynuować tutaj z 21 świetnymi narzędziami do responsywnego projektowania stron internetowych.
01 Fundacja ZURB
ZURB Foundation to jeden z najbardziej akceptowanych i zaawansowanych frameworków responsywnych witryn na świecie. ZURB wydał wiele zasobów na platformę, oprócz kilku wysiłków włożonych w projekt open source na platformie.
Fundacja ZURB ma ogromną strategię ulepszania, ponieważ możesz zwiększać złożoność warstwy w oparciu o rozmiar ekranu i możliwości projektowe. Nie tylko to, znajdziesz także obszerną bibliotekę składającą się z kilku komponentów interfejsu użytkownika, co ułatwia prototypowanie dowolnego interfejsu, jaki możesz sobie wyobrazić.
02 Jetstrap
Nastąpił ogromny zwrot w procesie projektowania, ponieważ model szkieletowy nie pokaże, jak dany projekt będzie wyglądał w kilku środowiskach internetowych. Do korzystania z niektórych narzędzi do prototypowania wymagana jest wiedza z zakresu kodowania.
I tu pojawia się Jetstrap. Pozwala projektantowi szybko złożyć prototyp, po prostu przeciągając i upuszczając komponenty z interfejsu użytkownika na płótno. Umiejętności programowania w zakresie frontendu nie są wymagane do rozpoczęcia, a skończysz z oddychającą stroną internetową. Wystarczy użyć narzędzi przeciągnij i upuść w interfejsie.
03 Tygodniowy projekt responsywny
Programista internetowy Justin Avery spędza czas na wysyłaniu dedykowanego biuletynu dotyczącego zasobów, narzędzi i technik projektowania responsywnych stron internetowych. Jako projektant spędzam część czasu na Twitterze, czytając kanały dotyczące responsywnego projektowania stron internetowych. Niektóre kanały obejmują najnowsze zasoby i pomocne wskazówki dotyczące tworzenia responsywnego projektu internetowego. Dołączenie do dyskusji na temat responsywnego projektowania stron internetowych z LinkedIn z pewnością poprawi Twoje umiejętności i dostarczy Ci najnowszych pomysłów na temat aktualnych trendów w responsywnym projektowaniu stron internetowych.
04 Prototyp stylu
Prototyp stylu to strona HTML przedstawiająca styl przycisku, typografię, kolor, styl fotografii, najazd i inne elementy proponowanej witryny.
Jednym z głównych celów prototypu stylu jest tworzenie produktów, które są użyteczne i możliwe do powielenia. Chociaż nie ma żadnych reguł dotyczących budowania prototypu stylu, musisz uwzględnić kilka podstawowych elementów, takich jak styl przycisku, typografia, kolor i przewijanie poza innymi elementami, które można uwzględnić.
Prototyp stylu umożliwia dodawanie animacji, kolorów i innych elementów w środowisku internetowym.
05 kolaży elementów
Podczas tworzenia makiet całostronicowych jedną z najtrudniejszych rzeczy, z którymi musimy się zmierzyć jako projektant, jest zaprojektowanie minuty każdej strony. Z profesjonalnego punktu widzenia wskazane jest, aby poświęcić więcej czasu na projektowanie wiadomości dla bohaterów na stronie głównej niż na pozostałych stronach.
Jako projektant, tworzenie makiet witryny w Photoshopie nie jest wskazane przy obecnych trendach w branży tworzenia stron internetowych, ponieważ masz wiele innych rzeczy do zrobienia.
Założyciel agencji SuperFriendly, Dan Mall, poszedł o krok dalej, upraszczając sprawy dzięki Element Collages.
Element Collages ma bardzo dobry interfejs użytkownika do wizualnej eksploracji komponentów interfejsu. Kolaże pomagają w kierunku wizualnym i nie musisz samodzielnie tworzyć całego komponentu, biorąc pod uwagę fakt, że nie projektujesz tylko dla jednego urządzenia.
06 Gruszki
Niektóre ważne zalety przewodników po stylu frontendu obejmują ułatwienie testowania, lepszy przepływ pracy, wspólne słownictwo i służenie jako punkt odniesienia, do którego można wracać. Gruszki to motyw WordPress typu open source stworzony przez Dana do tworzenia przewodnika po stylu frontendu.
Pears ułatwia projektantom korzystanie ze wspólnej biblioteki w celu uzyskania spójnego systemu projektowego.
07 Ikomun
Retina i inne wyświetlacze o wysokiej rozdzielczości szybko stają się na porządku dziennym, ikony map bitowych nie skalują się zbyt dobrze z tymi urządzeniami o wysokiej rozdzielczości. Na szczęście branża tworzenia stron internetowych jest w stanie sprostać temu zadaniu.
Skutecznym rozwiązaniem tego problemu jest utworzenie ikony niezależnej od rozdzielczości, którą można osiągnąć, tworząc niestandardową czcionkę ikony i osadzając ją w CSS @font-face.
Iconmoon po prostu ułatwia proces tworzenia i wyświetlania czcionek ikon. Będziesz mógł wybierać z biblioteki ikon, z opcjami przesłania swojej ikony. Stamtąd możesz następnie wygenerować niestandardową czcionkę ikony i pobrać pakiet zawierający czcionkę i odpowiedni CSS. Jeśli chodzi o tworzenie ikon niezależnych od rozdzielczości, Iconmoon jest ważnym narzędziem.
08 Foresight.js
Różne urządzenia mają różne sposoby wyświetlania obrazów bitmapowych, ale jako projektant musisz pamiętać, że ładowanie obrazów o wysokiej rozdzielczości może zwiększyć wagę strony. Wykrywany przez Foresight.js ma możliwość wykrywania wyświetlacza urządzenia i łączności, aby określić, czy załadować komponenty o wysokiej rozdzielczości, czy nie.
09 Detektor
Wykrywanie i profilowanie urządzeń może być czasami trudne, ponieważ zarządzanie biblioteką urządzeń jest trudne. Ponieważ wykrywanie funkcji opiera się na wykrywaniu po stronie klienta, więc wyłącznie poleganie na nim może powodować pewne ograniczenia elastyczności podczas dostarczania funkcjonalności do szerokiej gamy urządzeń.
Prowadzi to do stworzenia detektora przez Dave’a Olsena, wykorzystującego skrypt PHP i przeglądarkę opartą na Javascript, wraz z hostem biblioteki wykrywania cech. Użytkownicy biblioteki modernizują i wykrywają agenta użytkownika w celu określenia klas urządzeń. Detector ma możliwość samodzielnego dostosowywania się do nowych urządzeń i przeglądarek, bez konieczności pobierania informacji z centralnej bazy danych przeglądarki.
10 Enquire.js
Każdy projektant wie, jak ważne jest używanie zapytań o media w CSS. Co się dzieje, gdy w pewnym momencie chcesz zmienić niektóre doświadczenia? Można to łatwo wykonać za pomocą skryptu Enquire.js.
Skrypt Enquire.js używa matchmedia do warunkowego wykonywania niektórych funkcji i ładowania niektórych skryptów, jeśli spełnione są określone warunki. Dzięki temu możesz oczekiwać lepszego doświadczenia użytkownika i łatwości od użytkowników.
11 Licznik społecznościowy
Ładowanie widżetów udostępnianych w mediach społecznościowych, takich jak Facebook, Twitter i Google, zajmuje 19 widżetów żądań HTTP i dodaje dodatkowe 246,7 KB do wagi stron, co często wydłuża czas ładowania stron internetowych i zużywa więcej przepustowości.
Zach Leatherman rozwiązał ten problem, tworząc lekkie rozwiązanie o nazwie social count. Jest to mały skrypt, który leniwie ładuje widżety społecznościowe, dzięki czemu użytkownicy w ogóle nie są karani.
12 FitVidów
Niektóre obiekty multimedialne, w tym filmy, różnią się od obrazów w tym sensie, że po zmianie rozmiaru nie zachowują niektórych proporcji. Stwarza to problem ze skalowaniem podczas oglądania wideo z wielu różnych urządzeń z dostępem do Internetu.< br/> Chrisowi i innemu projektantowi udało się opracować wtyczkę o nazwie FitVids.js. Wtyczka jest w stanie wykryć i wykorzystać prawidłowe proporcje wideo lub dowolnego innego obiekty multimedialne podczas zmiany rozmiaru. Dzięki temu możesz uzyskać prawidłowy współczynnik zmiany rozmiaru podczas zmiany rozmiaru wideo, aw rezultacie uzyskać precyzyjnie wyświetlane obiekty multimedialne, w tym filmy w swoich aplikacjach.
13 Przyjazny dla IE CSS zorientowany na urządzenia mobilne
Każdy projektant wie, jak ważne są zapytania o media, ale faktem jest, że Internet Explorer nie obsługuje zapytań o media. Jednocześnie jako projektant nie możesz zdecydować się na rezygnację z media query tylko dlatego, że chcesz wspierać stary IE. Ten problem można łatwo rozwiązać za pomocą Sass. Sass pomoże nam w stylach mobile-first, a jednocześnie zapewni odpowiednie style desktopowe dla starej wersji IE.
14 miejsc pracy.
Jako projektant, jeśli sprawdzisz online, aby wyszukać narzędzia do testowania rzutni, znajdziesz wiele narzędzi do testowania widoku. Ale problem polega na tym, że większość narzędzi do testowania rzutni opiera się na popularnych szerokościach urządzeń, takich jak 320, 768, 1024 i tak dalej.
Sklasyfikowaj i wydobądź ogólne zakresy (małe, średnie, duże itp.), aby upewnić się, że wydobędziesz ogólne spektrum rozdzielczości.
15 proporcjonalnych zapytań o media
Niektórzy projektanci nadal używają wartości pikseli do ustawiania punktów przerwania, podczas gdy my używaliśmy szerokości, miar i jednostek czcionek w odniesieniu do różnych urządzeń. Dobry samouczek został przedstawiony przez Lyzę Gardner, który wyjaśnia, w jaki sposób możemy używać jednostek względnych dla punktów przerwania, aby zapewnić lepsze wrażenia użytkownika.
16 MQTest.io
Jako projektant czasami może być trochę zniechęcające śledzenie zapytań o media obsługiwanych przez konkretną przeglądarkę. Można to łatwo rozwiązać za pomocą MQTest.io opracowanego przez Viljami Salminen. Narzędzie pomoże Ci rozpoznać i przeanalizować różne zapytania o media, na które odpowiada inna przeglądarka internetowa. Dzięki temu możesz również korzystać z zapytań o media, które nie są powszechnie używane.
17 Bookmarklet zapytań o media Sparkbox
Sparkbox to bookmarklet zapytań o media, który pomaga określić zapytania dotyczące aktualnie używanych mediów lub mediów. Niezbędne jest, aby projektanci mieli dostęp do wymiarów ekranu, ponieważ oszczędza to czas, a także pomaga w określeniu proporcjonalnych zapytań o media.
18 BrowserStack
Jako projektanci wiemy, jak kosztowne, wymagające, a nawet zniechęcające może być testowanie w reprezentatywnym stosie przeglądarek i urządzeń. Można to łatwo rozwiązać, gdy korzystamy z BrowserStack.
Stos przeglądarki zapewnia zdalny dostęp do kilku urządzeń i środowisk, umożliwiając w ten sposób przeprowadzenie niektórych testów zapewnienia jakości. BrowserStack jest równie imponujący, jak wszystko inne, ponieważ jest również skuteczny podczas testowania na starych wersjach przeglądarki Internet Explorer.
19 Mobitest
Wydajność jest jednym z najważniejszych aspektów projektowania stron internetowych. Dzięki Mobitest będziesz mógł zobaczyć, jak radzą sobie Twoje projekty z pewną analizą.
Podczas testowania swojego projektu na Mobitest wystarczy podać adres internetowy, po czym narzędzie wyświetli stronę na prawdziwym urządzeniu, a jednocześnie poda wiele statystyk wydajnościowych, ponieważ będziesz mógł również poznać obciążenie czas i średni rozmiar strony wraz z innymi statystykami.
20 Kontrola Adobe Edge
Projektant stron internetowych nie może przecenić znaczenia testowania na prawdziwym urządzeniu, ponieważ przed opublikowaniem musi zobaczyć i przeanalizować rodzaj wydajności, jaką projekt przyniesie użytkownikowi. Narzędzie Adobe Edge Inspect sprawiło, że testowanie na prawdziwym urządzeniu było bardzo łatwe i proste, ponieważ narzędzie automatycznie odświeża wszystkie podłączone urządzenia. Możesz także testować kod na szerokiej gamie urządzeń.
21 CodePen Pro
CodePen to narzędzie, które szybko pomaga zademonstrować responsywne wzorce i techniki. Jest to narzędzie, które pomaga również w wykonywaniu naszych projektów na różnych urządzeniach i komputerach, podczas pisania.
CodePen to potężne narzędzie, które pomaga zobaczyć wyniki twojego kodu na wielu urządzeniach i komputerach podczas pisania.
Wniosek
Wszystkie 21 narzędzi wymienionych powyżej są dobre do responsywnego projektowania stron internetowych. Ale każde z narzędzi ma inną funkcjonalność, osobiście nie mam żadnych preferencji, ponieważ wszystkie narzędzia są skuteczne, chociaż mają inny interfejs i funkcjonalność. Wybór nalezy do ciebie.
Comments are closed, but trackbacks and pingbacks are open.