| REVIEWING THE SITE OF HESSEL |
The site I had to review was from a fellow student called Hessel Bosma. His website is created fully in HTML code without help of WordPress or other templates. Therefore the progress is slow, but what you see is all made by his hands. The review is divided in five different sections. Per section I give a small feedback in text, supported by a star rating where 5 is best and 1 is lowest.
Overall rating: ★★★☆☆ (2.8/5)
| GENERAL INFORMATION | ★★★☆☆
The first impression when visiting the site was “Hmm, it’s empty.” The homepage does exist but it has no content, no text and even no images. There is a pop-up box stating that the website is under construction, therefore some things are not completed yet. One thing that irritates me is the use of only small caps in the header. There aren’t even capital letters. This looks very amature and unminded for.
| DESIGN |★★★★☆
Hessel’s design has a calming effect. Basic white with blue shades in the header and elements on the pages. The blog and portfolio have a nice grid layout. Alternating shades of blue are a nice addition, because that makes it easier for the user to distinguish different posts.
| FUNCTION | ★★★☆☆
Some pages of Hessel do not exist yet, therefore the website is not fully functional. On average the site is straightforward to use and that results in a rating of three stars. The other pages will come soon.
| CONNECTIONS | ★☆☆☆☆
The page where the information should be does not exist yet. Clicking on “Get in touch” does nothing. This is worth only one star.
| ANALYSIS |
(Click to enlarge) On the top right corner there is the code for one button on the navigation bar
PIECE OF HTML CODE OF HESSEL
<body>
<header>
<h1 class = “name”>Hessel Bosma</h1>
<h2 class = “description”>student Creative Technology at the University of Twente.</h2>
<img class = “portrait” src = “../placeholderphoto.jpg”>
</header>
<div class = “nav-bar”>
<nav>
<h1 class = “name-nav”>Hessel Bosma | about</h1>
<ul>
<li><a href=”#” class = “nav-button”>get in touch</a></li>
<li><a href=”blog.php” class = “nav-button”>blog</a></li>
<li><a href=”portfolio.html” class = “nav-button”>my work</a></li>
<li><a href=”#” class = “nav-button nav-button-active”>who am I</a></li>
<li><a href=”../index.html” class = “nav-button”>home</a></li>
<br>
</ul>
</nav>
</div>
The picture and the highlighted code above shows how Hessel made the navigation bar buttons. He started with the basic <body> element. As a header he used the header type and an image. He made his own class named ‘nav-bar’. In his stylesheet he defines the colors, box type and spacing. After that he made an unordered list containing all the names for the buttons. Each button has its own reference (the link you will be taken to), the style class and the text that has to be displayed. The list will show up as buttons on the page.
Below you can find a section of Hessel’s stylesheet. Here he can define all the desired settings from colour to spacing, to alignment to the type of box. He can just add some code and all the display settings will apply to the HTML code where he assigned an item with class= “NAME”.
PIECE OF STYLESHEET OF HESSEL (all the code in purple are added by me)
/*navigation*/
.nav-bar{
background-color: #455A64; //this results in the blue/gray colour of the navigation bar
overflow: hidden; //whenever there is too much text to be displayed by the box, will be hidden from view
box-sizing: border-box; //this tells the browser what the proportions are
width: 100%;
padding: 0px 0px 0px 20px;
top:0px;
left:0px;
color: #FFFFFF; //white text colour
z-index: 2; //priority of display order
}
.nav-button{
width: 150px;
border-left: white solid 1px;
float: right;
display: block; //this lets the browser know what kind of box should be used.
font-size: 1.45rem; //relative size to the fontsize
line-height: 50px;
transition-duration: 0.35s; //measured in seconds how long it takes for the transition to be finished
}
| MY REFLECTION |
Reviewing the website enabled me to take a deeper look into the website of other’s. I studied the html code, because I use WordPress and therefore I do not get to see HTML that often. The lay-out of the header, the page and a logo is nicely structured by Hessel. I think I have acquired a better understanding of the structure of HTML. When the Web Technology course started it looked scary at first (therefore I chose WordPress). I learned it is useful to create a class and define all the settings in the stylesheet. Therefore you will be able to change a lot of elements by changing only the stylesheet. Otherwise you would need to go through the list one by one to change the colours for example. HTML is one of the most used languages for a reason. It is well organized (the header and body element, reminds me of programming in processing) and I learned that via classes you can assign a wider range of settings to items and those settings you can define in one spot.
