Manapság digitális eszközeink képernyőjének mérete nagyon eltérő és változatos lehet. Míg 2015 elején a mobil eszközök a webes forgalom 30%-áért voltak felelősek, addigra mára ez a szám több mint 50%. Főbb multimédiás eszközeink közül a mobilok rendelkeznek a legváltozatosabb képernyő mérettel és felbontással, de a laptopok és a számítógépekhez tartozó monitorok mérete is egyre változatosabb. Ezenfelül egyre több olyan hétköznapi és háztartási eszköz van, amely valamilyen internetes tartalmat tud megjeleníteni, tv-től kezdve egészen a hűtőig. Talán nem túl merész kijelentés, ha azt mondjuk, hogy ez a trend még egy darabig nem fog lassulni. Ez a sokszínűség önmagában nem rossz dolog, viszont egy megoldandó problémát jelent többek között a webfejlesztés és webdesign területén dolgozóknak. A legtöbb weboldal esetében nem csak nem praktikus, de talán lehetetlen is lenne minden egyes eszközhöz és felbontáshoz külön verziót készíteni, hogy minden látogató teljes pompájában csodálhassa oldalunkat. Szerencsére a problémára van megoldás, a reszponzív webdesign. A webfejlesztés ezen megközelítésének lényege, hogy a felhasználó által látott tartalom idomul a felhasználó eszközéhez, annak felületéhez, felbontásához valamint orientációjához. Ezt az eredményt rugalmas rácsszerkezettel és annak elrendezésével (fluid/flexible grid and layout), rugalmas képekkel (fluid images) valamint CSS média lekérdezésekkel (CSS media queries) lehet a gyakorlatban elérni. Ezen dolgozat célja, hogy bemutasson egy példát arra, hogy hogyan hozható létre egy reszponzív webalkalmazás, valamint milyen eszközeink vannak a feladatra.