Tuesday, January 30, 2018

Lesson 20 (layout)

Designing web pages ie layout, has a history. Believe it or not,
the first Web pages with cool designs were done within tables. IT IS NOW
STRICTLY FORBIDDEN TO DO THIS!! Now you know.

Currently, mobile devices are the thing, and large parts of
the world are connected through phones. So that emphasis is
on what is called responsive web design, with pages that scale up
and down and where vital content is always available. Emphasis is
also put on fast loading. So that design is fairly minimalist.

The Golden Age of web design is neither of those, but it is the
most interesting. And one learns skills that can serve other purposes,
such as game development. Below, I have used the W3 Schools example,
using the properties float and clear, and built up on divs. Float (either
left or right) makes the element place itself automatically. Our  navigation
function has a maximum width, and because it is on the left, will always stay
the same regardless of the width of the screen. Specifying the clear attribute
for the footer means it will not appear on top of anything, but will disappear
(user turns the phone, or tablet...).This is conventional web design.




                                          *     *     *

New with HTML5, the flexbox allows elements to move and resize more
easily with the use of a flex container and its children elements. Below, we
see how the wrap attributes works, but there are many others... The elements
will place themselves differently as the page width shrinks!





No comments: