RESPONSIVE WEB DESIGN USING HTML 5

MONARES, LALLAINE S.

HTML – Hyper Text Markup Language

 Is not a programming language.
 Huge part of the building block when
It comes to the web.
 Has different Tags and Elements.
 Has different 6 versions.
HTML 1.0 – released 1993.
HTML 2.0 – released 1995.
HTML 3.2 – released 1997.
HTML 4.01 – released 1999.
XHTML 1.0 – released 2000.
HTML5 – released 2014.

According to educba, the first draft of HTML5 was in 2008,

2008-DRAFTED but the World Wide Web Consortium (W3C) did not accept the
draft until October 28, 2014.

RESPONSIVE WEB DESIGN

 Responsive web design is about creating web pages that look good on all devices.
 A responsive web design will automatically adjust for different screen sizes and viewports.
 Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

BRIEF HISTORY OF RESPONSIVE WEB DESIGN.

Back in the days, the different design and structure of a web page is plain and simple,

The First Website

 Created August 6, 1991
 By Tim Berners-Lee detailed by World Wide Web Consortium (W3C)

1990s – 2000s
 More complex sites had to use tables to control the layout of the page and create things like
navigation and sidebars that are common today.
 Though methods of styling websites existed in some form or another, Håkon Wium Lie first
proposed CSS in 1994 while working at CERN. Then in 1996, the World Wide Web
Consortium (W3C), also founded by Berners-Lee, released the first formal specification for
Cascading Style Sheets, level 1 (CSS1).
 With CSS and other technologies like JavaScript and Flash, web developers could get more
creative and playful with their designs.
 By the late 90s to early 2000s, patterns in web design and user experience had emerged, and
websites started to look like the ones we use today.
2010 an article in A List Apart by Ethan Marcotte about Responsive Web Design.
 This part also where the “Responsive Web Design” was coined and give ideas to web
designers to innovate the Webpages or Websites.

 He addresses the needs in improving the Web designing and being able to respond to
different type or kinds of devices.
 He provides a concept, A concept revolves around creating websites that adapt seamlessly to
various screen sizes and devices, ensuring a consistent user experience.
 He highlights about the complexity of a website.
 He put three Major key points of developing a website.
1. Media queries and media query listeners.
2. A flexible grid-based layout that uses relative sizing.
3. Flexible images and media, through dynamic resizing or CSS.

IMPACT OF MARCOTTE’S ARTICLE IN THE FIELD OF WEB DESIGNING.

 Back in the days, in the late 1990’s and 2000’s, we commonly see a plain and simple
webpages and websites, we cannot access it through other devices.
 Through Ethan Marcotte’s Article, In the year of 2010, in his article, Web Designers had the
opportunity to be innovative and creative in designing Webpages.
 Up until now, the concept of Marcotte is still implemented and used. Now we can access the
webpages or websites in different devices.

RESPONSIVE WEBSITE USING HTML 5

 HTML5 plays a significant role in responsive web design, ensuring that web pages adapt
seamlessly to various screen sizes and devices.
 Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
To create a responsive website, it must meet the three major keys that Ethan Marcotte said;
Media queries and media query listeners.
A flexible grid-based layout that uses relative sizing.
Flexible images and media, through dynamic resizing or CSS.
THREE TYPES OF RESPONSIVE WEB DESIGN.

1. Adaptive or Responsive Layout

Adaptive layout, also known as responsive layout, generally build from static blocks using the
absolute unit. The absolute unit generally measures length such as pixels, points, etc. Adaptive
design always indicates fixed-length i.e., pixels will remain fixed whether viewed on a laptop or
mobile. Pixels based image does not adjust according to browser width. The adaptive layout is
easy to create as compared to the fluid layout. These layouts also load fast as there are no such
adjust of size and position of elements, etc.

2. Fluid Layout

Fluid layout, also known as liquid layouts, generally fills the whole width of screen using
relative unit. Relative unit can be em, %, ex, etc. Fluid layout indicates that length is always
calculated in relation to other elements. % based images adjust according to browser width. Fluid
layout is more difficult to create as compared to adaptive layout. In this layout, we can specify
size in percentage rather than pixels. It is more flexible but take more time to load as compared
to adaptive or responsive layout.

3. Fluid Responsive Layout

Fluid responsive layout is mixture of adaptive and fluid layout. It includes lot of media queries
i.e., breakpoints. In this layout, element either shrink or stretch themselves according to screen
size and provide custom experience. It is user-friendly because it adjusts itself according to
user’s setup.
 REFERENCES

https://www.w3schools.com/html/html_responsive.asp

https://learn.microsoft.com/en-us/archive/msdn-magazine/2011/november/html5-responsive-
web-design

https://alistapart.com/article/responsive-web-design/
https://uk.indeed.com/career-advice/finding-a-job/what-does-web-designer-do

https://theabbie.github.io/blog/history-of-responsive-web-design

https://www.freecodecamp.org/news/a-brief-history-of-responsive-web-design/

https://www.webdesignmuseum.org/web-design-history/yahoo-1994

https://www.educba.com/versions-of-html/