[eternaljassie]

#responsivedesign #webdev #webdesign #photoshop
Mirasy potrzebuje pomocy a właściwie porady. Mam przygotować responsywny projekt sklepu internetowego. Chciałbym wykonać 3 widoki, ale do końca nie wiem jak powinien wyglądać grid oraz jakie szerokości strony (breakpointy) obrać. Wg bootstrapa powinienem wykonać, aż 4 różne widoki, ale wydaje mi się to za dużo roboty. możecie mnie trochę oświecić w tym temacie?

[Kerykejon]

wydaje mi się to za dużo roboty

@eternaljassie: Zmień robotę jak nie chce Ci się robić.

[npsr]

@eternaljassie: zrób tak, żeby wyglądało dobrze ?

[Mokrysedes]

@eternaljassie: Breakpointy dostosowuj do treści a nie na odwrót. Zacznij w widoku mobilnym i rozszerzaj aż zacznie wyglądać źle i napraw to breakpointem z określonymi zasadami CSS. Powtarzaj aż do momentu kiedy strona wygląda jak należy.

[eternaljassie]

@Kerykejon: Przy projekcie sklepu jest ok 8 podstron do zrobienia x 4 to 32 widoki sądze, że się obejdzie na 3. Musisz tak od razu z mordą?
@npsr: No jakieś założenia dobrze by było na początku mieć dlatego pytam jaki grid i jakie szerokości.

[marcinzwwa]

@eternaljassie: cztery widoki to za duzo roboty :D?

[eternaljassie]

@Mokrysedes: Bootstrap mówi, że widok mobilny to Phones (<768px) co z rozdzielczościami 320 px, 480 px? 768 px to dwa razy tyle co 320 wiec co wygląda dobrze tu nie do końca będzie wyglądało tam dobrze. Plik psd ma mieć 768 px szerokości i na tym mogę bazować?

[Kerykejon]

@eternaljassie: Szkoda słów. Źle sądzisz z 32 widokami.

[npsr]

@eternaljassie: założenia są proste: wyobrażasz sobie jak to wygląda, projektujesz a potem zastanawiasz się jak to wygląda na urządzeniach różnej wielkości i tyle :P Potrzeba 4 widoków, to robisz 4, zamkniesz się w 2 to też ok :P

[eternaljassie]

@Kerykejon: Może jednak przewijaj dalej bo z takim nastawieniem to na moda w elektrodzie masz spore szanse

[Mokrysedes]

@eternaljassie: Olej to co pisze bootstrap - dostosowuj breakpointy do treści. W psd możesz uwzględnić jak strona ma wyglądać w 768px ale to wcale nie musi oznaczać breakpointu dokładnie na 768px. Patrz w przyszłość - jeśli w tym roku apple wypuści ajpada z matrycą 767px to co wtedy? Upewnij się że strona wygląda dobrze na popularnych szerokościach ale nie daj im dyktować jak ma wyglądać Twój layout.

Pamiętaj żeby zacząć mobile-first.

[eternaljassie]

@Mokrysedes: Może i racja z tym ajpadem :P robię to w sumie pierwszy raz i niechciałbym żeby programista doznał szoku jak dostanie jakieś dziwne psdki w dziwnych wymiarach itd.

[Mokrysedes]

@eternaljassie: Wszystkich breakpointów i tak nie wyślesz jako psd. Dużo decyzji jest podejmowanych w trakcie, ale jak zaczniesz od widoku jednokolumnowego i zaczniesz skalować w górę to już na starcie masz treść w dobrym miejscu, potem to już stylowanie tylko.

[eternaljassie]

@Mokrysedes: z tym mobile first jest tylko taki problem, że klient najpierw chciałby zobaczyć wersję desktopową do niej wprowadzić poporawki i dopiero brac się za widoki mobilne ( ͡° ʖ̯ ͡°)

[Mokrysedes]

@eternaljassie: No to edukuj klienta ( ͡º ͜ʖ͡º) Ewentualnie zamiast gotowca psd daj mu wstępnie łajerfrejmy z wersją desktopową żeby wiedział co gdzie będzie a dopiero potem, gdy zaakceptuje rozłożenie, daj mu kilka grafik jak to ma wyglądać.

Poza tym mając zaprojektowaną wersję mobilną jesteś w stanie zaplanować wersję desktopową. Przy rwd przydaje się również obecność projektanta/dizajnera strony na etapie kodowania właśnie żeby podejmować indywidualne decyzje

[Mokrysedes]

@eternaljassie: Coś takiego: http://www.nomensa.com/blog/2013/using-content-priority-wireframes-to-assist-in-copy-production

[eternaljassie]

@Mokrysedes: Dzięki ci za wszystkie rady i poświęcony czas. Myślę, że już wiem co i jak