Czy płynne strony internetowe są warte tworzenia? [Zamknięte]


218

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?


1
if (a == 1) {+ a} else {'nawp'}
Sphvn

Odpowiedzi:


52

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.


17
Jak CNN to miesza?
Alix Axel

43

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:

  1. Tekst jest trudny do odczytania, gdy linie są bardzo długie.
  2. Twoi odbiorcy mogą mieć większe lub mniejsze rozdzielczości niż zwykle, a wybranie „niepoprawnej” szerokości statycznej będzie ich drażnić.
  3. Utrzymanie płynnego miejsca może być, ale nie musi być znacznie trudniejsze niż jego statyczny odpowiednik.

Jakieś komentarze na temat kompatybilności przeglądarki?
HaveAGuess,


Dzięki, daję szansę na reaktywną siatkę
getskeleton

37

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ć.


24
„W dzisiejszych czasach nie jest to szczególnie trudne” Błagam, by się różnić. IE6 jest nadal bardzo realny. Napisanie płynnego układu, który będzie działał w tym małym f @@@ er, jest mięsnym wyzwaniem. Spróbuj wyszukać „css święty graal”. Grrr.
spędza

4
Myślę, że podobnie jak wszyscy twórcy stron internetowych, lubię ignorować IE6 przez większość czasu. Nie pozbywa się tego, ale sprawia, że ​​jestem szczęśliwszy :). (Wiem, że omijam ten komentarz, ale nie mogę teraz wymyślić żadnej odpowiedzi.)
Lucas Jones,

91
ZATRZYMAJ WSPARCIE IE6
Jason

21
Tak, w utopii wszyscy przestalibyśmy WSPIERAĆ IE6, ale zazwyczaj pieniądze mówią inaczej.
spędzać

13
Według w3schools.com/browsers/browsers_stats.asp , 13% Internetu używa IE6, 15% używa IE7. To dobry powód, aby wspierać IE6. Prosta ideologiczna niechęć nie wystarczy, aby zrzucić IE6. Przepraszam Jason.
Paul Nathan

16

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.


2
OK, to znaczy co wtedy? Po której stronie się kłócisz?
Mark

1
Oznacza to, że opowiadam się za płynnymi witrynami, ponieważ nie możemy zakładać, że użytkownicy wiedzą, jak sami zmienić rozmiar.
Alex Baranosky,

Czy nie musisz zmieniać rozmiaru przeglądarki, aby stwierdzić, że witryna jest płynna? Jak ktokolwiek może nie wiedzieć, jak zmienić rozmiar okna?
mk12

1
tak, miałem na myśli powiększenie :) Ja właśnie powiększyłem swoją przeglądarkę po raz pierwszy w życiu 1 minutę temu.
Alex Baranosky

cóż, to ty nie wiesz, jak korzystać z komputerów
bevacqua

9

Aplikacje tekstowe: Nie . Aplikacje oparte na stole: Tak .

Plusy płynnych układów

  1. Ludzie z dużymi monitorami mogą korzystać z nieruchomości na ekranie.
  2. Łatwiej dla użytkowników z dużymi monitorami, gdy masz dużo informacji na swojej stronie.

Wady płynnych układów:

  1. Kolumna tekstowa o płynnej szerokości jest trudna do odczytania, jeśli jest zbyt szeroka. Użycie kolumn w gazetach jest uzasadnione: znacznie ułatwia przejście do następnej linii.
  2. (Nieco) trudne do wdrożenia, ze względu na ograniczenia w CSS.

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.


a Wikipedia jest trudna do odczytania w dużej przeglądarce, ponieważ przerwy między zdaniami nie skalują się wraz ze wzrostem długości linii. Bardzo trudno jest mi skanować moje oko tam i z powrotem, ponieważ nie ma „rynny”, którą można by podążać podczas poruszania moim okiem do przodu i do tyłu.
Ape-inago,

8

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ć.


6

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.


5

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.


1
Zawsze pasowałoby do mojej przeglądarki, zamiast zmieniać rozmiar. Jak by to była PITA? Są przypadki, w których skomplikowane układy graficzne są trudne do zrealizowania przy użyciu układu płynnego, ale z pewnością nie dotyczy to w dużej mierze spartańskiej konstrukcji SO.
bobince

2
byłaby to PITA, ponieważ wszystkie odpowiedzi rozciągałyby się na całej stronie. Cieszę się, że tekst zawija się w około 500 pikselach. dlatego książki mają zazwyczaj szerokość, ponieważ ludzie męczą się, gdy pewien punkt przesuwa się w bok ...
Jason

To nie jest PITA. Tak tego chcę. Jeśli chcesz ograniczyć bardzo długie linie, ustaw w nich maksymalną szerokość, ale 500 pikseli w typowym rozmiarze czcionki nie jest długie. Niewiele faktycznych badań nie potwierdza tradycyjnych długości linii drukowanych do odczytu na ekranie.
bobince

3
Wolałbym, żeby SO był płynny.
Nosredna

4

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.


3

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)


Zgoda. Wszystkie moje witryny buduję w szerokim zakresie 800 - 1200 pikseli. Patrząc na 1600 pikseli w poprzek strony, często nie ma wystarczającej ilości treści, aby się rozprzestrzeniać, i zaczyna wyglądać pusto.
womp,

2

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!)


2

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.


2

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 .. :)


1

Myślę, że decyzja płynna / naprawiona powinna opierać się również na treści strony:

  1. W przypadku witryn z dużą ilością prostych informacji (takich jak portale informacyjne) lepiej zastosować płynny układ.

  2. 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.


1

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ć


0

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 ...


0

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:

  • Rozmiary powinny być zdefiniowane w emzamiastpx
  • ... i dotyczy to rozmiarów elementów, nie tylko czcionek!
  • Biorąc pod uwagę zmianę rozmiaru czcionki lub poziomu powiększenia, elementy strony powinny mieć taki sam rozmiar względem siebie

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-radiusa 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!”


0

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.


0

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.


Myślę, że ludzie z ekranami o wysokiej rozdzielczości uczą się ustawiania domyślnego powiększenia, jeśli zbudujesz witrynę o stałej szerokości, być może będziesz musiał przeprojektować za rok lub dwa
HaveAGuess,

0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.