Skocz do zawartości

Zdjęcie
- - - - -

Responsywność ze skomplikowanym przemieszczeniem


12 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 16 lutego 2016 - 16:47

#1

Mam taki dylemat. Jest sobie grid z dwoma kontenerami. W jednym z nich jest nawigacja. Potrzebuję poniżej pewnej rozdzielczości całą nawigację przenieść do drugiego kontenera i trochę inaczej ją poukładać. Zrobiłem to tak jak wydawało mi się najprościej czyli w htmlu są 2 'klony' tej nawigacji z różnymi stylami i w zależności od rozdzielczości jedna  ma display 'hidden' a druga 'block'. Wszystko działa ok ale przyszła refleksja...czy tak to się robi? Bo trochę to dziwnie wygląda. Zduplikowany content itd. No ale chyba nie ma innej opcji bez użycia JS? 


  • 1

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 16 lutego 2016 - 21:52

#2

Hmm, może użycie flexboxa mogłoby przynieść jakikolwiek rezultat w tym co chcesz zrobić, aczkolwiek też posiada ograniczenia co do przestawiania elementów :)

Poza tym nie słyszałem o lepszej metodzie bez użycia JS. 


  • 2

2ed58r7.png


przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 16 lutego 2016 - 22:01

#3

Tak przypuszczałem ale chciałem się upewnić. Flexbox mógłby nie dać rady przy tym ułożeniu elementów (chociaż mogę się mylić). Uproszczona struktura html wygląda tak:

<div id="wrapper">
  <div>
    <nav>Nawigacja w widoku desktop</nav>
  </div>
  <div>
    jakiś tam div
  </div>
  <div>
    jakiś tam  kolejny div
  </div>
  <aside>
    Nawigacja w widoku mobile
  </aside>
</div>

W ostylowanym finalnym widoku jako że <aside> jest skrajnie przeniesiony na prawo to menu musiałoby praktycznie 'przeskoczyć' w drugi koniec strony.


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 16 lutego 2016 - 23:35

#4

Ostatnio naszła mnie podobna refleksja i zapomniałem, że miałem zapytać. Gdzieś zrobiłem podobnie - zmuszony byłem naprzemiennie ukrywać jeden kontener i pokazywać drugi (jego klon) w zależności od przedziałów rozdzielczości. Nie uważam, żeby to było jakieś rozwiązanie, które zawali SEO, czy coś. Ale chętnie poznam opinie innych. Szczególnie jeśli mówimy tutaj o zduplikowanej nawigacji strony.


  • 0

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 17 lutego 2016 - 00:18

#5

Ostatnio naszła mnie podobna refleksja i zapomniałem, że miałem zapytać. Gdzieś zrobiłem podobnie - zmuszony byłem naprzemiennie ukrywać jeden kontener i pokazywać drugi (jego klon) w zależności od przedziałów rozdzielczości. Nie uważam, żeby to było jakieś rozwiązanie, które zawali SEO, czy coś. Ale chętnie poznam opinie innych. Szczególnie jeśli mówimy tutaj o zduplikowanej nawigacji strony.

SEO było właśnie dla mnie podstawowym zmartwieniem ale z drugiej strony jak sobie czytam np te wytyczne: http://rawgit.com/w3...ster/index.html to nie wiem czy nie popierniczy się coś we wsparciu dla AT w ten sposób. To też podobno jest czynnik rankujący googla więc znowu wracamy do SEO :P . Chociaż może panikuję jak zwykle... :huh:


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 17 lutego 2016 - 09:38

#6

No to czekajmy na mądrale z SEO :) Ja się z nie znam 


  • 0

karolgorecki

    Nowy użytkownik

  • 17 postów
    • Czas spędzony online: 18h 15m 56s
15
Dobra

Napisano 18 lutego 2016 - 22:33

#7

Przy wykorzystaniu flexboxa nie powinno być problemów. Można wykorzystać chociażby "order".

Wydaje mi się, że przy małym pokombinowaniu nawet w "zwykłym" CSSie dało by to radę zrobić.

Możesz wrzucić obrazek/mockup jak to powinno działać. Jak będę miał chwilę to chętnie się z tym pobawię ;)


  • 0

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 19 lutego 2016 - 09:57

#8

Przy wykorzystaniu flexboxa nie powinno być problemów. Można wykorzystać chociażby "order".

Wydaje mi się, że przy małym pokombinowaniu nawet w "zwykłym" CSSie dało by to radę zrobić.

Możesz wrzucić obrazek/mockup jak to powinno działać. Jak będę miał chwilę to chętnie się z tym pobawię ;)

Jeśli da sie to zrobić w CSS to byłoby super. Oryginalnie temat dotyczył menu nawigacyjnego ale zarzuciliśmy ten pomysł bo był z kilku innych powodów bez sensu. Natomiast nadal takie rozwiązanie by nam pasowało przy widoku produktu. Teoretycznie powinno być łatwiej ale wcale nie jest. W widoku jest ogromna ilość detali. Mockup tego nie oddaje w pełni ale przynajmniej pokazuje mniej więcej koncepcję. Chodzi o 3 buttony 'widok'. Nie chciało mi się robić 2 widoków wiec na czerwono zaznaczyłem gdzie buttony mają być w wersji mobilnej.

107vrll.jpg


Użytkownik przemoo83 edytował ten post 19 lutego 2016 - 10:01

  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 19 lutego 2016 - 11:34

#9

To nie lepiej jest je dać tam gdzie mają być na mobilce, a na desktop je odpowiednio wypozycjonować? :D


  • 2

webDeveloper


przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 19 lutego 2016 - 11:37

#10

A w tym wypadku to ma znaczenie w którą stronę się to robi?


  • 0

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 19 lutego 2016 - 18:17

#11

A w tym wypadku to ma znaczenie w którą stronę się to robi?

Spróbuj podejść do sprawy jak powiada unbreak.
To o czym mowa, to kodowanie w "doktrynie" mobile first.
Zakoduj najpierw wszystko w AWD tak, by wyglądało jak powinno na smyrfonie.
Późniejsze  przystosowanie na desktopa jest łatwizną ;)


  • 2

karolgorecki

    Nowy użytkownik

  • 17 postów
    • Czas spędzony online: 18h 15m 56s
15
Dobra

Napisano 19 lutego 2016 - 20:22

#12

Jak wyżej. Najpierw bym zrobił pod mobile a potem na większą rozdzielczość. W tym przykładzie kontener co trzyma te "widoki" na większej rozdzielczości można by absolutnie ustawić.
Opcja z podwójnym menu (mobile + desktop) też nie jest zła. O ile nie ukrywasz jakiś większych bloków gdzie treść jest pisana pod SEO to będzie wszystko ok :)
 


  • 1

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 19 lutego 2016 - 20:27

#13

Przekonuje mnie to co mówicie tylko że problem jest taki, że my tę stronę poprawiamy a nie robimy od zera. To wszystko już jest zakodowane tylko teraz trzeba poprawiać. Chociaż jak patrze na wytyczne i potem na to co tam jest w kodzie to się nie zdziwię jak to w końcu jeb..my do kosza i zaczniemy pisać od nowa.


  • 0




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych