---
title: "Mobile first: co to jest? Słownik pojęć"
description: "Mobile first to podejście do projektowania stron, w którym zaczyna się od wersji na telefon, a dopiero potem rozbudowuje układ na tablet i komputer."
url: https://fluostudio.pl/baza-wiedzy/slownik/mobile-first/
---

[Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www)

# Mobile first

Inaczej mobile-first, mobile first design

Mobile first to podejście do projektowania stron, w którym zaczyna się od wersji na telefon, a dopiero potem rozbudowuje układ na tablet i komputer. Wymusza wybór tego, co najważniejsze.

## W skrócie

-   Google indeksuje i ocenia strony na podstawie ich wersji mobilnej
-   Treść, której brakuje na telefonie, dla wyszukiwarki praktycznie nie istnieje
-   W kodzie style bazowe są dla telefonu, a większe ekrany dostają reguły z min-width

## Usługa

-   [Strony www](https://fluostudio.pl/uslugi/strony-www/)

Przez lata strony projektowano na duży monitor, a wersję na telefon dorabiano na końcu: ściskano kolumny, a to, co się nie mieściło, chowano. Mobile first odwraca kolejność. Projekt zaczyna się od ekranu szerokości dłoni, na którym nie zmieszczą się trzy hasła, duże zdjęcie i sześć przycisków. Szybko wychodzi, co jest naprawdę ważne. Potem układ rośnie razem z ekranem i dostaje to, na co na komputerze jest miejsce.

## Dlaczego od telefonu

Google ocenia stronę na podstawie wersji mobilnej. Jeśli na telefonie brakuje opisu, tabeli czy całej sekcji, które są na komputerze, dla wyszukiwarki ich nie ma. To bezpośrednio dotyka [SEO](https://fluostudio.pl/baza-wiedzy/slownik/seo/).

Mały ekran nie wybacza też bałaganu. Oferta, której nie da się ułożyć w sensownej kolejności na telefonie, na komputerze jest tak samo chaotyczna, tylko duży ekran lepiej to ukrywa. Projektowanie od telefonu zmusza do decyzji, które i tak trzeba podjąć: co jest pierwsze, co drugie, a co można wyrzucić.

Efektem pracy w tej kolejności jest strona [responsywna](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/). Menu, formularze czy [sekcja hero](https://fluostudio.pl/baza-wiedzy/slownik/sekcja-hero/) mają w niej projekt pomyślany dla telefonu, a nie przeróbkę wersji z komputera.

## Kiedy telefon nie jest najważniejszy

Start od telefonu nie oznacza, że komputer przestaje się liczyć. W B2B proporcje bywają odwrotne: inżynier porównuje parametry i pobiera pliki przy biurku, na dużym monitorze. Zanim ustalisz kolejność, sprawdź w analityce, z czego korzystają Twoi klienci. Wersja na komputer nie może też być rozciągniętym telefonem z wąską kolumną tekstu na środku ekranu.

## W naszych projektach

-   ### [Overmax](https://fluostudio.pl/projekty/overmax/)

    Większość klientów ogląda sklep na telefonie, więc pierwszą koncepcję wizualną zbudowaliśmy na mobilnej karcie modelu, a resztę widoków dopiero na niej.

## Więcej na blogu

-   [Dobra strona w wersji mobilnej – poznaj najważniejsze zasady mobile UX designu](https://fluostudio.pl/dobra-strona-w-wersji-mobilnej-poznaj-najwazniejsze-zasady-mobile-ux-designu/)

## Zobacz też

-   [Strony www Responsywność Responsywność to zdolność strony do dopasowania układu do szerokości ekranu. Ten sam serwis na komputerze, tablecie i telefonie pokazuje te same treści, ułożone tak, żeby dało się je wygodnie czytać i obsługiwać.](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/)
-   [Strony www SEO SEO to praca nad tym, żeby strona pokazywała się wysoko w bezpłatnych wynikach wyszukiwania, np. w Google. Obejmuje technikę strony, treści odpowiadające na pytania ludzi i linki z innych serwisów.](https://fluostudio.pl/baza-wiedzy/slownik/seo/)
-   [Strony www Sekcja hero Sekcja hero to pierwszy, zwykle duży blok na górze strony, widoczny zaraz po jej otwarciu. Zawiera główny nagłówek, obraz lub wideo i najczęściej przycisk prowadzący do najważniejszego działania.](https://fluostudio.pl/baza-wiedzy/slownik/sekcja-hero/)
-   [Strony www UX UX (user experience) to doświadczenie człowieka, który korzysta ze strony, aplikacji albo usługi: czy szybko znajduje to, czego szuka, rozumie, co ma zrobić, i kończy sprawę bez frustracji.](https://fluostudio.pl/baza-wiedzy/slownik/ux/)
-   [Strony www Makieta Makieta to uproszczony schemat strony lub ekranu aplikacji. Pokazuje, gdzie stoją treści, przyciski, formularze i zdjęcia, bez kolorów i ostatecznej grafiki, żeby ustalić układ przed projektem graficznym.](https://fluostudio.pl/baza-wiedzy/slownik/makieta/)
-   [Strony www Core Web Vitals Core Web Vitals to trzy wskaźniki Google, które mierzą, jak strona działa u prawdziwych użytkowników. Sprawdzają, jak szybko pokazuje główną treść (LCP), jak szybko reaguje (INP) i czy układ nie skacze (CLS).](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/)

## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej.

Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.

[Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)