GoldenLine
Zaloguj się
Damian Komon

Damian Komon Student, Technikum
Informatyczne

Temat: Responsywna strona - grafika, kod

Cześć,

mam pytanie odnośnie reponsywności strony. Grafik przygotowujący grafike powinien w jakich rozdzielczościach ją stworzyć?

Czy taki układ jest uniwersalny?
- 1366px
- 950px
- 730px
- 320px

Mowa o szerokości oczywiście.
Oczywiście lepiej byłoby gdyby tylko przy 3 rozdzielczościach wystarczyło tworzyć - czas.

Proszę o wyjaśnienie tej kwestii
Link do wypowiedziLink
Marek Brzeziński

Marek Brzeziński webmaster

Temat: Responsywna strona - grafika, kod

Ja robię tak:

robię projekt strony. wygląda tak samo od 1024 px do 2500px.

Potem zastanawiam się kiedy ten projekt kalując go w dól zacznie się sypać. jeśli zobaczę że przy 800px już jest cos nie tak, przerabiam, i patrze w jakiej rozdziałce znów się posypie. Np przy 600 px się sypie, robię korekty i tak aż dojadę do 300px.

Ustawiam równiez sledzenie czy mam do czynienia z mobilnym, jeśli tak, menu na przykład jest dla nich zawsze ustawione na mobilne ( jquery mobile na przykład)

Generalnie, każdy ma swoje strategie. Niektórzy na przykład projektują projekt najpierw na mobilne, a dopiero potem desktop,chociaż ja tak nie lubię.

Nie ustawiam sobie progów rozdzielczości. Po prostu od ~ do 300px testuję projekt na żywo i koregujęTen post został edytowany przez Autora dnia 20.05.14 o godzinie 20:17
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Aż muszę się wypowiedzieć, bo boli mnie patrzenie na tego typu podejścia :)

Damianie - a do jakich użytkowników jest kierowana witryna? Jacy użytkownicy (o jakich rozdzielczościach ekranów) będą z niej najczęściej korzystali?

Witryna może być kierowana stricte dla użytkowników urządzeń przenośnych np. telefonów / smartfonów. Ale czy ma być dostosowana dla użytkowników np. tzw. featurephone'ów z rozdzialczościami do 320pikseli czy też nie (dodatkowo nie korzystających w ogóle z Javascript!) ? A może więcej użytkowników będzie wyświetlało witrynę na dużym monitorze z rozdzielczością HD. Czy pozostawianie witryny na szerokości 1366 pikseli będzie wówczas fair i wygodne dla tychże użytkowników? :)

Jeśli coś ma być kierowane "do wszystkich" to polecam podejście prawdziwie responsywnej strony internetowej, która opiera się na wartościach procentowych (dla elementów stałych, graficznych etc.) oraz tzw. "emach" dla czcionek. To, o czym domyślam się piszesz i rozmawiamy to podejście tzw. adaptatywne - dostosowujące się do pospolitych i najpopularniejszych przedziałów rozdzielczości ekranów.

Jeśli strona już funkcjonowała, a jej przebudowa jest wynikiem obserwacji danych analitycznych to dane te jest stosunkowo łatwo pozyskać i odpowiednio "obrobić". Jeśli nie - jest to wróżenie z fusów lub (mam nadzieję) efekt dobrze zaplanowanej i przeanalizowanej strategii wdrożeniowej.

Nie ma uniwersalnych układów i tzw. breakpointów rozdzielczości ekranów. Sama fragmentaryzacja urządzeń mobilnych z systemem Android to setki, jak nie tysiące konfiguracji, co fajnie ukazuje poniższa graficzka:

Obrazek


Warto też na etapie projektowania skonsultować to z programistami, którzy będą te layouty "kodowali". Jeśli zamierzają oni skorzystać z jakiegoś popularnego frameworka do implementacji RWD np. Twitter Bootstrap, to punkty, na których ten framework "łamie" swój wygląd domyślnie są do wglądu w dokumentacji platformy - http://getbootstrap.com/css/#responsive-utilities. Analogicznie w przypadku innych narzędzi.

Jeśli chcesz to zaprojektować sam to pamiętaj również o tym, że wówczas właśnie swoim programistom dokładasz pracy :) Może jestem trochę niezbyt tradycjonalny ale wolę (i tym samym sugeruję to innym) więcej analizować niż później walczyć. W razie innych pytań i kłopotów - chętnie pomogę :)
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Marcin Z.:
Nie ma uniwersalnych układów i tzw. breakpointów rozdzielczości ekranów. Sama fragmentaryzacja urządzeń mobilnych z systemem Android to setki, jak nie tysiące konfiguracji
Dlatego też projektowanie grafiki serwisów RWD w statycznych narzędziach typu Photoshop jest skomplikowane i nieefektywne. Zawsze znajdzie się dodatkowa wersja ekranu do zaprojektowania np. wersja dla iPhona, iPada, smartphony z niskim dpi, featurephony i do tego każdy ekran w wersji horizontal oraz vertical.
IMHO lepszym podejściem jest projektowanie bezpośrednio w przeglądarce w oparciu o dobrze zaprojektowany prototyp.
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Łukasz Ś.:
Marcin Z.:
Nie ma uniwersalnych układów i tzw. breakpointów rozdzielczości ekranów. Sama fragmentaryzacja urządzeń mobilnych z systemem Android to setki, jak nie tysiące konfiguracji
Dlatego też projektowanie grafiki serwisów RWD w statycznych narzędziach typu Photoshop jest skomplikowane i nieefektywne. Zawsze znajdzie się dodatkowa wersja ekranu do zaprojektowania np. wersja dla iPhona, iPada, smartphony z niskim dpi, featurephony i do tego każdy ekran w wersji horizontal oraz vertical.
IMHO lepszym podejściem jest projektowanie bezpośrednio w przeglądarce w oparciu o dobrze zaprojektowany prototyp.

* Nie ma też narzędzi ani ludzi, którzy by to przystosowali do wszystkich ekranów (i to w dodatku przetestowali) :)

* mówię o śmiertelnikach i Kowalskich nie dysponujących budżetami i zasobami takimi jak Google, Facebook etc.

Trzeba po prostu wiedzieć co i dla kogo chce się osiągnąć. Wówczas można to sobie zmakietować i zaprojektować graficznie. Podejście jest ciekawe i z pewnością skraca czas potrzebny na przygotowanie gotowej witryny / systemu, chociaż tak jak wspomniałem wcześniej - wolałbym i sugerowałbym tego typu rozwiązania po prostu wcześniej odpowiednio przemyśleć, rozrysować aby wiedzieć co i jak ma powstać, a potem to najzwyczajniej wykonać :)Ten post został edytowany przez Autora dnia 21.05.14 o godzinie 00:18
Link do wypowiedziLink
Marek Brzeziński

Marek Brzeziński webmaster

Temat: Responsywna strona - grafika, kod

IMHO lepszym podejściem jest projektowanie bezpośrednio w przeglądarce w oparciu o dobrze zaprojektowany prototyp.

No właśnie o tym piszę. Święte słowa
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Marcin Z.:
wolałbym i sugerowałbym tego typu rozwiązania po prostu wcześniej odpowiednio przemyśleć, rozrysować aby wiedzieć co i jak ma powstać, a potem to najzwyczajniej wykonać :)
Od tego właśnie jest prototyp (dobrze przemyślany i przetestowany).
Link do wypowiedziLink
Wojciech Mazurek

Wojciech Mazurek właściciel, PPHU
Neuron

Temat: Responsywna strona - grafika, kod

A ja się czasami zastanawiam na ile ma sens tworzenie strony która będzie "wyglądała" .....
Na razie brak mi czasu i przede wszystkim wiedzy ale mam taki pomysł aby stworzyć coś ala apka -
z użyciem jquery mobile dla telefonów. Uważam że, pomijając strony wizytówkowe, tworzenie jednej strony dla desktopa, tabletu i telefonu jest bez sensu - na telefonie trzeba wywalić ozdobniki i każdą nadmiarową informację której pełno jest na stronach kreowanych dla desktopów. Zakładam, być może błędnie, że jeśli ktoś wejdzie na moją stronę z telefonu to albo przypadkiem - wartość takiego wejścia jest niska i szkoda na nie prądu albo na przykład aby dobrać się do pdfa i wtedy lepsza była by np 100 pozycyjna lista zasobów (oczywiście dobrze zrobiona technicznie) niż nawigowanie po 20 podstronach.
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Z jednej strony mówią "mobile first", a z drugiej jest klient, który jednak chce, aby najpierw (przynajmniej najpierw) strona "wyglądała".
Ale diabeł tkwi w ogóle w projekcie IMO... projekt musi brać pod uwagę responsywność, jeśli to potem ma się fajnie "dziać".

Ja robię na 1170 od jakiegoś czasu i łamię przy nawet 900 do mobila. Trochę na skróty, ale przy takich budżetach i targecie, jaki ja mam, to no cóż...

No i - Wojciech - pytanie, czy mówimy o jednej treści dla wszystkich mediów, czy o stylach. Bo ozdobniki wyrzucasz sobie stylami. Druga dyskusja, to serwowanie treści i metodologia ich ukrywania/zmiany. Ale to już chyba zależy od konkretnego wdrożenia.
Link do wypowiedziLink
Damian Komon

Damian Komon Student, Technikum
Informatyczne

Temat: Responsywna strona - grafika, kod

Wydaje mi się że jednym z dobrych podejść może być zaprojektowanie grafiki w photoshopku pod 3 szerokości.

- Komórki - projekt grafy 320px szerokość - zakres działania takiej grafy 0-519px
- Tablety - projekt grafy 520px szerokosc - zakres dzialania 520-959px
- Monitory - projekt grafy 960px szerokosc - zakres dzialania 960-nieskończoność px

Wydaje mi się że takie podejśce zbuduje nam w miarę ciekawą reponsywnie stronę.
Jako tako nie mam teraz konkretnego zadania do wykonania, pracuje nad tworzeniem stron w celach ćwiczeniowych. I jedną z ważnych aspektów zanim chciałbym zacząć projektować jest responsywność - warto to przemyśleć dużo wcześniej, niż potem pisać od nowa style pod mniejszą.

Co myślicie o projekcie w takich wymiarach? Co byście zmienili?

Również wydaje mi się że grafe powinniśmy projektować w jak najmniejszej wartości (szerokości) danego przedziału (tj. 520px i 960px), ponieważ przy powiększeniu, treść może pozostać, a tylko tło wydłużyć się.

Hmmm..... :)
Link do wypowiedziLink
Wojciech Mazurek

Wojciech Mazurek właściciel, PPHU
Neuron

Temat: Responsywna strona - grafika, kod

Miłosz W.:
No i - Wojciech - pytanie, czy mówimy o jednej treści dla wszystkich mediów, czy o stylach. Bo ozdobniki wyrzucasz sobie stylami. Druga dyskusja, to serwowanie treści i metodologia ich ukrywania/zmiany. Ale to już chyba zależy od konkretnego wdrożenia.

Mam na myśli 2 różne strony, całkowicie różne, w zasadzie stronę i aplikację, a przynajmniej stronę pisaną z wykorzystaniem zasad pisania aplikacji.

Zdaje sobie sprawę że przy dużych serwisach, szczególnie opartych o CMS to masakra ale potrafię sobie wyobrazić (nie mam żadnych doświadczeń w programowaniu po stronie serwera w potocznym tego słowa rozumieniu - pisze własne serwery dla moich aplikacji ) takie rozwiązanie które importuje część treści ze strony głównej (z bazy) i umieszcza ją w szkielecie strony mobilnej i/lub udostępnia typowej dla mobila aplikacji. Ma to swoje zalety i nie wiem czy aby nie jest przyszłością netu...

No bo jak mi się zepsuje auto i za pomocą telefonu szukam noclegu to mam w d...e zdjęcia pokoi i wychwalanie menu w restauracji - ja chce mieć kontakt, geolokację i cennik i ewentualnie info czy są wolne pokoje - reszta to bzdety których na telefonie absolutnie nie potrzebuje i które tylko człowieka w....ją jak ma problem do rozwiązania.
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Wojciech M.:
A ja się czasami zastanawiam na ile ma sens tworzenie strony która będzie "wyglądała" .....
Na razie brak mi czasu i przede wszystkim wiedzy ale mam taki pomysł aby stworzyć coś ala apka -
z użyciem jquery mobile dla telefonów. Uważam że, pomijając strony wizytówkowe, tworzenie jednej strony dla desktopa, tabletu i telefonu jest bez sensu - na telefonie trzeba wywalić ozdobniki i każdą nadmiarową informację której pełno jest na stronach kreowanych dla desktopów. Zakładam, być może błędnie, że jeśli ktoś wejdzie na moją stronę z telefonu to albo przypadkiem - wartość takiego wejścia jest niska i szkoda na nie prądu albo na przykład aby dobrać się do pdfa i wtedy lepsza była by np 100 pozycyjna lista zasobów (oczywiście dobrze zrobiona technicznie) niż nawigowanie po 20 podstronach.

Pojęcie "wyglądała" nie dotyczy moim zdaniem wodotrysków i elementów oczojebnych w moim mniemaniu wpływającym na zmniejszenie użyteczności i czytelności witryny zazwyczaj, a na odpowiednim i przemyślanym rozmieszczeniu obiektów / elementów witryny w taki sposób, aby jej przeglądanie i korzystanie z niej było wygodne na wszystkich typach urządzeń, do których jest ona skierowana.

Jeśli uważasz, że tworzenie stron RWD jest bez sensu to musisz wejść w polemikę z Google, które w tej chwili bardzo mocno promuje tego typu rozwiązania. Wg mnie zrobiona poprawnie (zoptymalizowana pod kątem wydajnościowym, przemyślana) witryna RWD to rozwiązanie doskonałe w przypadku, w którym oczywiście inne argumenty nie przemawiają np. za stworzeniem oddzielnej wersji mobilnej lub dedykowanej aplikacji mobilnej. RWD sprawdza się doskonale wówczas, gdy chcemy np. klientowi wystawić jeden panel zarządzania treścią witryny lub jest to jeden system, który ma dostarczać praktycznie te same treści dla wszystkich użytkowników. W przypadku, gdy chcemy już te treści różnicować, często lepiej jest rozważyć stworzenie właśnie odrębnej wersji mobilnej np. pod popularną subdomeną naszej witryny "m.nazwawitryny...". Jeśli jednak jest to system / aplikacja internetowa tak naprawdę to zawsze warto również przeanalizować czy nie lepszym i bardziej opłacalnym (również rozwojowym) rozwiązaniem dla klienta nie byłoby zbudowanie aplikacji mobilnej i udostępnienie jej w sklepach z aplikacjami.

Jak zawsze - to zależy :)

Swoją drogą może trochę stara ta moja prezentacja i tylko wypunktowane są tam niektóre kwestie ale w sumie mogę ją Wam pokazać. Parę z tych kwestii, które tutaj opisałem było już w niej zawarte.

http://www.slideshare.net/mzajkowski1/mobile-first-res...

Damianie, tak jak wspomnieliśmy wszyscy wcześniej - nie ma rozwiązań idealnych i dla wszystkich. Spróbuj pobawić się np. Bootstrapem, który właśnie ma swój najwyższy breakpoint na poziomie 1170px (960 to moim zdaniem już trochę za mało na dzisiejsze czasy). I odkrywaj, odkrywaj... :)
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Wojtku, pamiętaj, że internet to nie tylko strony internetowe hoteli i restauracji. Wyobraź sobie np. zaawansowany CRM dla przedstawicieli handlowych, którzy korzystają z niego ze smartphona i tabletu (gdy są w trasie lub u klienta), a ich kierownik siedzi w biurze i korzysta z desktopu. Koszt przygotowania osobnych wersji mobilnej i desktopowej byłby o niebo większy niż w przypadku RWD. Nie wspominając już o utrzymaniu i rozwoju.
Ani RWD ani 'm.' nie są idealnymi rozwiązaniami. Ich zastosowania zależy od kontekstu projektu. Generalnie trend jest taki, że odchodzi się od osobnych wersji mobilnych na rzecz RWD.
Dobierając odpowiednią metodologię można spokojnie zaspokoić wszystkie potrzeby użytkowników przy zastosowaniu RWD.Ten post został edytowany przez Autora dnia 21.05.14 o godzinie 11:33
Link do wypowiedziLink
Wojciech Mazurek

Wojciech Mazurek właściciel, PPHU
Neuron

Temat: Responsywna strona - grafika, kod

Panowie
Ja staram się nie uogólniać i twierdzenie że coś jest dobre czy złe zawsze zależy od kontekstu.
Ja tylko twierdzę że CZASAMI user oczekuje zupełnie innej informacji zupełnie inaczej zorganizowanej dla urządzeń mobilnych. Jeśli da się w takim przypadku zrobić stronę responsywna która zmieni nie tylko układ ale i architekturę to dobrze - tylko czy warte jest to nakładu pracy aby "usunąć" 90% treści.

Być może czas myśleć o dwu stronach mobilnych - trzymając się tego przysłowiowego hotelu:
jedna strona jako "zminiaturyzowana" wersja strony desktopowej, druga jako swego rodzaju komunikator dla ludzi w potrzebie z konkretną informacją.
Tym bardziej że dla takiej strony apka nie ma sensu - nie będę instalował apki do jednokrotnego użycia bo być może w tym rejonie gdzie jest hotel już nigdy nie będę....
Link do wypowiedziLink

konto usunięte

Temat: Responsywna strona - grafika, kod

Właściwie to istnieje podejście łączące RWD z m. - RESS (responsive web design + server side components). W skrócie jest jedna struktura HTML, ale różne wersje komponentu wyświetlane w zależności od urządzenia, z którego korzysta user.
Dla głodnych wiedzy link 1, link 2.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

szukam webmastera/grafika




Wyślij zaproszenie do
Anuluj