Tworzę teraz stronę internetową i staram się zdecydować, czy powinienem sprawić, by była płynna, czy nie. Witryny o stałej szerokości są znacznie łatwiejsze do wykonania, a także znacznie łatwiejsze, aby wyglądały spójnie.
Szczerze mówiąc, osobiście wolę patrzeć na płynne strony internetowe, które rozciągają się na całą szerokość mojego monitora. Moje pytanie wynika z faktu, że w większości nowoczesnych przeglądarek możesz kontrolować i przewijać kółko myszy, aby w zasadzie zmienić rozmiar dowolnej witryny.
Czy więc stworzenie płynnej strony internetowej jest warte kłopotu?
Odpowiedzi:
To zależy od odbiorców i treści.
Oto strony, które szanuję i myślę, że są przykładem do naśladowania.
Przykłady płynów:
Amazonka
Wikipedia
Przykłady statyczne:
jabłko
eBay
MSN
Przepełnienie stosu
MSDN
Niektórzy to pomieszają!
CNN
Myślę, że przez większość czasu wolę statyczne. Łatwiej jest sprawić, by dobrze wyglądał w większej liczbie przeglądarek. Jest również łatwiejszy do odczytania.
źródło
Uczynienie strony płynną, ale dodanie atrybutu min / max-width wydaje mi się najlepsze z obu światów. Obsługujesz płynność, ale ograniczasz ją przy określonej szerokości (powiedzmy 800px i 1200px).
To zależy od Ciebie - oto kilka rzeczy do rozważenia:
źródło
Absolutnie. Wielką niedogodnością dla osób posiadających ogromne monitory jest konieczność zmiany rozmiaru strony. W niektórych układach może też być nieco podejrzany. Niewielkie niedogodności, bez względu na to, jak trywialne, mogą faktycznie wpłynąć na opinie użytkowników na temat Twojej witryny.
Ponadto netbooki mają dziwne rozdzielczości, co utrudnia projektowanie witryn. Na przykład piszę to w rozdzielczości 1024 x 600.
Obecnie nie jest to szczególnie trudne (w nowoczesnych przeglądarkach), szczególnie w przypadku
min-
imax-height
w CSS, a nowe gradienty, etc w CSS3, więc skalowanie obrazu nie będzie tak duży problem w najbliższej przyszłości.W odpowiedzi na komentarz poniżej, myślę, że plusy przeważają nad wadami w tym konkretnym przypadku - IE6 jest wszędzie problemem. Musimy sobie z tym poradzić.
źródło
Musisz zdać sobie sprawę, że większość użytkowników komputerów nawet NIE WIESZ JAK powiększać przeglądarkę! Większość użytkowników jest tak daleko od zrozumienia komputerów, które mamy. Zawsze musimy pamiętać o tym fakcie.
źródło
Aplikacje tekstowe: Nie . Aplikacje oparte na stole: Tak .
Plusy płynnych układów
Wady płynnych układów:
Jeśli wyświetlasz dane tabelaryczne (iTunes, db manager, ...), szerokość płynu jest dobra. Jeśli wyświetlasz tekst (artykuły, strony wiki, ...) szerokość płynu jest zła.
źródło
Z perspektywy mojego iPhone'a układ o stałej szerokości jest problematyczny w przypadku korzystania z bloków kodu. Pasek przewijania dla szerokich bloków kodu nie pojawia się, więc nie mogę odczytać skrajnej prawej strony bloku.
W przeciwnym razie myślę, że to prosta kwestia, jaką stronę projektujesz i jak wygląda na ekranach i oknach o różnych rozmiarach. Jak wspomniano wcześniej, istnieje możliwość ustawienia maksymalnej szerokości, ale to samo zastrzeżenie dotyczy bloków kodu i iPhone'ów. Zaprojektowałem oba i nie wolę jednego od drugiego.
Chociaż fajnie jest patrzeć, jak pudełka się poruszają, gdy gram w przeglądarce z płynnym układem, ale łatwo mnie rozbawić.
źródło
Najważniejsze jest rozważenie dominujących przypadków użycia witryny lub aplikacji. Czy oczekujesz, że ludzie będą go używać wyłącznie na urządzeniach mobilnych? Telefony komórkowe, netbooki, komputery stacjonarne?
Spójrz na „Responsive Web Design” autorstwa Ethana Marcotte: http://www.alistapart.com/articles/responsive-web-design/
Świetny artykuł, który pokazuje użycie naprawdę płynnych układów za pomocą zapytań o media. Czasami trzeba zbudować osobny interfejs dla różnych programów klienckich, ale czasem zapytania o media są idealnym narzędziem do obsługi wielu rozdzielczości dla różnych programów klienckich.
źródło
To zależy od tego, co próbujesz zrobić. Spójrz na SO. Ma stałą szerokość i jest świetny. W rzeczywistości, gdyby był płynny, byłby to trochę PITA. Niektóre witryny wyglądają lepiej z płynnymi układami, ale osobiście wybrałbym stałe, chyba że masz dobry powód, aby przejść płynnie.
źródło
Wiele dobrych punktów w komentarzach, ale z twojego pytania wynika, że naprawdę lubisz płynne projekty i chcesz je stworzyć, więc idź do niego, to twoja strona, nie musi być jak każda inna strona w sieci.
Pamiętaj tylko o zaletach i wadach każdego rozwiązania.
źródło
Do pewnego momentu - tak.
Istnieje pewna szerokość, w której tekst zaczyna być irytujący, aby czytać, jeśli jest zbyt szeroki. Łatwy do przetestowania, jeśli masz duży monitor, po prostu chwyć notatnik i wklej do niego tekst bez łamania linii.
Jednak w przypadku mniejszych rozmiarów płynność może być dobrym pomysłem. Przeglądarki telefonów komórkowych coraz lepiej potrafią wyświetlać „normalne” strony internetowe, ale czasami mają ograniczoną szerokość i jako takie są korzystne, jeśli witryna może zmieścić się na nieco mniejszej przestrzeni.
Osobiście lubię też przeglądarkę na monitorze, ale tylko w połowie szerokości monitora (24 cale). Witryny, które dobrze się skalują, są bardzo dobre.
Myślę, że jest to głównie wygoda użytkownika. Nie wszystkie strony skorzystają z płynności, ale myślę, że strony, które mają dużo treści tekstowych, najbardziej skorzystają z tego, przynajmniej jeśli są płynne do maksymalnej szerokości (powiedzmy 800 pikseli lub cokolwiek innego)
źródło
Tak. Powiększanie strony jest świetne, ale jest używane przede wszystkim do powiększania tekstu, a nie do wypełniania obszaru ekranu. Z pewnością jeśli tekst jest już zbyt szeroki, powiększenie w celu dopasowania powoduje, że zwykle jest nieczytelny.
Potrzebujesz płynnego układu, jeśli chcesz dopasować tekst do rzutni, niezależnie od tego, czy jest powiększony.
Problem „trudnych do odczytania długich linii” jest często przeceniany przez projektantów próbujących uzasadnić projekty o stałej szerokości (*), ale w rzeczywistości nie wydaje się, aby trzymało się tak mocno na ekranie, jak na papierze. Oczywiście ważne jest ustawienie dobrej wysokości prowadzenia / linii, a maksymalna szerokość może być wykorzystana do zahamowania najgorszych przekroczeń długich linii. (Ustaw w jednostkach em zależnych od czcionki.) W IE6 nie otrzymujesz maksymalnej szerokości, ale to nie była katastrofa, jaką kiedyś była. (Możesz to naprawić odrobiną JavaScript, jeśli naprawdę zależy ci na tych facetach. Ja nie.)
(* które rzeczywiście mniej pracują w przypadku wysoce graficznych układów. Ale dla prostszego układu, takiego jak np. StackOverflow, tak naprawdę nie ma żadnego powodu, aby nie być płynnym. Tsk @SO, eh!)
źródło
Przedmowa: Nie jest profesjonalnym artystą internetowym.
Przekonałem się, że jest zbyt wiele drobiazgów, aby sprawić, żeby sprawy potoczyły się tak bardzo przy rozmiarach telefonów komórkowych i uber-szerokoekranowych, szczególnie w dość interesującej złożoności.
Zazwyczaj projektuję w pewnym sensie witrynę o stałej szerokości; zwykle ograniczone do [600,1200].
Uważam również, że super szerokie kolumny treści są kłopotliwe do przeczytania. Wydaje mi się, że pamiętam, że istnieją badania, które sugerują optymalną liczbę słów w wierszu kolumny.
źródło
Możesz to zrobić w ten sposób.
# Zmodyfikuj główny układ i zastosuj opcję „ max-width: 1140px ” i wyśrodkuj go.
Dzięki temu nie będzie „długich linii” tekstu na większych ekranach i właściwego osadzania strony na mniejszych (z wyłączeniem 800x *** i niższych).
Wdrożyłem tę metodę w moich nowych projektach i działa ona jak urok.
atb .. :)
źródło
Myślę, że decyzja płynna / naprawiona powinna opierać się również na treści strony:
W przypadku witryn z dużą ilością prostych informacji (takich jak portale informacyjne) lepiej zastosować płynny układ.
Usługi sieciowe lepiej wyglądają i działają w ustalonych wymiarach, dzięki czemu zawsze wiesz, gdzie w ich miejscach znajdują się elementy interfejsu i nie poruszają się one ciągle.
źródło
Tak, płynne strony internetowe są warte tworzenia
Jak powiedziałeś, wygląda dobrze i rozsądnie, jeśli właściwie planujesz na etapie projektowania.
Twoje wątpliwości dotyczące wpływu Ctrl + pasek przewijania nie są niczym wielkim. Ta funkcja służy przede wszystkim ułatwieniu dostępu, aby tekst był bardziej czytelny przez zwiększenie rozmiaru.
Jeśli jednak podasz wszystkie swoje rozmiary w pikselach (px), tak się nie stanie. Prawidłowa regulacja ma miejsce tylko wtedy, gdy użyjesz „em” do określenia rozmiaru. Masz więc sposób, aby włączyć / wyłączyć
źródło
Jestem wielkim fanem naprawionych na <800px ... łatwiej jest czytać węższe kolumny i będzie działać wszędzie. Oznacza to, że jeśli próbujesz stworzyć witrynę prezentującą hipertekst ... Strony prezentujące interfejsy aplikacji, myślę, że kolejna paczka robaków całkowicie ...
źródło
Płynna konstrukcja - naprawdę płynna - jest trudna. Bardzo trudny. To nie tylko kwestia szerokości strony - czy czcionki się skalują i czy wszystko skaluje się wraz z nimi? Idealnie:
em
zamiastpx
Nasz główny produkt jest płynny i z mojego punktu widzenia jako projektanta jest to ból, szczególnie dlatego, że obejmuje wiele treści generowanych przez użytkowników.
Po pierwsze, obrazy - w witrynie o stałej szerokości możesz mieć obraz, który wypełnia połowę szerokości i wygląda świetnie. W płynnej witrynie ten obraz równie dobrze może zostać utracony w morzu białych znaków, wyglądając raczej samotnie.
Życie powinno być łatwiejsze,
border-radius
a inne właściwości CSS3 wchodzą w grę bardziej, ale niestety naszą główną publicznością są pracownicy rządowi, którzy WSZYSTKIE WCIĄŻ WCIĄGNIJ IE F @! * ING 6!Aby odpowiedzieć na pytanie „czy warto”? tak , jeśli zrobisz to dobrze.
Oto scenariusz: wybierz witrynę o stałej szerokości: szef wyświetli ją klientowi na swoim nowym laptopie 1920 x 1600, a następnie narzeka na ciebie „jak wszystko wygląda na ekranie tego faceta!”
źródło
Myślę, że miło jest móc dobrze skalować na ekranie użytkownika, zamiast zmuszać użytkowników do przesuwania i powiększania. W czasach, gdy użytkownicy surfują po Internecie z tak szerokiej gamy urządzeń, od smartfonów po ultra-mobilne komputery PC, każde z własną, być może niestandardową rozdzielczością, myślę, że ważne jest, aby utrzymać wrażenia użytkownika na wysokim poziomie, gdy Twoja strona jest wyświetlana na takich ekranach. Jeśli chodzi o długość tekstu, może on być ograniczony pewnym współczynnikiem, więc dobrze pasowałby do układu. Myślę, że istnieją także frameworki, które mogą pomóc w płynnym pisaniu strony i pomóc w utrzymaniu kodowania.
źródło
Sprzeciwiam się większości i mówię NIE. Rozumowanie: płynne witryny, takie jak Wikipedia, to koszmar do czytania na dużych ekranach ze względu na ich długą długość linii (choć jej cytaty utrudniają czytanie w najlepszym momencie).
Problem naprawdę występuje, ponieważ nie ma mechanizmu do zmiany rozmiaru tekstu w stosunku do rozdzielczości ekranu. Jeśli możesz automatycznie powiększyć tekst w większych rozdzielczościach, możesz pozostać bliżej 80-znakowych znaków w wierszu, co jest ogólnie uważane za najlepsze pod względem czytelności.
Istnieje również problem z obrazami i innymi elementami o stałym rozmiarze. Możesz mieć duże obrazy i pozwolić przeglądarce je zmniejszyć, jeśli to konieczne, ale potem możesz napotkać inne problemy, takie jak znacznie dłuższy czas pobierania i problemy z jakością obrazu w wielu przeglądarkach.
źródło
Jestem fanem witryn, które mają ustaloną maksymalną szerokość między 800px - 1000px, ale mogę również zmniejszać skalę, dzięki czemu mogę czytać zawartość bez przewijania na bok i pomniejszania, ponieważ często tekst staje się zbyt mały do przeczytania i boli mnie oczy. Tak więc zwykle chcę dążyć, ponieważ chcę budować witryny, z których mogę być dumny.
źródło