Class Portal

The overall concept of this journal is to allow a condensed website to host my class work. The overall theme and design of the website will follow my current aesthetic. My current logo is representative of many aspects of what I strive to show in my work on a daily basis - a holistic approach, bold, unique, and direct. I want to keep a consistent theme from this portfolio of my work and the portal that will be developed for this course.

In the image above, I show a very basic sketch of what I hope to achieve through the portal design and layout.

In the above image it is representative of the labs page that will be developed. It is very similar in design to my current page I am doing this blog on, but I like to have the cohesive design structure. As stated in the above picture and shown in the overall theme image, the navigation bar will eventually be responsive and have a JavaScript event to allow a drop down menu for both the labs and projects section. However, if you simply press on the labs or projects tab, you will be taken to a list as shown above that provides a short description of the purpose of each lab and project along with an image of the working webpage. Furthermore, the about section shown in the navigation bar will be a short blurb about what the purpose of the class is for onlooking employers in the future.

The above image shows a very easy to navigate sitemap that is intuitive for the user. It has the homepage which happens to also be the about page that will be linked to in the navigation bar as well. It also has the respective labs and projects tabs as well as the blog tag that were all discussed previously. The general flow of this webpage will be that all general pages will be accessible from the navigation bar and any further in-depth pages (such as labs and projects individually) can be accessed through clicking on the respective tabs or on their position in the drop down menu.

The responsiveness of the design will be accessible for tablets and for phones. For handheld devices, the drop down menu will be eliminated and just the capability for the list of labs and projects will be shown as a webpage. additionally, the image of my logo will be made much smaller so the swiping up to scroll is intuitive. Potentially, I will make it so that the logo uses the picture tag to change the size in order to have a thinner font for my logo on smaller screen sizes. Additionally, the images of the webpages under the labs or projects sections will be removed and the the labs/projects and their descriptions will be positioned in-line.

The process for developing my portal for this class started with the very baseline HTML. The image displayed above is with the navigation bar, my logo that is used on my portfolio website and a description of the course overall. The next step to developing my portal was beginning the CSS. I wanted to allow each of the different pages to have the same, one CSS document externally linked and not multiple CSS for each separate page. To limit the clutter within the CSS document, numerous class names were used for the different Lab names displayed on a page to allow those to have different styling than other text.

The first element of CSS that I wanted to address was fixing the size of my logo and the placement of it to better align with how it is displayed on my portfolio website. I changed the sizing and positioning of the external container (the header tag) then changed the sizing and positioning of the logo itself within the container using an id name of “logo” on the image. I used the inspect element on the browser to find the perfect positioning and size making it responsive using percentages and not pixel placement.

This was the hardest part of developing my portal so far. Even with the practice I have on a daily basis being the Head LA for web, I forgot how to make a navigation bar be in a horizontal line and not vertical. I had to use the W3C website for tips about how to get the elements arranged horizontally. Using this site I found that simply using the display: inline will place them inline, then it is just stylizing them to have equal padding and center the content. Furthermore, I picked the fonts I wanted to use for the portal and I tried to keep them as similar as possible to what is currently on my portfolio, I chose Montserrat for my heading font and Helvetica for my body text. This allows for an easy to read and aesthetically pleasing web portal that remains consistent cross-browser. Montserrat was found using Google Fonts.

The main elements that were changed from the previous photo to the one shown above is the all caps of the navigation elements (as done in my portfolio) and the text being aligned with the outsides of the navigation bar to create a more visually appealing look. To finish off the CSS on the index.html page, I changed the color of the navigation elements to be black and a lighter grey when hovered. I used the inspect element on my portfolio page to find what the HEX code for the light grey I used here was. The next page to work on was the Labs page.

Similar to before with the index.html page, I had all of the general format for the page established as I used the same CSS for each page, however, the list of labs and their descriptions is not yet set.

This is the final layout of the Labs page. Each of the Lab titles can be hovered over and it will open the lab on a new tab. I am still indecisive if I want to have an image of each of the labs displayed as shown in my sketch or not. Since I am not designing each of my Lab pages to have a cohesive design, it seems like it will just add clutter to my webpage. I think that it will remain as shown above, but it is possible that in the future I might choose to add the images back in. For the projects page, I did the same layout, however, since no projects have been completed yet, I simply left it with a brief statement saying that it is where they will go when completed. The final step to developing my portal is making it responsive. This seemed like a slightly daunting task at first because figuring out how I wanted to position the navigation bar (horizontally or vertically) puzzled me.

Above, on the left, is what the website looks like in terms of responsiveness on the computer device. On the right we have what it looks like when observing the website on my phone. As you can see, what I expected it to look like on my device based off of the website is exactly how it looks on my phone. I had to adjust the sizes of the fonts to not have any orphans and to allow for all content to be visible. As more content is added, it will become more of a swipe action to see the following elements. The image, since it was sized using percentages, it is automatically responsive. Additionally, to make it appear as a one-to-one scale, I used the meta viewport tag in the header of my HTML. I am really happy with the result! It took a lot of trial and error to get all of the sizing of fonts to be as I wanted them but it is a very clean aesthetic that I am very pleased with. I didn’t expect to run into any conflicts at this stage of development for the website, but I do anticipate that I will have more struggles and obstacles as I continue to add more elements and JavaScript and jQuery to my portal.

Link to portal