2020. április 24., péntek

Reszponzív weboldal készítése

A reszponzív weboldal ahogy neve is mutatja, hogy „válaszol” (response) az aktuális felbontásra. Ez annyit tesz, hogy monitorról, tabletről és okostelefonról megnézve az oldal tökéletesen néz ki (olvasható, szép, funkcionális), mert a design mindig követi azt, hogy épp mekkora képernyőről nézik az oldalt, és aszerint épül fel.

Talán hallottál már a „mobilgeddonról” – arról a Google-frissítésről van szó, mely 2015. április 21-étől a mobilos kereséseknél a mobilra optimalizált oldalakat előnyben részesíti (logikusan), míg a mobilra nem optimalizált weboldalakat hátrébb rangsorolja.

Ha mobiloptimalizálásról van szó, akkor az egyik kulcsfogalom a „reszponzív weboldal”.


Mi a reszponzív weboldal?

A reszponzív weboldal felbontásfüggetlen. Érthetőbbé válik, ha fogod a böngésződ ablakát és elkezded lekicsinyíteni. Nézd meg, hogy ez a blog oldalunk hogyan reagál a megváltozott képernyőméretre! Folyamatosan változik az éppen adott mérethez igazodva.

A reszponzív webdesign-t egyértelműen az egyre többféle méretű kijelző megjelenése hívta életre. Egy olyan megoldásra volt szükség, mely mobiltól a tableten keresztül az asztali számítógépekig, minden eszközön képes megjeleníteni egy weboldalt azonos URL alatt, közel azonos dizájnnal és tartalommal. A korábbi fix szélességű elrendezéssel készülő weboldalak már nem tudtak optimálisan megfelelni a mobileszközök által támasztott igényeknek.

Tehát reszponzívnak nevezzük azt a weboldalt, amely minden képernyőn jól jelenik meg.

Fontos, hogy a reszponzív design nem egyenlő a mobilbaráttal – a reszponzivitás túlmutat a mobilon, és tableten is jól jelenik meg.

Honnan ismerem fel a reszponzív weboldalt?

Nem vagy biztos abban, hogy a weboldalad reszponzív technológiával készült? Az alábbi 9 eszköz segítségével pillanatok alatt ellenőrizni tudod, hogy weboldalad reszponzív –e és ha igen, akkor nem tartalmaz-e hibákat.

Példa responzív menűre

<!DOCTYPE HTML>
<html>
<head>
 <title>tutorial</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <link rel="stylesheet" href="style.css" type="text/css" media="screen">
 <script src="jquery.js"></script>
 <script>
  $(document).ready(function() {
   var menu = $(".menu");
   $(window).resize(function(){
    $(".menu-toggle").removeClass("active");
    if($(window).innerWidth() > 600){
     menu.show();
    } else {
     menu.hide();
    }
   });
   $(".menu-toggle").click(function(){
    $(this).toggleClass("active");
    menu.slideToggle();
   })
   $(".open-submenu").click(function(){
    $(this).toggleClass("active");
    $(this).next("ul").slideToggle();
    $(this).children(".arrow").toggleClass("down up");
   });
  });
 </script>
</head>
<body>


<nav>
 <div class="navbar clear">
  <a href="" class="logo">Logo</a>
  <div class="menu-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div>
  <div class="menu">
   <ul>
    <li><a href="">menu 1</a></li>
    <li><a href="">menu 2</a></li>
    <li>
     <span class="open-submenu">menu 3 <span class="arrow down"></span></span>
     <ul>
      <li><a href="">almenupont 1</a></li>
      <li><a href="">almenupont 2</a></li>
      <li><a href="">almenupont 3</a></li>
      <li><a href="">almenupont 4</a></li>
     </ul>
    </li>
    <li><a href="">menu 4</a></li>
   </ul>
  </div>
 </div>
</nav>
Bejegyezte: dátum:

Nincsenek megjegyzések:

Megjegyzés küldése

Feliratkozás: Megjegyzések küldése (Atom)