Na początku każdy zaprojektowany w przeglądarce. Jest tak, ponieważ dosłownie nie mieliśmy żadnych innych opcji. Edytor tekstu i przeglądarka były jedynymi narzędziami, jakie mieliśmy.
Sam HTML był dość prosty. Nie otrzymaliśmy nawet stolików do kilku lat po pierwszej przeglądarce. Kiedy wreszcie to zrobiliśmy, nie trzeba było długo czekać, aby ludzie zaczęli tworzyć z nimi układy. Oczywiście, zostały zaprojektowane dla danych tabelarycznych, ale zasady i standardy są strasznie zepsute, prawda?
Kilka lat, przezroczyste pliki .gif i PSD później, zwykła konfiguracja projektowania stron internetowych wyglądała następująco:
Projektant tworzy interfejs, który wygląda ładnie w Photoshopie. To może być użyteczne. Z drugiej strony może mieć tekst zbyt dobrze wkomponowany w tło nawigacyjne. Ważną rzeczą było to, że wyglądało to trochę 3D z wieloma gradientami i cieniami.
Wtedy ktoś (może projektant, może ich kumpel z kodeka) podzieliłby ten podstawowy interfejs, starannie odbudowując go wszystkimi tabelami i upewnił się, że zadziałało przynajmniej w IE6.
Czy ktokolwiek może pamiętać, co się stało, gdy klient chciał zmienić główne łącze nawigacyjne, a nawigacja składała się wyłącznie z obrazów?
Z czasem zmieniliśmy tabelę na CSS. Wtedy wielu z nas zmieniło się od kpienia z wszystkiego w Photoshopie do ponownego projektowania w przeglądarce. Koło zostało zamknięte. Stary znowu był nowy. IE6 został wrzucony w ogień Góry Przeznaczenia.
Dobre czasy.
Zacząłem projektować witryny gdzieś pośrodku tego wszystkiego, kiedy ludzie przenosili się do Photoshopa, ale mieliśmy także Dreamweaver, Frontpage i inne plagi, mające na celu ukaranie grzeszników.
Byłem dzieckiem. Nie wiedziałem nic lepszego. Nie wiedziałem, jak działały HTML i CSS. Ja też tego nie wiedziałem:
Mówiąc najprościej, żadna aplikacja do wizualnego projektowania stron internetowych nigdy nie zaoferuje samej elastyczności wynikającej z samodzielnego pisania HTML i CSS. Napisanie własnego kodu HTML i CSS pozwala wypróbować nowe techniki, napisać najmniejszy kod z największym skutkiem i ogólnie po prostu tworzyć lepsze strony internetowe.
Nie tylko można tworzyć lepsze strony internetowe, ucząc się pisania HTML i CSS. Te stare programy, FrontPage, Dreamweaver, wszystkie były znane z pisania szczególnie okropnego kodu. To było nadęte, powolne, prawie niemożliwe, aby zrozumieć, kiedy przeszedłeś do edytora tekstu.
Nawet pomijając leżący u podstaw znacznik i stylizację, oprogramowanie było okropne, szczególnie jeśli nie wiesz, jak działa HTML i CSS. Wiesz, jak w starych wersjach programu Word złe umieszczenie jednego obrazu w dokumencie mogło zepsuć umieszczenie wszystkich innych elementów?
Wyobraź sobie to, ale nie wiedząc, jak to naprawić, ponieważ usunięcie obrazu nie spowodowało, że wszystko wróciło tam, gdzie było wcześniej. Dodaj zagubienie się w interfejsie do tego wszystkiego, a to było po prostu złe doświadczenie.
Gdy aplikacje takie jak Ara , Webflow , Webydo , a inni po raz pierwszy wyszli, byłem bardzo, bardzo sceptyczny. I dlaczego miałbym nie być? Byłem wcześniej spalony. Poza tym po prostu odstąpiłem od używania Photoshopa do wszystkiego i wiele się nauczyłem, projektując w przeglądarce.
Ale ostatnio miałem powód, aby przyjrzeć się bliżej tym nowym aplikacjom i przyjrzeć się stronom, które zostały z nimi wykonane. Wbrew wszystkim moim zastrzeżeniom zmieniam zdanie.
Podczas gdy stoję po tym, co napisałem kilka akapitów, kod naprawdę się poprawił. Wieloletnie doświadczenie i rozwój oparty na standardach zostały uwzględnione w tych aplikacjach. Nikt nie chce wracać do dawnych sposobów.
To nie jest idealnie zoptymalizowany kod. Ale wtedy nie musi tak być. Nikt nie zbuduje nowej Wikipedii z Macawą lub Webydo. Rynek tych aplikacji składa się z małych i średnich firm, które potrzebują dobrej witryny promocyjnej.
O ile nie zostaną trafieni przez tysiące odwiedzających każdego dnia, mniej niż doskonały kod nie będzie miał większego znaczenia.
Inspiracje czerpię z różnych miejsc, ale czyste, czyste płótno jest jednym z najlepszych. Jest tak pełen możliwości, z potencjalnymi rozwiązaniami. Siedzę, patrzę, a potem zaczynam klikać.
A przynajmniej tak to zrobiłem, kiedy wyśmiałem wszystko w Photoshopie. Projektowanie witryny z kodem sprawia, że nieco trudniej jest tak szybko iterować. Czasami mam problem z wypuszczeniem czegoś, do czego włożyłem pół godziny kodu CSS.
Przeciąganie po iteracji przeciągnij i upuść jest po prostu szybsze.
Pierwsza strona rozpoczęła moją karierę. Nigdy bym się nie pojawił w projektowaniu stron internetowych, gdybym nie miał (względnie) łatwego GUI, by mnie uruchomić. Na pewno, aby jak najlepiej wykorzystać coś takiego jak Webflow, nadal musisz znać podstawy HTML i CSS, ale są one świetnym miejscem do nauki tych rzeczy.
I ta branża potrzebuje czegoś takiego dla następnej generacji początkujących.
Pod wieloma względami jest to wiek twórcy strony wizualnej. Początkujący całkiem szczerze nie chcą uczyć się Git, Gulp, NodeJS, a nawet naprawdę otworzyć terminal. Chcą umieścić wiadomość na swojej stronie internetowej i skończyć z nią. Co więcej, mniej klientów widzi sens płacenia tysiąca dolarów lub więcej za prostą witrynę promocyjną.
Czas skorzystać z tych narzędzi dla tych, którzy nie mogą sobie pozwolić na pieniądze lub czas na specjalistyczne projektowanie i tworzenie stron internetowych. Narzędzia są gotowe, podobnie jak rynek.
I to w porządku przeze mnie.
Przedstawiony obraz, obraz narzędzi do projektowania sieci przez Shutterstock.