This is a series of web development logs for a local meditation group called Mantra Meditation. The series consists of:
- User research
- Site requirements
- Conceptual design
- Visual design
- Prototype: Constructing and Styling
- Prototype: Adding Functionality and Animation
- Test and evaluation
This page is documentation for 5. Prototype: Constructing and Styling
This article, I will list and write some important elements of HTML and CSS. There are not much to explain at this stage since the process is simply constructing a prototype according to mock-up designs.
Constructing Prototype with HTML
Add elements/links to head
- important meta tags: charset, viewport, description, keywords and title
- link to google fonts
- link to jQuery
- link to CSS file
2. Construct bone structure inside body tag.
First of all, I constructed bone structure inside body tag, as according to sketches and visual designs.
Div container is placed immediately after body tag, which holds header, main and footer tags. This tag is simply used to hold all the tags and to maintain their position.
Header tag often holds a website name, a logo, links to SNS and a site navigation. In this project, header hosts only a navigation and a tab bar.
Main holds 6 sections, home, about, class, testimo and contact. Main tag is used to clear the site structure and is not used to maintain style with CSS. Therefore, the website works perfectly without having main tag.
Each section tag hold h1/h2/h3 headings, video and/or text contents depend on the section.
- home: h1 site title and background video
- about and class: h2 heading, YouTube video and text contents
- teacher and testimo: h2 heading, YouTube video, h3 heading to state a name of a person in the video and text contents
- contact: contact form
It consists of copyright and a link to Facebook page.
3. Div tags for styling purpose
maintains background video
gives padding to section contents
maintain YouTube videos
maintain text contents
4. Div tags for functions
is used to create a hamburger navigation
is used to create a scroll up button
Styling Prototype with CSS
- Typo General
- Typo Portrait
- Typo Landscape
- Nav General
- Nav Portrait
- Nav Landscape
- Layout General
- Layout Portrait
- Layout Landscape
0. General, Portrait and Landscape
General settings hold shareable settings for any occasions, for example;
- h1: colour white
- h2: uppercase
Above settings will not affected by devices, screen size or view port. These setting are shareable, so they can be set in general setting.
- h1: position
Above setting will be different between portrait and landscape; therefore, they are set in media query.
Resetting some elements to normalize their behaviours.
Idea was inspired by Eric Meyer’s “Reset CSS” and Nicolas Gallagher’s “Normalize.css”
2. Setting fonts
Setting font family according to mock-up designs, which were agreed by the client.
- Poiret One: headings and submit button
- Lato Bold: Strong
- Lato Italic: emphasis
- Lato Regular: the rest
3. Viewport Height and Viewport Width
I used viewport height (vh) and viewport width (vw) for many cases such as font size, layout, paddings. This is not always the case, but I use vh when I decide margin top/bottom, but vw is it is left/right.
4. Layout and positions
Header position is:
- fixed for mobiles: it stays on top page
- absolute for PCs: is not stay top page
Min height is set to 100vh; it will give minimum 100% height and stretches if it needs more space.
Footer stays the end of the page.
5. Style embedded YouTube video
Screenshot for current state of prototype.
Some videos are missing since they weren’t ready.
Footer section isn’t styled (I forgotten).
Prototype 1 for Mobile
Prototype 1 for PC