screen to semantic to screen
duration:
Aug. 27 - Oct. 17
individual assignment
context
UX designers often need to create website prototypes from existing mockups (e.g., paper sketches, raster or vector graphics). To do so, designers must be able to translate an existing layout into appropriate semantic markup (HTML5) and CSS that results in a functioning digital prototype.
site selection
The website that I chose to recreate was the dropdesk website.
I did not know about this website before this project. This
site allows you to rent spaces that you own as a coworking
space. I have worked in the startup space for a long time
and we have always been in a coworking space. The idea
of sharing a space with other like minded folk is interesting
to me, so I decided to stick with this site.
goal
In this exercise, you will generate initial sketches of an existing website that will allow you to identify and compose appropriate semantic markup (HTML5) and styling (CSS). Your code should demonstrate responsive behavior for at least two screens (e.g., desktop and mobile), even if the initial site you choose does not include this behavior. You should plan for the responsive behavior of your prototype from the beginning of your design process, and ensure its proper functioning by testing on multiple browsers and screen sizes.
initial reflection
I have always had some interest in web development, but never took the leap of recreating an already existing website. Learning about proper semantic markup and designing for multiple screen sizes is something that I hope to get better at through this exercise.
semantic site breakdown
main
section
section
footer
3 rows x 2 columns
nav
nav
semantic markup strategy
After learning that semantic markup is a way of writing and structuring your HTML so that it reinforces the semantics, or meaning, of the content rather than its appearance, I had to think of ways in which I could use my site breakdown on the previous page and translate it into different HTML semantic sections.
I also learned that this would help with the site architecture of the site. Along with this, the use of semantic markup would help the site in SEO, accessibility, and maintenance.
Out of the many semantic elements available in HTML5, the ones that I used were <nav>, <main>, <section>, and <footer>
<nav>
I used to contain navigation links to different pages in the website
<section>
I used to group content that was similar or related. For example, the different parts of the main section (columns in the middle of the page) were split into sections to split up what they were talking about.
<main>
I used to specify the main content of the page. This included the columns in the middle of the page that gave a little insight on the services provided.
<footer>
I used to contain information about the site author, copyright information, contact information, and other information that one would want to know about the site that is not something the everyday person would need to know.
For my CSS I mostly used class and pseudo selectors.
I used class selectors the most as sometimes they would be needed for multiple elements.
Pseudo selectors were just used to change properties of some elements when it was hovered over
To help make the process of responsiveness and positioning a little bit easier, I decided to use the CSS framework Bootstrap.
Bootstrap allowed me to use the 12 column grid system to get elements on the page positioned correctly. Getting practice with this showed me how websites are mostly all structured in a grid like format.
Bootstrap is also built as a mobile first framework, which means that it is friendly when it comes to building for different screen sizes.
I used a plethora of CSS classes from just using the Bootstrap framework.
Bootstrap is big on the grid layout. I utilized this a lot in the different sections of my page to place items. The way you use the grid system in Bootstrap is by first declaring a row then placing col (columns) in each row.
An example of some of the Bootstrap classes are the navbar and collapse classes.
The navbar class gives your navigation bar the default Bootstrap navbar look.
The collapse class makes the contents of the navbar turn into a hamburger menu when the screen size shrinks to a certain size.
I created a good amount of my own CSS classes as there were properties that I needed to edit from the already included Bootstrap classes. I have displayed some significant classes that I added.
Selected all elements to have no padding so that everything could be pushed to the edge of its container.
The font family that I thought best fit the original site was one that I got from Google Fonts.
Set the font to 16px originally so that I could make all the fonts based.
This is an example of a pseudo class that I added over the slideshow tabs.
The website that I chose was not completely responsive when shrinking down the window size, so I decided to add some media queries for different screen widths.
The elements that the media queries changed all had to do with the text and button contained in the slideshow at the top.
responsiveness strategy
As the screen size decreases, the navs and image slideshow decrease in size.
Once the very top navbar gets to mobile size, it collapses into a hamburger menu. This saves the top of the page from clutter.
I tried to do some stacking of the grid in the middle section of the page to make the page more easily readable when on a smaller device (prevents content from being pressed up against each other with very little space).
I also assigned the font and padding with rems to easily be able to change the styling of all the content related to that if needed
reflection
Exercise 3 was one that I learned a couple of things from. First, I learned that you do not have to know all the fanciest languages and have the nicest tools to build most of the sites on the web. With just the basic languages that we are learning, HTML, CSS, JS, we were able to recreate a plethora of different genres of sites. At the beginning of this project I thought that I was going to have to use a framework that I had found during the summer: React. Although I had some experience in it, I wanted to see if I could recreate the website without using that. I also did not continue with using React because I wanted to learn more about the CSS framework Bootstrap. This is one that I had tried to learn in my free time last year, but did not fully get to use it in a project. Bootstrap is framed all around the 12 column grid system, so it was important for me to break up the website into its different sections to be able to have a better idea of how I would recreate it. This brings me to another thing that I learned through exercise 3: the importance of breaking up the sections of a website. Taking the time to split up the website into its sections really helped me place the items of the page accordingly. Finally, the last thing that I learned was to implement more semantic coding. This was something that I struggled accepting at the beginning of the project, but soon came to read about and realized that it is important to try to include as much semantic material as possible to make the site more accessible. Overall, this exercise was a great challenge and learning opportunity about something that I have some interest in.