• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed RWD - stron internetowych, rozwój swoich umiejętności

+1 głos
163 wizyt
pytanie zadane 9 lutego w HTML i CSS przez SZYMII Początkujący (380 p.)
zamknięte 5 marca przez SZYMII

Dzień dobry, lub dla czytających to wieczorem, dobry wieczór,

Jeśli ktoś przestraszył się długością posta zapraszam na sam dół, postarałem się tam wyogólnić moje pytania.

Zwracam się dzisiaj do Państwa z pytaniem związanym z responsywnością stron internetowych, tak rozumiem temat był poruszany na forum nie jeden raz i może te pytanie u niektórych osób wywołać irytacje.

W ostatnim czasie udało mi się stworzyć stronę internetową (http://tech-web.5v.pl/ ), związaną z tematyką informacyjną (jeśli można to tak nazwać), która była w jakiś sposób zainspirowana popularnymi portalami: spidersweb, whatnext etc. Jak to u osób młodych udało mi się stworzyć layout strony, a następnie zdecydowałem, aby tak strona w przyszłości była responsywna, zamiast już od razu na starcie pomyśleć o tym.

Siedzę od jakiegoś już czasu i rozmyślam nad pomysłem rozwiązania mojego problemu, chciałbym aby efekt strony był w sposób bardzo podobny do Onet.pl, że przykładowo moja struktura strony nie została naruszona do szerokości 1200px , rozumiem fakt, że moja strona może nie być w pełni przystosowana od razu do zamierzonego celu, ale każdy popełnia błędy.

Zastanawiam się również nad technikami wykonywania responsynych stron internetowych, tak wiem, że są od tego frameworki typu Bootstrap, jeśli by ktoś się uparł da się to również oskryptować. (nie wiem są jeszcze jakieś techniki, szczerze sama właściwość zoom może wystarczyć)

Ja raczej zdecyduje się na media queries + flexbox (bo kiedyś już to stosowałem) i raczej będę się tego trzymał, ale jestem teraz w wielkim zakłopotaniu i zadaje sobie tysiące pytań: Czy robiąc stronę opartą na flexy stosować elementom strony właściwości "width" czy może "flex-grow, flex-shrink, flex-basis", Stosować procentowe wartości czcionek/ rem/em czy może px, Jak przystosować od razu stronę do bardzo łatwego skalowania jej? Chciałbym, aby moja wiedza w przyszłości była na zadowalającym poziomie, że przykładowo za 4-5 lat pójdę do pracy i nie będzie takiej sytuacji "Panie, tak tego się nie robi";

Chciałbym nauczyć się represywności, można to tak powiedzieć na 100%, nie chciałbym otrzymać od Państwa odpowiedzi, a media queries najlepsza ucz się tego, powodzenia. Potrzebuję Państwa pomocy, chciałbym responsywności, naprawdę nauczyć się na porządnym poziomie, że kolejne moje projekty będą bardziej przystosowane do urządzeń mobilnych i żebym nie miał z tym problemu.

Najlepiej jakby Państwo, opisali własną przygodę z responsywnością i jak się do tego zabrali, nie odrzucam oczywiście jakiś poradników, które pomogą mi w pracy. Każda pomoc się przyda i będzie dla mnie motywująca!

Odbiegając delikatnie od problemu, podobną sytuacje mam w JS, moją wiedzę zdobywałem dzięki portalowi kurs.js, doszedłem tam do rodziału Ajax (wcześniej 2/3 krotnie przejrzałem wcześniejsze tematy, które szczerze nie są w doskonały sposób przystosowane dla osób które dopiero zaczynają programować, często w bardzo prostych przykładach są zdarzenia, odwołanie do tematów, które są bardzo daleko). Moja wiedza teoretyczna z wcześniejszych tematów jest na dobrym poziomie, umiem posłużyć się obiektami etc., zrobiłem klika projektów przykładowo slider i klika udogodnień w powyższej stronie, ale również jestem w momencie, że posiadam jakiś zakres wiedzy, ale nie jestem pewny czego do przykładowego problemu użyć, zwykłego JS czy może dołożyć do tego obiekty itd.

Skracając mój wywód mam do Państwa następujące pytania:

  • Poproszę jak najwięcej technik umożliwiających responsywności stron internetowych,
  • Zdecydowałem, się raczej na media+flexbox (ponieważ już kiedyś to robiłem i znam teorię dotycząca flexbox, strona ma w wyglądzie być podobna do portalu Onet.pl i nie zmieniać swojej struktury do rozdzielczości 1200px), lecz zastanawiam się jak przystosować stronę to resposywności - czcionki definiować %/px/rem/em, "width" czy może "flex-grow, flex-shrink, flex-basis" etc,
  • Jak zabrać się do tego zacząć, zmniejszać szerokości ekranu od góry w dół, czy może na odwrót,
  • Jakie stosować programy do wglądu jak strona się zachowuje, czy samo toggle device toolbar z Google Chrom wystarczy?
  • Jak przystosowywać wielkość czcionki, elementów strony w zależności od rozdzielczości, tzn czy jest jakiś ogólny standard mówiący, że np. przy szerokości 1000px stosować czcionkę 16px i maksymalna szerokość divów na 90% etc. 

Ogólnie ucząc się responsywności korzystałem kiedyś ze stron:

Jeśli będzie coś niejasne to proszę pisać! Od razu postaram się zedytować post.

Dla osób, które poszukują kodu źródłowego: http://tech-web.5v.pl/

Temat jest ciągle otwarty, więc zapraszam serdecznie do udzielania odpowiedzi! laugh

komentarz zamknięcia: Koniec wątku

1 odpowiedź

+1 głos
odpowiedź 9 lutego przez willet2 Użytkownik (530 p.)
Techniki i wyjaśnienia responsywności na Bootstrapie (szablon jest szybszy niż tworzenie wszystkich własnych klas). Szczególnie przydatna dokumentacja własna Bootstrapa (1):
1. https://getbootstrap.com/docs/4.0/layout/grid/
2. https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
3. https://kursbootstrap.pl/rusztowanie-szablonu/

___
Zachowania strony w rożnych rozdzielczościach kontrolujesz w samej przeglądarce opcją: toggle device toolbar

___
Jakimi wartościami operować przy dostosowaniu strony dla rożnych rozdzielczości ekranu?- prawdopodobnie do większości zastosowań najlepsze są "%" (Bootstrap). Ja stosowałem również "px" gdzie potrzebowałem dużą dokładność zachowania zmiany layoutu w projekcie (tzn aktywowanie responsywnosci kiedy przeskakiwała np z 1110px na 1109px; czyli nie była domyślną klasą Boostrapa)
Używam czcionek z wartościami "px".
___

Jest wiele rożnych urządzeń mobilnych i mają  rożne rozdzielczości- żeby strona poprawnie zachowywała się na nich musisz zbudować (w css) dodatkowe, indywidualne zachowania pod najczęstsze rozdzielczości. Zapoznawałem się z tym tematem i jednocześnie opisałem zebrane materiały w tym poście:
https://forum.pasja-informatyki.pl/345513/emulacja-rozdzielczosci-fizycznej-ekranow-smartfonow-rozdzielczosc-edycja-tematu
komentarz 9 lutego przez SZYMII Początkujący (380 p.)
O to się nie bój znam ogólnej responsywności.

Naszło mnie jeszcze jedno pytanie, które jest chyba najbardziej istotne w tym temacie:

Jak przystosowywać wielkość czcionki, elementów strony w zależności od rozdzielczości, tzn czy jest jakiś ogólny standard mówiący, że np. przy szerokości 1000px stosować czcionkę 16px i maksymalna szerokość divów na 90% etc.

Co do problemu z toggle device toolbar znalazłem alternatywne narzędzie, któe spełania swoją role: http://app.xrespond.com/
komentarz 9 lutego przez willet2 Użytkownik (530 p.)
Nie znam żadnego takiego standardu ad. web-designu (Może się mylę?). Są standardy np.wydawnicze- dotyczące publikacji książkowych; projektowe- w sensie architektonicznych specyfikacji inwestorskich itp. Chyba że robisz stronę dla Ministerstwa Finansów- dostaniesz specyfikację od inwestora: z kolorystyką, wilelkosciami szpalt, własnymi standardami (żadnej czcionki font-KIDS!) etc. Jakby była taka norma- wszystkie strony byłyby robione na jedno kopyto- a chyba chodzi raczej o różnorodność?
Stosuj zasady: wyczucia, proporcji i własnej pomysłowości etc. Ma być widocznie, nie przysłaniać, i ma być <friendly> w obsłudze.
Jak ustawisz czcionkę 16px- to zawsze przecież możesz zmienić jak będziesz czuł że coś jest nie tak? Niech taki niuans nie zatrzymuje parcia do przodu- nawet z błędami.
komentarz 10 lutego przez SZYMII Początkujący (380 p.)

Super, dzięki za pomoc, prawdopodobnie odezwę się jeśli uda mi się sfinalizować projekt yes

komentarz 10 lutego przez willet2 Użytkownik (530 p.)
Projektowanie jest to proces ciągłego przybliżania. Wciąż poprawiasz, dążąc do najlepszego wyniku.
Tak jak w Breaking Bad;)-  wszyscy robią dobrą metę na 60%, Pinkman robi znakomitą na 96%, Boetticher robi wybitną na ~97%(mogę się mylić) a jako jedyny Walter Hartwell White robi dzieło sztuki na 99,6%. Pomiędzy 97% a 99% jest przepaść.;)
komentarz 12 lutego przez pirouetti Obywatel (1,800 p.)
No chłopie, nigdy nie zrozumiałem nic tak dobrze jak na twoim przykładzie :P

Podobne pytania

0 głosów
3 odpowiedzi 203 wizyt
pytanie zadane 23 września 2018 w HTML i CSS przez Kubax Początkujący (270 p.)
0 głosów
1 odpowiedź 115 wizyt
0 głosów
2 odpowiedzi 112 wizyt
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

64,220 zapytań

110,613 odpowiedzi

231,872 komentarzy

46,964 pasjonatów

Przeglądających: 252
Pasjonatów: 20 Gości: 232

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...