Naprawiono szerokość vs szerokość dynamiczna

Zauważyłem, że coraz więcej witryn przechodzi na układ o stałej szerokości, w którym zmiana rozmiaru okna przeglądarki powoduje jedynie pojawienie się pasków przewijania, w przeciwieństwie do elastycznego układu, w którym zmiana rozmiaru przeglądarki powoduje „zgniecenie” elementów strony .
Witryny StackExchange, takie jak ta, są przykładem stałego układu. GMail i iGoogle to przykłady elastycznego układu. Jakie są powody wybierania jednego?

Bardziej złożone projekty mogą być bardzo trudne do zrealizowania przy układzie o zmiennej szerokości. Wyobrażam sobie, że to odgrywa pewną rolę.

Istnieje również fakt, że czytanie bardzo szerokiego tekstu nie jest wygodne. Rozmiar kolumny w witrynach StackExchange jest łatwy do zarządzania i łatwy do odczytania. Dzięki układowi o zmiennej szerokości nie można po prostu rozszerzyć głównego tekstu tekstu, tak aby stał się nieczytelny. Nawet Google ogranicza szerokość wyników wyszukiwania.

Oczywiście, jeśli masz witrynę, w której jest mało miejsca (np. Dokumenty Google i Mapy Google), naprawdę chcesz skorzystać ze schematu o zmiennej szerokości, aby wykorzystać całą dostępną przestrzeń.

Naprawiono za pomocą jest znacznie łatwiejsze do opracowania dla złożonych witryn. Ponadto większość witryn o stałej szerokości będzie miała szerokość około 1000 pikseli. Powodem jest to, że tylko 1% przeglądarek używa 800 x 640, a 0% używa 640 x 480. Sprawdź najnowsze statystyki tutaj . Nie dotyczy to jednak urządzeń mobilnych. To jest zupełnie inna gra w piłkę.

Wartość układu o zmiennej szerokości polega na tym, że umożliwia użytkownikom łatwe korzystanie ze strony internetowej w oknie, które nie jest zmaksymalizowane.

Musisz spojrzeć na swoich odbiorców i zdecydować na podstawie tego, czego według nich oczekują, a jeśli szerokość zmiennej jest ważniejsza niż inne funkcje, których nie będziesz w stanie rozwinąć, jeśli będziesz musiał zrobić zmienną szerokość.

Istnieje również kompromis między tymi dwoma, w których ustawiasz minimalną szerokość i maksymalną szerokość (używając CSS), a następnie używasz procentowych szerokości, aby reszta przepływała pomiędzy dwiema skrajnościami. Na przykład możesz chcieć, aby kolumna menu po lewej stronie nie była węższa niż 200 pikseli, ale przepływała główna zawartość. Ta technika umożliwia skalowanie witryny do rozdzielczości odwiedzających, bez niemądrego patrzenia na wyjątkowo wysokie lub bardzo niskie rozdzielczości. HTML przecież został zaprojektowany z myślą o przepływie - jest to język znaczników, a nie ten sam, co print.

To podejście działa dobrze w przypadku stosunkowo prostych projektów, takich jak blogi lub takie, które zawierają wiele informacji tekstowych. Rzeczywiście, używam go na mojej osobistej stronie internetowej . W końcu wiele osób ma teraz monitory szerokoekranowe lub o wysokiej rozdzielczości - mój monitor roboczy ma szerokość 1680 pikseli - więc dlaczego mieliby tracić znaczną część nieruchomości i musieli przewijać się w poziomie po prostu dlatego, że projektant zdecydował się na stałą szerokość pasującą do ich ekran? W końcu dobry projekt polega na zapewnieniu użytkownikom jak najlepszych wrażeń - nie chodzi tylko o to, co wygląda „ładnie” na monitorze projektanta.

Być może nie będziesz musiał dokonać takiego wyboru. List Apart ma doskonały artykuł na temat responsive design . Główną ideą jest to, że można użyć zapytań o media, aby wychwycić zmiany w oknie przeglądarki lub rozmiarze rzutni i ponownie przypisać CSS w razie potrzeby. Jest tam wiele do przeczytania, więc zapoznaj się z tym artykułem, aby uzyskać wszystkie soczyste szczegóły. Ale dla długiego i krótkiego (czy to powinna być jego „szeroka i wąska”?) Spójrz na przed i po stronach ich przykładu. W przed łuski ładnie aż do punktu, strona, ale jeśli zrobisz to na tyle wąskie, że robi się trochę niezgrabne. po skaluje się także strona, ale zmienia także układ, gdy jest za wąski, aby skalowanie działało poprawnie.

Według Jakob Nielsen „s 113 Projekt wytycznych dla Homepage Usability :

67 Użyj ciekłego układu, aby rozmiar strony głównej dopasował się do różnych rozdzielczości ekranu.

Jest to również jedna z dziesięciu najczęściej naruszanych wskazówek dotyczących projektu strony głównej :

Walka z zamrożonymi układami wydaje się przegraną bitwą, ale warto to powtórzyć: różni użytkownicy mają różne rozmiary monitorów. Ludzie z dużymi monitorami chcą mieć możliwość zmiany rozmiaru swoich przeglądarek, aby jednocześnie oglądać wiele okien. Nie można założyć, że szerokość każdego okna wynosi 800 pikseli: dla niektórych użytkowników jest to za dużo, a dla innych za mało.

Co z pomyłką? Wyświetla sekcję # content w stałej szerokości (70em), jeśli jest wystarczająco dużo miejsca - w przeciwnym razie sekcja zostanie zmniejszona do 80% okna podglądu / okna przeglądarki.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

Zaletą dynamicznego układu jest to, że działa na wszystkich rozmiarach ekranu, w tym na urządzeniach mobilnych. Trudniej jest jednak sprawić, by wszystko wyglądało dobrze we wszystkich tych rozmiarach. Pytanie, które należy zadać, to: czy użytkownicy będą korzystać z urządzeń mobilnych?