Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.
Od piątku nerw mnie trzyma. Szef nie słucha żadnego argumentu na temat projektowania stron i szablonów maili, za nic ma moją dwudziestoletnią praktykę w tym temacie i… nakazuje uczyć się „Dreamweaver’a”, który jego zdaniem jest najlepszym na świecie narzędziem. Ręce załamałem, naprawdę. Poczucie dumy z wielu lat pracy mi się nadszarpnęło.
Mam tę umiejętność, że dowolny kod źródłowy w HTML4/5, CSS2/3 potrafię napisać z palca, otwierając systemowy Notepad. Znając biegle składnię języka, pewien jestem, że w kodzie nie ma błędów, że tagi są pozamykane, a nawet gdyby się po drodze znalazło jakieś przeoczenie, to i tak wychwycę je na etapie końcowej walidacji W3. Od wielu lat mam zasadę, ze kod źródłowy powinien być w 100% zgodny ze specyfikacją i staram się jej za wszelką cenę trzymać.
Przyznam jednak przy tym, że w projektach prywatnych czasem nie chce mi się poprawiać składni, ale też nikt poza mną nie cierpi z tego powodu, więc dramatu wielkiego nie ma, nie?
Temat dyskusji dość banalny. Był brief w formie prostej grafiki PSD, ze wskazaniem na jej przerysowanie do formatu strony HTML i maila, jaki ma być wysyłany promocyjnie do klientów. Oba tematy realizacyjnie łatwe, zrealizowałem je w ciągu dwóch, czy trzech godzin. Tyle że nie założyłem tego, co mnie jeszcze spotka w tej materii.
Nie kodować manualnie!
Okazało się, że Szef zrobił swoje własne kodowanie z użyciem Dreamweaver’a. Interlinie, typografia i kilka innych elementów różniło się nie dość, że od briefu to jeszcze od wykonanej przeze mnie pracy. Kod źródłowy nieakceptowalny – niepozamykane tagi, dziesiątki powtórzeń tagów objętych znacznikiem komentarza, znaczniki poza jakimikolwiek specyfikacjami. A nade wszystko, design adaptacyjny, a nie responsywny.
Próbowałem tłumaczyć, że designu adaptacyjnego już się raczej nie używa na potrzeby konstrukcji małych serwisów, że ze względu na niezliczoną ilość urządzeń zdolnych do przetwarzania kodu HTML/CSS, że w obecnych czasach projektuje się RWD, bo gdyby przyjąć styl projektowania adaptacyjnego, to należałoby wykonać wersje stron dla wielu różnych rozdzielczości, że jest to strata czasu, itd. Niestety żaden argument nie spotkał się ze zrozumieniem. Odczułem, że mam problem, kiedy Szef nakazał mi zapisać się na kurs i zacząć się uczyć Dreamweaver’a.
Update (24.02): problem rozwiązał się sam. Freshmail wygenerował raport skreślający projekt opracowany w Dreamweaverze. Jakkolwiek można nie wierzyć w słyszane słowa, tak z systemem nie ma co dyskutować. Do tego z oczywistych powodów nakaz szkolenia z Dreamweaver’a się zdezaktualizował. Szkoda, że musiałem w ten sposób udowodniać swoje racje…
Adaptacyjnie, czy responsywnie?
Ogólnie rzecz ujmując, design adaptacyjny to taki, w którym tworzy się kilka różnych stron z jedną treścią. Odpowiednio przygotowany skrypt wykrywa rozdzielczość urządzenia, po czym następuje przekierowanie do dedykowanej strony. Design adaptacyjny, oparty o wartości procentowe, używa layoutu statycznego, opartego na breakpointach, które nie są reaktywne po tym, gdy zostaną załadowane.
Design responsywny z kolei to taki, w którym tworzy się kodyfikację uniwersalną dla każdego sprzętu, skupiając się na tworzeniu viewportu dla średniej rozdzielczości, a następnie — używając media queries — dopasowaniu go dla niskich i wysokich rozdzielczości. W praktyce wygląda to tak, że strona adaptacyjna nie będzie re lokować elementów strony w przypadku zmiany rozmiaru przeglądarki, zaś strona responsywna wręcz przeciwnie – w locie przebuduje swój układ zależnie od dostępnego miejsca w przeglądarce.
Zobacz jak wygląda różnica między tymi dwoma rozwiązaniami. Pierwszy przykład to witryna zaprojektowana adaptacyjnie, a druga w pełni responsywna.
Projektowanie adaptacyjne samo w sobie nie jest niczym nowym, ani złym, wymaga jednak większych nakładów pracy związanych ze stworzeniem wariantów witryny dla poszczególnych rozdzielczości. Wydaje się to zrozumiałe i zasadne w przypadku ogromnych serwisów, np. Onet.pl. W przypadku mikro serwisów i landing page’y większość problemów związanych z wyświetlaniem na urządzeniach mobilnych rozwiązuje się za pomocą projektowania responsywnego i media queries w CSS. Nie słyszałem, żeby było inaczej.
Termin „Adaptive Web Design” został zaproponowany przez Aaron Gustafsona w książce „Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement” na takie podejście do tworzenia stron internetowych, w którym przygotowuje się kilka różnych wersji strony dla wybranych rozdzielczości ekranu. Strona taka najpierw sprawdza, ile ma miejsca na ekranie do dyspozycji, by następnie wybrać najlepszą w danej sytuacji wersję strony do wyświetlenia internaucie. Jeżeli więc otworzymy stronę adaptatywną na komputerze stacjonarnym, to zostanie nam pokazana wersja najlepsza dla tego rodzaju komputera.
Pojęcie „Responsive Web Design” zostało po raz pierwszy użyte przez Ethana Marcotte w jego książce zatytułowanej… „Responsive Web Design”. Tłumaczenie najlepiej oddające istotę tego podejścia to „reagujący” web design. Otóż responsywne strony internetowe reagują na zmiany w szerokości przeglądarki, w której strona jest przeglądana, poprzez dostosowywanie rozmieszczenia i rozmiarów konkretnych elementów szablonu strony do ilości miejsca na ekranie, które jest do dyspozycji. Mówiąc najprościej, responsywne strony internetowe wyglądają jednakowo dobrze (o ile zostały dobrze przygotowane) we wszystkich przeglądarkach i na wszystkich urządzeniach. (famatech.pl)
Nie lubię śmieci w kodzie
Wracając jednak do Dreamweaver’a, który mnie gryzie mocno… Powiedziałbym, że ze względu na nadprodukcję kodu, nieprawidłowości w zakresie stosowania arkuszy stylów, czas poświęcony na naukę pracy w tej aplikacji wydaje się stracony.
Jedną z głównych wad korzystania z programu Dreamweaver jest to, że tworzy on dodatkowy kod na twoich stronach internetowych, co oznacza bałagan w wyszukiwarkach, dodając warstwę nieprzewidywalności do twojej produkcji. Jeśli chcesz mieć kontrolę nad swoją witryną na poziomie technicznym i zmaksymalizować wydajność, musisz napisać własny kod.
Dreamweaver jest odpowiedni dla witryn, które nie mogą konkurować o ranking wyszukiwania; pozwala również pisać w HTML, jeśli chcesz. Ponieważ zapewnia to, co najlepsze z obu światów – łatwość projektowania i kontrolę kodu – mimo wszystko może być przydatnym narzędziem dla biznesu. Jednak wielu specjalistów krytykuje Dreamweavera za źle napisane fragmenty kodu i nieaktualne kodowanie CSS. (creativebloq.com)
Był czas, 20 lat temu, kiedy stawiałem strony, używając MS Frontpage’a. Z czasem jednak zwiększyłem swoje umiejętności, poznałem semantykę języka programowania stron i nie wydaje mi się, żeby jakikolwiek program automatyzujący działania mógłby mnie pozytywnie zaskoczyć. Zupełnie nie wiem, jak się ta kontra skończy, ale o wiedzę i umiejętności się nie obawiam.