Odpowiedni projekt strony internetowej, z natury, pozostaje niezauważalny dla osób, które konsumują treści online. Kiedy ktoś prosi o nową stronę internetową, często nie zdaje sobie z tego sprawy, mimo że doświadcza jej codziennie. A jednak responsywny projekt strony internetowej jest obecnie uznawany za standardową praktykę w całej branży.
Tworzenie responsywnych stron internetowych zmieniło nasze procesy, od tworzenia makiet kompletnych stron, po budowanie bibliotek komponentów i układów wielokrotnego użytku.
layout jest oparty na treści, a style są oparte na wynikach marki
Niedawno skontaktował się z nami istniejący klient, aby odpowiednio zmienić wygląd swojej witryny. Wcześniej pracowaliśmy z nimi przy użyciu sztywnego procesu kaskadowego. Przechodząc do zwinnego przepływu pracy, byliśmy w stanie zaakceptować zmiany w dowolnym momencie projektu.
W całym procesie przestrzegaliśmy filozofii, że układ jest oparty na treści, a style są oparte na marce.
Dokumenty specyfikacji doskonale nadają się do wymieniania wszystkich funkcji, które strona musi posiadać. Ale czy to naprawdę jest to, czego potrzebuje klient? Trudno wyobrazić sobie te funkcje w miejscu. W rezultacie dokumenty specyfikacji często zmieniają się w rozdęte listy życzeń. To nie pomaga klientowi, projektantom ani końcowej stronie internetowej.
Zamiast dokumentów specyfikacji zdecydowaliśmy się na użycie ramek z drutu. Pierwszym krokiem projektu było stworzenie ramek z drutu dla każdej strony. To może brzmieć jak przesada, ale ramki do drutu doprowadziły do wczesnych dyskusji na temat treści i funkcji każdej strony. Odkryliśmy, że funkcje, których nigdy wcześniej nie rozważaliśmy, zostały dodane, podczas gdy wiele z nich zostało usuniętych.
Ramki druciane dały nam wyraźną, wizualną reprezentację tego, jak treść i funkcjonalność powinny być traktowane priorytetowo na każdej stronie. Te ramy druciane stały się punktem odniesienia, zastępując dokument specyfikacji.
Kluczowe dania na wynos: produkcja ramek zamiast dokumentów specyfikacji skupia się na podstawowych cechach i znaczeniu treści.
Audyt ramek drucianych pozwala nam utworzyć listę wszystkich wspólnych elementów. W całej witrynie będą znajdować się dziesiątki małych sekcji na każdej stronie, które są bardzo podobne. Komponenty te można zestawić w wyczerpującą listę, która będzie później używana.
Ten etap ma trzy główne zalety:
Kluczowe wyjście na wynos: planowanie, jak podejść do front-endowego rozwoju projektu, jest ważne, aby stworzyć możliwą do utrzymania, szczupłą podstawę kodu.
Biblioteki wzorców to zbiór wspólnych elementów używanych na stronie internetowej. Skupiając front-end na budowaniu komponentów, które nie są zależne od stron, możemy zmniejszyć obciążenie kodu i poprawić spójność.
Korzystając z listy składników, które zestawiliśmy podczas etapu audytu, jesteśmy w stanie ustrukturyzować naszą Sass w zarządzalną kolekcję plików.
Użyliśmy bibliotek wzorców w kilku projektach, ale zawsze zmagaliśmy się z konwencjami nazewnictwa, szczególnie ze strukturą folderów: gdzie umieszczasz swoje style dla tego odtwarzacza muzyki, komponentów lub częściowych?
Wcześniej używaliśmy terminologii takiej jak częściowe i komponenty do porządkowania naszych plików Sass. Chociaż są to całkowicie legalne konwencje nazewnictwa, są one otwarte na interpretację. Kiedy wielu programistów pracuje nad projektem, pozostawienie organizacji bazy kodu otwartej na interpretację prowadzi do niezorganizowanego CSS.
BEM (Block, Element, Modifier), zapewnia nam wspólną konwencję do naśladowania i tworzy porozumienie pomiędzy programistami front-end. Dawny sposób pozostawiono poszczególnym programistom, aby wymyślili nazwy klas, które były zbyt wysokie, aby można było uzyskać jakiekolwiek znaczenie. Na szczęście mieliśmy szczęście zobaczyć Brad Frost mówić o swojej bibliotece wzorów na Konferencja z wyprzedzeniem w Manchesterze. Pattern Lab użycza terminologii z chemii, aby opisać składniki składające się na bibliotekę. Wykorzystanie atomów, cząsteczek i organizmów do opisania różnic między komponentami na stronie pomaga wyjaśnić koncepcję programistom nowym w projekcie.
Projekt atomowy jest przeznaczony dla interfejsów użytkownika: http://t.co/eEZSYeK5VF Możesz zastosować projekt atomowy do dowolnego interfejsu użytkownika, takiego jak Instagram pic.twitter.com/BrztgtRoGU
- Brad Frost (@brad_frost) 10 lipca 2015 r
W przyrodzie atomy są najmniejszą nazwą (chyba że zagłębimy się w kwarki i elektrony). W rozwoju sieci atomy są najbardziej podstawowymi elementami HTML. Do wszystkich celów i celów nie robią wiele samodzielnie. Należą do nich nagłówki, akapity, dane wejściowe, przyciski, listy ... Masz pomysł.
To kolejna warstwa w górę. W chemii cząsteczki składają się z atomów, a to samo dotyczy struktury CSS. Cząsteczki są składnikami strony internetowej, które wykorzystują atomy do ich tworzenia.
Dobrym przykładem cząsteczki jest pole wyszukiwania. Zawiera 3 atomy: etykietę, wejście i przycisk. Warstwa molekuł zaczyna formować niektóre elementy, które możemy wykorzystać na stronie internetowej. Ważne jest, aby wszystkie te molekuły były skalowalne. Powinny one być zaprojektowane z myślą, że mogą być używane w dowolnym miejscu na stronie. Naszym ostatecznym celem jest uczynienie CSS tak elastycznym i możliwym do ponownego wykorzystania, jak to możliwe.
Jak sama nazwa wskazuje, organizmy są grupami cząsteczek. Niektóre przykłady obejmują nagłówek, stopkę lub listę produktów.
Jeśli weźmiemy przykład nagłówka, będzie to logo, wyszukiwanie i nawigacja. Wszystkie zostały stworzone jako cząsteczki i są połączone w celu utworzenia organizmu głównego.
Tutaj kończy się analogia biochemii. Jak mówi Brad, "wejdź w język, który ma większy sens dla klientów i końcowego produktu" . Szablony są klejem na stronie internetowej. Łączą one wszystkie stworzone przez nas organizmy w układ, który można zastosować do strony na stronie internetowej.
Przykładem może być lista blogów. Ten szablon zawiera nagłówek, stopkę, listę elementów blogu i pasek boczny. Szablony mają zazwyczaj charakter strukturalny i zawierają tylko układ.
Ostatnia sekcja to strony. Tutaj możesz przetestować szablony z prawdziwymi danymi. Strony są określonymi wystąpieniami szablonu. Ta część jest ważna, ponieważ pozwala nam zobaczyć, jak skuteczne były atomy, cząsteczki, organizmy i szablony.
Jest nieuniknione, że podczas budowania strony niektóre scenariusze zostaną pominięte. Klasycznym przykładem są długie tytuły lub różne waluty i języki.
Kluczowe dania na wynos: ważne są konwencje nazw. Warstwa CSS tworzy czysty kod do pracy, który jest tak mały, jak to tylko możliwe.
Projektowanie wzorów jest trudne. Nie możesz zaprojektować odizolowanego wzoru, takiego jak element wiadomości, i oczekiwać, że pasuje on do reszty strony. Sposób, w jaki budujemy strony internetowe i sposób ich projektowania różnią się.
Projekty prawdopodobnie ulegną zmianie niezależnie od tego, czy otrzymamy podpisanie ... Podpisanie stało się nieistotnym krokiem w procesie, który wywierał presję tylko na obie strony
Użyliśmy Photoshopa do stworzenia makiet ramek z tymi stylizowanymi komponentami na miejscu. Gdy byliśmy zadowoleni z wyglądu i stylu projektów, przenieśliśmy się do wyodrębnienia każdego komponentu. To pozwoliło nam upewnić się, że każdy komponent był wystarczająco elastyczny, aby działał w dowolnym miejscu na stronie internetowej.
Byliśmy bardzo świadomi, że nie dostaniemy podpisu na żadnej pracy projektowej. Design sign-off tworzy barierę, w której projektant czuje się zmuszony do stworzenia czegoś, co zostanie osadzone w kamieniu. Projekty prawdopodobnie ulegną zmianie niezależnie od tego, czy otrzymamy podpis, czy nie. Zasadniczo z przyjemnością uwzględnimy wszelkie zmiany w dowolnym momencie na osi czasu projektu. Podpisanie się stało się nieistotnym krokiem w procesie, który wywierał presję na obie strony ze szkodą dla związku.
Ważne jest, aby wiedzieć, kiedy przejść z programu Photoshop do kodu. Ten krok jest dużo wcześniejszy, niż byliśmy przyzwyczajeni z dwóch powodów:
Zamiast spędzać dodatkowy czas w Photoshopie zdecydowaliśmy się zainwestować czas w kod. Jeśli powinniśmy cokolwiek udoskonalić, powinien to być kod, który będzie faktycznie używany i widziany przez wszystkich użytkowników strony. Dla nas Photoshop był narzędziem do tworzenia stylu, który można wykorzystać na stronie internetowej.
Projektowanie to dużo więcej na temat współpracy między wszystkimi w zespole. Makiety nadal stanowiły bardzo ważną część procesu, pomagając klientowi w wizualizacji wyglądu witryny. Gdybyśmy wszyscy byli zadowoleni z ogólnego kierunku projektu, przenieścilibyśmy go do kodu. Rzadko spędzaliśmy czas wracając do przodu i do przodu, poprawiając dokumenty Photoshop.
Kluczowe dania na wynos: Photoshop to świetne narzędzie do tworzenia koncepcji projektowych. Ważne jest, aby jak najszybciej kodować kod. Doskonały w kodzie, a nie w Photoshopie.
Piękno tego przepływu pracy jest tak wiele miejsc do przeglądu i poprawy strony internetowej.
Należy zauważyć, że są to luźne kroki w naszym procesie projektowym. Jeśli potrzebujemy czegoś nowego w trakcie projektu, będziemy traktować go jako samodzielny, modułowy komponent, który można umieścić na stronie internetowej i przyjąć motyw projektu witryny.
Każdy z tych kroków stanowi punkt, w którym możemy dokonać przeglądu naszej dotychczasowej pracy. Pozwala również na nowy zestaw oczu, aby zobaczyć rzeczy z innej perspektywy.
Podczas każdego z tych etapów może się okazać, że niektóre części nie działają tak dobrze, jak oczekiwano. To jest w porządku. W rzeczywistości jest dobrze. Złapanie słabej użyteczności na wczesnym etapie jest kluczowe dla udanej strony internetowej. Powracanie i obramowanie tych części strony sprawi, że projekt będzie lepszy, gdy zostanie uruchomiony.
Kluczowe dania na wynos: nie bój się wrócić do początku, jeśli coś wymaga poprawy. Złapanie tych wczesnych sprawi, że projekt będzie lepszy, gdy zacznie działać.
Spędziliśmy wspólnie kilka dni, aby zapewnić, że każda część witryny została wykonana w wysokim standardzie. Przetestowaliśmy jak najwięcej scenariuszy, zapewniając spójność przeglądania.
Gdy dane znajdują się na stronie internetowej, jesteśmy w stanie w pełni przetestować stronę internetową. Często zbyt łatwo jest ustawić projekt na żywo bez pełnego testowania. Możemy sprawdzić szybkość, łatwość nawigacji i, co najważniejsze, przepływ zakupów.
Wszyscy wspominali Apple o byciu perfekcjonistami, ale jestem pewien, że ich pierwsze próby były dalekie od doskonałości. Potrzeba czasu i poświęcenia, aby te ostateczne ulepszenia dały nam produkty, które kochamy dzisiaj. Korzystając z naszego laboratorium urządzeń, które obejmuje większość popularnych urządzeń i platform, byliśmy w stanie zapewnić, że doświadczenie zostało zoptymalizowane na jak największej liczbie najnowszych platform i rozmiarów ekranu.
Nauka z każdego projektu jest ważna, dzięki czemu możemy nieustannie ulepszać procesy prowadzące do lepszych stron internetowych.
W ramach projektu powstała nasza własna biblioteka wzorów, która zachęca do spójności między projektami. Pracując w agencji, możemy mieć jednocześnie kilkadziesiąt projektów będących obecnie w fazie rozwoju. Możliwość pracy z dowolnym projektem jest ważna.
Stworzenie bazy, w której wszyscy możemy pracować, przyczyni się do osiągnięcia tego celu.
Wydajność strony internetowej była rozważana tylko pod koniec projektu. Skuteczna strona responsywna musi być chuda i szybka. Ogromna gama urządzeń i ich możliwości znacznie się różnią od zupełnie nowych komputerów Mac do starych smartfonów. Budowanie witryny bogatej w media może być bardzo trudne w zarządzaniu wydajnością, szczególnie gdy próbujemy ją poprawić wstecz.
Na konferencji Upfront w Manchesterze, widzieliśmy Yesenia Perez Cruz mówić o rozważaniu wyników na każdym etapie projektu, w tym projektowaniu. Z perspektywy czasu jest to coś, co powinniśmy wdrożyć. Jako zespół wielu projektantów, programistów i front-endowych programistów, zarządzanie ogólnym rozmiarem i wydajnością (szczególnie postrzeganą wydajnością) powinno być większym priorytetem.
Wszystko na stronie ma koszt wydajności. Priorytetyzowanie tego, co jest ważne, zapewnia, że strona internetowa jest nie tylko szybka, ale dostępna dla większej liczby urządzeń. Na niektórych starszych urządzeniach okazało się, że strona internetowa nie tylko przeglosiła przeglądarkę, ale całe urządzenie. Próba przyspieszenia witryny z mocą wsteczną oznaczała, że nie możemy zrobić strony tak szybko, jak to możliwe.
Następnym razem upewnimy się, że wydajność wniknęła w każdy etap procesu, więc nie jest to refleksja.