Responsywne pytania dotyczące projektowania stron internetowych

Question

Czytałem już na temat responsywnego projektowania stron internetowych (RWD) i próbowałem zawrzeć mój mózg wokół tego pojęcia.

Czy projektowanie stron responsywnych jest naprawdę sposobem na rozwój mobilny? Podoba mi się pomysł, aby mieć jedną stronę, która powinna działać na wielu różnych urządzeniach, takich jak komputery stacjonarne, laptopy, tablety i telefony komórkowe.

Na komputerze mam szeroki ekran, więc moja witryna działa tak, jak została zaprojektowana. Ma kolumnę z większością mojej głównej treści i lewą lub prawą mniej szeroką kolumną (w zależności od tego, gdzie jesteś na stronie) do celów nawigacyjnych. W jaki sposób RWD określa, które kolumny są ułożone na których kolumnach? Czy zaczyna się od lewej strony ekranu, najpierw ładuje zawartość lewej kolumny, a następnie zawartość prawej kolumny? Czy jest możliwe, aby upuścić kolumnę, aby nie wyświetlała się na niektórych urządzeniach? Czy RWD radzi sobie z takimi rzeczami? Im szersze urządzenie, tym więcej treści chcesz wyświetlać, a mniej obszerne - tylko niezbędne do wyświetlenia.

W jaki sposób RWD obsługuje więcej tańszych telefonów? Telefony, które nie są tak naprawdę smartfonami? Co się stanie, jeśli telefon nie poradzi sobie z RWD, co wtedy?

Jak uzyskać siatkę danych z 20 kolumnami do wyświetlenia na telefonie komórkowym, który nie ma dużego ekranu? I stronicowanie?

To takie rzeczy, że nie wiem, czy RWD jest dla mnie? Lubię schludne strony zamiast wszystkiego, by wszystko zostało przyciśnięte, aby zawartość znalazła się na granicy ekranu telefonu.

Oprócz bootstrapów na Twitterze, należy rozważyć inne godne ramy RWD? Słyszałem o kilku przyzwoitych ramach.

Answer 1

To naprawdę duże pytanie. W skrócie działa to zazwyczaj następująco:

1. Stwórz witrynę mobilną z całą zawartością i funkcjami.
2. Skorzystaj z zapytań o media/javascript, aby sformatować zawartość, gdy stanie się ona szersza, albo płynnie, albo z punktami przerwania albo z obydwoma.
3. Dodaj wszystkie funkcje, które są tylko na wersji dla komputerów (najlepiej nie będzie żadnych)

Można użyć ajax załadować dodatkowe treści itp razie potrzeby, choć zwykle chcesz być o tej samej treści (dlaczego 30-40% odwiedzających chce, aby coś z nich było ukryte?)

Zazwyczaj koncentrujesz się tutaj na smartfonach, a nie na starych telefonach, które nie mają nowoczesnych przeglądarek internetowych.

Aby uzyskać szczegółowe informacje, np. siatki z 20 kolumnami, to trudne.

Być może odwrócić tabelę, aby była w inny sposób, i ma 20 wierszy, wyświetlać ją jako wykres, przesuwać w lewo i prawo, lub po prostu zastanowić się, dlaczego w ogóle tam jest - to niecodzienna rzecz na Strona internetowa.

Paging jest zwykle wykonywany jako nieskończony scroll - np. Aplikacja Apple's Mail.

Jeśli chodzi o ramy, nie ma takich, które rozwiążą wszystko dla Ciebie. Aspekt siatki Zurb's Foundation i Bootstrapa jest użyteczny, ale nie sprawi, że wszystko będzie działać błyskawicznie.

Answer 2

Cóż, to bardziej technika i zbiór najlepszych praktyk, a następnie coś, co aktywnie coś dla ciebie robi.

Tworzenie Responsive (Web) Designs oznacza oferowanie odwiedzającym/użytkownikowi najlepszego doświadczenia w użytkowaniu dla urządzenia dowolnego używanego urządzenia.

Ale w jaki sposób zaprojektować swoją zawartość (stronę internetową, aplikację internetową, aplikację) w połączeniu z rozmiarem ekranu i urządzeniem wejściowym, aby uzyskać najlepsze wrażenia z użytkowania, należy się samemu zastanowić nad swoim specjalnym przypadkiem użycia.

Istnieją techniki, dzięki którym można dowiedzieć się, które elementy są ważne dla użytkownika i jak je wyświetlić, ale nie ma ogólnej zasady, które elementy muszą być w jakim miejscu. (Zawsze są to zasady, które są prawdziwe, ale jest też kwestia gustu i zmiany w czasie)

Jak zatem wykonać Odpowiedź Designe? Na samym początku musisz dowiedzieć się, które elementy Twojej treści są ważne i czy znaczenie tych elementów różni się od użycia (czy kiedykolwiek myślałeś o tym, że użytkownik komputera prawdopodobnie spodziewa się innych informacji z tej samej strony/aplikacji następnie użytkownik mobilny)

Jeśli wiesz, które elementy są ważne, możesz je wymyślić. Ważną częścią tutaj jest na pewno rozmiar ekranu, ale także jakie urządzenie wejściowe jest używane, nie chcesz pokazać, że telefon używa małej listy lub małych przycisków nawigacyjnych.

I już mamy inny problem. Co to są tabele używane z rysikiem? A co z laptopami z ekranem dotykowym? Jak wziąć je pod uwagę? Jest to również coś, co należy do Ciebie, ponieważ sposób, w jaki używane są urządzenia, zmienia się wraz z upływem czasu.

Na pewno istnieją różne struktury, które pomagają lub już wykonują wiele czynności automatycznie. Ale nie powinieneś oczekiwać, że stworzą one najlepszy komfort użytkowania. Istnieją frameworki, powiedzmy szablonów dla zwykłych przypadków użycia sytuacji, a oni rzeczywiście automatycznie zmieni twoje menu i zdecyduje, jak go wyświetlić.

Ale Responsive Design nie oznacza, że ​​coś automatycznie określa, co należy zmienić, dla którego rozmiaru ekranu. Ale definiujesz, jak różne części powinny wyglądać i jak się zachowują dla różnych przypadków użycia (robiąc to sam lub używając biblioteki, która stara się zrobić dla ciebie najlepiej)

Answer 3

Aby "obsługiwać" tańsze telefony, nie sprytnie telefony, można użyć @media handheld and (orientation: portrait) { ... } Byłoby intuicyjne, gdyby smartfony, które są "ręczne", zwróciłyby true po sprawdzeniu "ręcznego", ale nie. Więc jeśli chcesz zoptymalizować pod kątem starych urządzeń przenośnych, możesz mieć dostęp do multimediów.

Należy również pamiętać, że @media screen and ... lub niektóre takie zapytania nie będą kierowane na starsze, nie-smart-telefony, ponieważ nie są "ekranem multimedialnym".

To odpowiada na jedno z twoich różnych pytań. Ale bardzo niewielki procent użytkowników znajduje się na tego typu urządzeniu, przynajmniej dzisiaj. W zależności od grupy demograficznej najlepiej będzie zignorować te stare telefony.

Answer 4

Rozwiązanie Responsive Web Design (RWD) w bootstrapie. Jeśli potrzebujesz 20 systemów siatki w swojej witrynie, możesz użyć niestandardowego CSS do ładowania początkowego, korzystając z tego linku: http://getbootstrap.com/customize/. W ten sposób konwertujesz witrynę w widoku mobilnym. Według mojego punktu jest to najlepszy sposób na rozwiązanie twojego problemu.