The Image and The Web 2
Designing for the web has evolved since its inception. In recent years designing for the web has become more and more of a semantic process and designers have been given the tools to better develop websites with logical structure. HTML5 and CSS3 have helped pave the way in terms of this. HTML5 has semantic tag elements like <body>, <header>, <footer>, <section>, <article>, <img> and many others. The purpose of these tags generally are easy to identify as the meaning is often in the tag’s name itself. These tags are what gives a website meaningful structure and allows for web designers and developers to be able to better create defined webpages that web crawlers and other web services can take better advantage of. It gives developers and designers more control over how a website should function and look. Elements can now have an id associated with them that allows developers and designers to better target specific elements. By having this fine targeting of elements, fine tuning in the appearance and functionality of specific elements is easier to make. I believe that the goal of making the web more semantic is to be able to give more control over appearance and functionality to web developers and designers. In addition it also helps ease the learning curve of developing for the web since many of the elements functions are in their names.
This week we worked on incorporating fundamental semantics into a prototype for a youtube.com page mockup. In doing this and learning about the semantics of elements I was able to achieve building the skeleton of the site. Using identifiers for the tags gave me more control and with this I was able to for the most part structure my mockup’s layout in the format that the official youtube page has. While my mockup is not visually on par with Youtube’s official site in its current state, it should only require a little more time with some visual additions using CSS and Javascript to target the functionality if I wanted. Having and identifier for tags allows me to better target those elements when I go to work on the appearance with CSS and the functionality with Javascript as I can reference specific element IDs to accomplish such things.
One of the difficulties I faced this week when designing my mockup was with designing for the gallery of videos. I knew it would have been easiest to make a gallery for videos using a table, but that it would not scale nicely when resizing the browser’s window. Designing a scalable table using css was tricky, but I was able to get it to work for the most part. One thing that I need to work on fixing is an issue with how the text below each video affects the grid. If the text is not on one line then the gallery will skip over the space right below the video leaving the bottom space empty. This is something necessary to fix as it is not aesthetically pleasing and furthermore is not intended or correct design.