Responsive Web Design
Rogatnev, Nikita (2015)
Rogatnev, Nikita
Mikkelin ammattikorkeakoulu
2015
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2015052810969
https://urn.fi/URN:NBN:fi:amk-2015052810969
Tiivistelmä
In this thesis I described everything regarding to the responsive web design. First of all, I summed up and compared all the possible website layout approaches. The disadvantages of fixed, fluid, adaptive and hybrid layouts are so significant that it is undoubtedly clear that responsive approach is the best one.
After that, in the theoretical part I defined what the responsive design was and described its main principles and techniques. To summarize, responsive design consists of the following: responsive layout with media queries to fit all possible devices, view-port and responsive typography and media.
In the practical part I implemented one page responsive website without using frameworks or grid generators – just clean HTML5 and CSS3. In order to improve the complexity of the tasks multiple responsive media was included into the project. The project website includes responsive iFrame with a video from YouTube, responsive HTML5 audio player with music composition stored on the webserver and responsive icons provided by Font Awesome icon font. Typography is also adaptive, because it was set in “em” units, like it was stated in theoretical part of the study.
After that, in the theoretical part I defined what the responsive design was and described its main principles and techniques. To summarize, responsive design consists of the following: responsive layout with media queries to fit all possible devices, view-port and responsive typography and media.
In the practical part I implemented one page responsive website without using frameworks or grid generators – just clean HTML5 and CSS3. In order to improve the complexity of the tasks multiple responsive media was included into the project. The project website includes responsive iFrame with a video from YouTube, responsive HTML5 audio player with music composition stored on the webserver and responsive icons provided by Font Awesome icon font. Typography is also adaptive, because it was set in “em” units, like it was stated in theoretical part of the study.