Wpisy

Test mobilności strony internetowej

Mobilnie.com.pl – narzędzie do testowania strony na różnych urządzeniach mobilnych. Wybieramy rodzaj telefonu, wpisujemy adres testowanej strony i mamy podgląd widoku na wybranym urządzeniu. Narzędzie to opracowane zostało w celu testowania wyglądu stron www w przeglądarkach internetowych używanych w telefonach, tabletach i innych urządzeniach mobilnych. Prezentacja wyglądu strony internetowej nieposiadającej wersji mobilnej może pomóc ich właścicielom w ocenie, czy potrzebne jest dostosowanie posiadanej strony do standardów mobilnych. W przypadku testowania strony przystosowanej do urządzeń mobilnych, narzędzie to szczególnie dobrze się sprawdza gdy testowana strona jest wykonana w technice Responsive Web Design.

Najbardziej jednak polecam narzędzie Google test optymalizacji mobilnej. Co prawda nie mamy możliwości wyboru modelu urządzenia, ale mamy informacje dotyczące jakości testowanej strony dla wersji mobilnej. Jeśli uzyskamy wynik zielony

Strona jest dostosowana do urządzeń mobilnych
Obsługa tej strony na urządzeniu mobilnym jest łatwa

to wykonany test strony przeszliśmy pozytywnie 🙂

Dostosowanie strony internetowej do urządzeń mobilnych jest bardzo ważne, ponieważ wzrasta liczba użytkowników urządzeń mobilnych, którzy przeglądają strony internetowe.

Na platformie ranking.gemius.com można zobaczyć jak zmienia się liczba odsłon z wykorzystaniem różnych urządzeń. Widać spadek oglądalności stron na komputerach PC, a wzrost na telefonach. Na pewno duża część tych wyświetleń dotyczy Facebooka czy Messengera, ale też  i innych stron. Warto więc zadbać aby firmowa strona wyświetlała się prawidłowo na urządzeniach mobilnych takich jak smartfon czy tablet.

 

 

 

 

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford

Jak zrobić stronę internetową dostosowaną do urządzeń mobilnych

Opisujemy jak zrobić stronę internetową, tak zwaną wizytówkę. jak zrobić stronę internetowąZastosujemy kodowanie HTML5, w celu uzyskania jak najbardziej aktualnej wersji, oraz dostosujemy stronę do urządzeń mobilnych.

Dlaczego warto pamiętać o użytkownikach urządzeń mobilnych takich jak smartfony i tablety? Dlatego, ponieważ zwiększa się ich ilość. Twoja wizytówka internetowa powinna być dostosowana do tych urządzeń.

strona internetowa html5

Jak zrobić stronę internetową w HTML5

 

Twoja strona internetowa – część HEAD

W części HEAD wpisujemy informacje, które nie są widoczne w treści strony, ale są bardzo istotne dla poprawności dokumentu HTML, a tym samym dla pozycjonowania.

 

<head>
  <meta charset="UTF-8">        
  <title>Tytuł Twojej strony</title>        
  <meta name="Description" content="Opis strony" />
  <meta name="Keywords" content="Słowa kluczowe" />
  <style>Style strony</style>        
</head>

Kodowanie znaków

Kodowanie UTF-8  umożliwia poprawne wyświetlanie polskich znaków na stronie internetowej. Warto zwrócić uwagę na kodowanie pliku. Sam meta-tag może nie odpowiadać za poprawność kodowania, ponieważ jest to informacja dla przeglądarki. Jeśli taki problem się pojawi to przy pomocy edytora zmieniamy definicję strony kodowej – na przykład z iso-8859-2 na UTF-8.

<meta charset="UTF-8">

Meta-tagi

Description – to opis strony, który wyświetla się w wynikach wyszukiwarek. Jeśli go nie posiadamy to robot indeksujący pobiera opis z treści strony. Długość opisu nie powinna przekraczać 160 znaków. Więcej informacji na ten temat można znaleźć w naszym poradniku Pozycjonowanie stron internetowych.

Keywords – to słowa kluczowe występujące na stronie internetowej. Ten meta-tag obecnie przez wyszukiwarkę Google nie jest brany pod uwagę.

<meta name="Description" content="Opis strony" />
<meta name="Keywords" content="Słowa kluczowe" />

Tytuł strony internetowej

Tytuł strony internetowej pojawia się w wynikach wyszukiwania oraz w zakładce okna przeglądarki. Tytuł jest tym elementem, który zdecydowania wpływa na pozycjonowanie strony. Jego długość nie powinna przekraczać  60 znaków, a wykorzystane słowa kluczowe powinny być umieszczone w treści strony. Więcej informacji można znaleźć w poradniku Pozycjonowanie stron internetowych.

<title>Tytuł Twojej strony</title>

Style strony

<style>Style strony</style>

Twoja strona internetowa – część BODY

Teraz przedstawiamy jak zrobić stronę internetową w części BODY stosując HTML5

<body>
  <header>
    ...
  </header>
  <nav id="menu">
    ...
  </nav>
  <article>
    ...
  </article>
  <footer>
    ...
  </footer>
</body>

Nagłówek strony

<header>
  <h1>Nazwa firmy</h1>
  <h2>Krótki opis firmy.</h2>
  <img src="baner.jpg" alt="nazwa grafiki" />
</header>

Menu strony

<nav id="menu">
  <a href="#">O firmie</a>
  <a href="#oferta" >Oferta</a>
  <a href="#kontakt" >Kontakt</a></li>
</nav>

Treść strony

<article>
  <h2>O firmie</h2>
  <p>
  </p>
</article>
<article>
  <h2>Oferta</h2>
  <p>
  </p>
</article>
<article>
  <h2>Kontakt</h2>
  <p>
  </p>
</article>

Stopka strony

<footer>
  <p> Nazwa firmy &copy; 2016 </p>
</footer>

 

Jeśli masz trudności w kodowaniu HTML i CSS i nie wiesz  jak zrobić stronę internetową to skontaktuj się z nami, a my profesjonalnie wykonamy to zlecenie.

Dla zainteresowanych samodzielnym tworzeniem strony – darmowa strona internetowa – udostępniamy plik index.html.

Plik po pobraniu należy uzupełnić o treść oraz grafikę. Następnie umieścić na serwerze wraz z plikami jpg.

 

 

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford

Zmiana algorytmu indeksowania stron – strona mobilna

Google poinformowało nas o zmianach algorytmu indeksowania stron. W wyniku tych zmian, pod koniec kwietnia  2015 roku, strony dostosowane do urządzeń mobilnych podniosą pozycje w wyszukiwarce Google, a strony, które nie uzyskają pozytywnego testu (wykonaj test strony) spadną z pozycją w dół.

Strona nie jest dostosowana do komórek gdy:

  • treść na stronie jest szersza niż ekran,
  • mała czcionka utrudnia czytanie tekstu,
  • linki w menu są zbyt blisko siebie.

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford

Strona mobilna czy strona responsywna

,

Strona mobilna

Strona internetowa dostosowana do ekranu urządzeń mobilnych. Układ strony mobilnej jest zazwyczaj bardzo prosty – czyli elementy są jeden pod drugim. Pierwsze wyświetla się logo firmy, następnie menu, które można rozwinąć w celu wybrania innej podstrony w serwisie www. Następne element to baner, treść strony oraz stopka. Jeśli witryna posiada boczny panel, to w formie strony mobilnej wyświetla się on po, lub przed treścią strony. Strona mobilna jest stworzona wyłącznie z myślą o użytkownikach smartfonów  oraz  tabletów. Prawidłowo zaprogramowane strony mobilne ładują się automatycznie po rozpoznaniu urządzenia przenośnego. Strona mobilna powinna zawierać link do klasycznej wersji strony.

Jeśli nie wiesz, czy Twoja strona jest poprawnie wyświetlana na urządzeniach mobilnych wykonaj test strony

Strona responsywna

Strona internetowa zależna od rozdzielczość ekranu.

Style strony są wgrywane w zależności od  rozdzielczość ekranu. Strona responsywna może działać na dwóch zakresach wielkości obrazu, ale lepiej będzie jak tych podziałów jest więcej przynajmniej trzy.

W stylach strony wstawiamy  @media screen i podajemy rozmiar. Więcej informacji dostępne tutaj.

 

STRONNET Sylwia Płonka

"Firmy, które rosną dzięki rozwojowi i ulepszeniom, nie zginą." Henry Ford