Cześć,

 

jak wiecie stronami zajmuję się już jakiś czas, ale nigdy nie miałem okazji robić nic responsywnego... w końcu nadażyła się okazja.

Więc mam stronę: http://breitenbachmedia.com/

 

No i teraz mam dwa wyjścia. Albo zrobić ją responsywną, albo po prostu drugą wersję na mobile.

(projekt mobilnej jak w załączniku)

 

No i pytanie, bo strona jest dość nietypowa... od czego w ogóle zacząć i jak to się kontroluje?

Czy dać jakiegoś JS'a, który wykrywa rozdzielczość i dobiera do tego CSS'a i HTML'a?

Bo właśnie w tym przypadku HTML też będzie musiał się trochę zmienić. Choć może się mylę?

 

nie bardzo wiem od czego w ogóle zacząć.

Może wypróbuj trial Adobe Edge Reflow? Zobacz co wygeneruje i będziesz miał jakiś wzór, punkt wyjściowy?

ok, jakoś sobie poradziłem :)

wystarczy po prostu podpiąć CSS'y z max-width i min-width :)

 

... jednak chyba nie zupełnie... niby wszystko działa dobrze, jeśli zwężę okno przeglądarki, ale kiedy wchodzę na stronę z telefonu, to nadal wszystko jest malutkie... może ktoś wie w czym problem?

Edytowane 27 Kwiecień 201410 l przez torm

Najsamprzód zainstaluj sobie taki dinks na przeglądarce http://lab.maltewassermann.com/viewport-resizer/

Z tym się dobrze pracuje bo nie musisz zwężać ręcznie okna przeglądarki.

Później kombinuj z CSS max-width i min-width (max-width w większości wypadków powinien wystarczyć) jak pisałeś ale pod konkretne, wybrane rozdzielczości urządzeń mobilnych. Zacznij jechać od góry np. od 1024px i systematycznie dostosowuj na niższe rozdziałki. To co będziesz miał na przeglądarce - wyświetli Ci się tak samo w telefonie, tablecie. Generalnie są dwie metody:

- albo elementy dynamicznie układają się wraz ze zwężaniem się layout'u

- albo skokowo - przy wybranych, strategicznych szerokościach

Fontów nie zmniejszaj ew. w najniższej rozdziałce jakieś WIELKIE nagłówki, niektóre rzeczy możesz w ogóle zlikwidować, lub zastąpić innymi, jak jest duży BG na witrynie to też najlepiej go wychrzanić, flashe out, itd.

I pamiętajmy - zaczynamy od górnych szerokości.

Jest jeszcze zalecane takie rozwiązanie.

https://developers.google.com/speed/docs/insights/ConfigureViewport

Dynamico - super rozwiązanie... wszytko działa jak należy :) thnx!

w tematyce responsywnych stron przewija się rozwiązanie programistów twittera - bootstrap http://getbootstrap.com/

a projekt... polecam galerię http://mediaqueri.es/ która co nieco może wyjaśni. A na stronie http://responsive.is/bostonglobe.com można testować jak wyglądają strony na różnych urządzeniach.

w sumie napisanie własnego narzędzia przyniosło by więcej dobrego. Poznałbyś bardzo szybko cały mechanizm od podszewki i zrobił sobie np. osobne klasy do nagłówków i rożnych typów kolumn. Ale to się opłaca jak planujesz zając się tym przez dłuższy czas.

Nie wiem na czym mogl polegać Twój pierwszy bład - w deklaracjach wszystko się ustawia, a js powinien alertować prawidłową rozdziałkę.

w zasadzie to wystarczyło dać w ccsie max-width i min-width... i napisać stronkę od nowa pod nową rozdzielczość... :)

oj wątpię, że wystarczyło. html5 to powrót do lat 90tych więc nic nie jest pewne, ale jak klientowi będzie się poprawnie wyświetlać to fakturuj i uciekaj :P

no możesz zobaczyć: http://breitenbachmedia.com

testowałem w internetowych testerach i u siebie na kom... wszystko działa

nie mialem czasu za bardzo. Na internetowych nie ma co testować, bo html5 pokazuje swoją drugą twarz w przegladarce mobilnej. Wydajnosc siada, czesc klas po kilku petlach z efektami zamula niemilosiernie. Elementy interaktywne nie są interaktywne albo działają tak wolno, że nie wiadomo czy sie klikneło czy nie i nawala paluchem potegując mulenie.

 

Anyway baw sie dobrze, filmik dostepny tylko z linka, wiec na kanale nie bedzie widoczny. Testowane na ipadzie mini.

 

[video=youtube_share;wY5d346cnuw]http://youtu.be/wY5d346cnuw

U mnie przy pewnej szerokości okna przeglądarki menu wyboru języka "ucieka" poza prawą krawędź, przy czym nie pokazuje się pasek przewijania, a nagłówek "Home" nakłada się na pozostały tekst.

ola-f co mam Ci powiedzieć... wszystko się zgadza... ale nie ten budżet ;)

wiadomo. Dlatego html5 lepiej unikać, sa lepsze technologie, ktore pozwalaja zarabiac pieniądze skupiając się na tym co potrafisz a nie na tym co wyszło.

tzn? jakie technologie?...

... ale abstrahując już od wszystkiego... responsive działa na samych cssach :)

Edytowane 12 Maj 201410 l przez torm

wiesz wszystko to co działa i nie jest na siłe pchane przez wyznawców słabych pomysłow.

 

Jeżeli chcesz zostać przy html5 i masz jakieś już doświadczenie, to wal gierki Html5. Na FGL.com placa za implementację API 100-200usd za gre jezeli jakosć jest dobra (napisali ze sa tak pewnie, ze sprzedaż gre, ze placa z gory za implementowanie ich systemu reklam, nie znam szczegolow), bo teraz (jeszcze do konca roku pewnie) tworcy portali musza zapełnić contentem swoje portale html5 (eCPM z komórek jest bardzo wysoki).

A o innych technologiach - ja sie trzymam flasha, bo jest bardzo prosty i bardzo wydajny na komorkach, ale myslalem, o innych jezykach, innych ekosystemach - kompletne opuszczenie branży włącznie. Dostep do wiedzy jest tak duzy, ze mozna wybrac to co jest na topie, a nie to co juz umiemy. Choćby przerzucania się na Unity dla przykładu.

Niemniej polecam ogarnąć temat gier html5 - ja tego nie ruszam, bo nie mam potrzeby ale wiem, że jakość gier jest naprawdę niska, a sama mechanika gameplaya prosta - bo za wiele skrypty nie uciągną i tak. Plusem gamedevu jest, ze powielasz własne pomysly albo klonujesz czudze i wszystko jest ok. Stawki tez sa lepsze.

nie będę ukrywał, że tworzenie gier, jest czymś .. do czego chciałbym zmierzać... pytanie tylko, jak się za to zabrać?

Kiedyś próbowałem coś robić... ale tylko flash...

 

... znasz jakieś ciekawe miejsca, gdzie możnaby zacząć naukę Game Devu w HTML5 ?

to jedynie kwestia umiejetnego pisania algorytmów, język nie ma większego znaczenia. Oczywiście trzeba go znać na tyle by wiedzieć jak wykonać daną operację ale to wszystko więc mozesz śmiało oglądać blogi takie jak ten: http://www.emanueleferonato.com/ - Emanuele zajmuje się chyba też nieco HTML5