Google Remarketing

Nowoczesne kodowanie do HTML

Poniżej przedstawiamy infografikę wyjaśniającą zagadnienia nowoczesnego Front-End Development'u.

Strona responsywna i nieresponsywna

Strony zaprojektowane w technice Responsive Web Design (RWD) automatycznie dostosowują swój wygląd do szerokości okna przeglądarki, dzięki czemu wyświetlają się dobrze zarówno na dużych monitorach, jak i smartfonach czy tabletach.

Responsywna

Responsive
Lorem ipsum dolor sit amet, co nsectetur adipiscing elit, sed

Nieresponsywna

Non-responsive
Lorem ipsum dolor sit amet, co nsectetur adipiscing elit, sed

Wielkości relatywne oraz statyczne

WWielkości wyświetlaczy mogą być dowolne, zarówno bardzo duże, jak i bardzo małe. Gęstość pikseli również ma znaczenie, więc potrzebujemy jednostek, które sprawdzą się w każdej sytuacji. Z pomocą przychodzą relatywne jednostki, takie jak procenty. Tworząc element, który ma 50% szerokości, zawsze będzie zajmował połowę przestrzeni okna przeglądarki, niezależnie od jego wielkości.

Relatywne

100%
50%
50%

Statyczne

1000px
500px
500px

Pływający oraz statyczny układ elementów

Gdy okno przeglądarki się zmniejsza, teksty wewnątrz bloków zaczynają zajmować więcej wertykalnej przestrzeni. Tworząc elementy z myślą o skalowaniu, unikamy sytuacji, w której część strony zostaje przysłonięta przez rozciągające się bloki.

Pływający

Flow
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Statyczny

Static
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Grafiki wektorowe vs rastrowe

Jeśli Twój obrazek zawiera wiele detali, lepszym wyborem będzie użycie bitmapy. Jednak jeśli jest inaczej, najlepszym wyborem będzie grafika wektorowa taka jak SVG lub Webfont. Dzięki użyciu grafiki wektorowej unikamy efektu rozmycia czy widoku pikseli przy użyciu różnych wielkości obrazka.

Wektorowe

Rastrowe

Zastosowanie media queries

Użycie breakpointów pozwala na zmiany stylowania elementów w zależności od wielkości okna przeglądarki. Dzięki nim możemy mieć większą ilość kolumn na dużym wyświetlaczu, a mniejszą np. na smartfonie.

Breakpointy

Brak breakpointów

Użycie webfontów

Chcesz mieć na swojej stronie świetnie wyglądający i nowoczesny font? Użyj Webfontów! Należy jednak pamiętać, że im większa liczba różnych krojów na stronie, tym dłuższy czas ładowania.

Webfont

A

Kroje systemowe

A

Grupowanie elementów

Kontrolowanie jednocześnie wielu elementów na stronie może być problematyczne, dlatego należy pamiętać o odpowiednim ich grupowaniu. Dzięki temu kod wygląda czyściej, jest bardziej zrozumiały i uporządkowany.

Pogrupowane

Niepogrupowane

Blokowanie maksymalnej szerokości

Czasami jest świetnie, gdy nasza strona zajmuje całą szerokość ekranu, na przykład na smartfonie. Jednak mniej sensu ma rozciąganie tej samej treści na całą szerokość Twojego telewizora. W takim przypadku pomóc mogą maksymalne i minimalne wielkości, które dany element może przyjąć.

Zablokowana

Niezablokowana

Retina ready

Tworząc stronę, musimy pamiętać o wyświetlaczach o większej niż standardowa gęstości. Obecnie na rynku są dostępne wyświetlacze, które mają aż 3x większą gęstość niż standardowe ekrany. Oznacza to, że używając jedynie zwykłego obrazka, zostanie on powiększony aż 3-krotnie, tracąc na jakości.

Retina ready

Zwykłe obrazki

Ciasteczka Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje.