Creating my Website w/ The Design Cycle 4

Portfolio Website Evaluation

Over the past few weeks I have designed, developed and published my portfolio website for my unit in Web Design. Not only will this website further my grade to a higher level but also aid me in personal professional development and my career overall.

Researching the tools to create my portfolio website has been integral to the success of my grade in this unit. Not only have I learnt the code which structures content on the internet (HTML) but also learnt a good amount of code that stylises that content (CSS) and makes it presentable. Over the past few weeks I've taken time into learning all of the key features that builds a website such as the different type of link relations (stylesheets, scripts, licence, etc) and how certain web design companies structure out their content with sections and divs. Within CSS, not only have I learnt the basic stylisation of elements, but gone above and beyond to learn selectors, properties, pseudo, inheritence, specificity, etc. With knowing both a good amount of HTML/CSS, I am pretty confident I am able to pick up any coding program such as Dreamweaver or Notepad++ and create a website off of the tip of my fingers pretty easily. 

But with also knowing the tools to creating a website, researching how to use them is most important as well. With the usage of pre-made dimensions such as the 960 Grid System and how to utilise positioning elements with resources such as the "F" shape pattern, I've done quite a lot of research which has helped me create my Final Product. Without these resources, I wouldn't have been able to know what content is best suited for a portfolio website and how to make my website attractive with having it perceivable, operable, understandable and robust. As well as knowing what makes a good website, knowing what makes a bad website has helped me learn some of the web design issues I must avoid. Issues such as consistency within aesthetics (fonts, backgrounds, colours, etc) and navigational methods have been integral to learn in creating my Final Product. 

The main aim of this unit was to introduce me to designing websites and building them using a coding program such as Adobe Dreamweaver or Notepad++. At the end of the unit, I was to produce my own personal portfolio based on a detailed design brief. Overall, the point of designing and developing a portfolio website was to understand certain web design issues and produce an effective web solution to the initial brief.

During the whole process of creating my website I've felt that learning the tools of what makes a website was most fundamental to the success of this unit. Without doing the initial exercises over codecademy.com and looking into various resources/tutorials, I wouldn't have had the confidence I needed to successfully create a sophisticated and comprehensive website. For a Web Designer/Developer, it is important to learn the very basics of CSS positioning and styling. Without the knowledge of floating/margins/padding/positions, etc, I personally would've found it very hard to structure my website layout successfully. This personal research was especially important to my success as I felt that the tutorials provided for creating a web template weren't suited to learning the basics needed with HTML/CSS.
If I was to comment on an element that didn't go to plan during the whole unit I would say time. The amount of time needed for this unit has been quite a lot especially for someone who is looking towards a higher grade. Personally, if I was to ever do a similar subject in the future I would love to have some guidance on web development tools as I do see a lot of students struggling even though they took the recommended tutorial for a web template. Time isn't a factor that can always go sparing, doing a unit at the same time as 2 or 3 other ones and organising time for attention on a specific one can always be hard to handle. I felt the side the research side of web technologies and issues was more than enough to go on but the support in knowing the tools was quite an independant study personally.

To conclude, I feel like addressing these weaknesses both in the Unit and myself will help me improve on my future work with web development and the basic semantics of other creative units. By recognising my problems and experiencing the accomplishment of fixing them I feel that utilising the tools I've learnt is important to learning the fundamentals to Web Design/Development. This Unit has been an interesting and productive road to take within Interactive Media and it's a skill that won't disperse from my mindset anytime soon.

Creating my Website w/ The Design Cycle 3

The Final Product

Creating my Website w/ The Design Cycle 2

Developing My Portfolio Website

Problems and Resolutions

Cross Browser Functionality

Throughout the majority of creating my website I used Google Chrome to check what the page would look like by the user instead of the inbuilt function provided by Dreamweaver. However, with the knowledge about cross-browser functionality I decided to use other browsers to preview my website and I came across some issues, this brought in the usage of Vender Prefixes. Vendor Prefixes are only required with sophisticated CSS3 property elements, seeing as I had multiple box-shadows, border radius', etc I had to use VPs to get the required affect I desired across most browsers. With websites such as cssportal.com I was able to generate the prefixes needed for cross browser functionality. This website also managed to teach me what certain CSS3 properties work within particular browsers and how they would look like with a preview box. However, the issue about Vendor Prefixes is that I had to implement multiple lines of the same code in my stylings each time I wanted to add a property to an element. Not only adding this code is time consuming but begs the question of unity within the same rendering for browsers or having some other method to support all of them.

Jquery Libraries

When importing certain features within my website I came across referencing JQuery libraries for them to work correctly. An issue I came across at one point was the fact that I was using an old version of a JQuery Library for my smooth scrolling affect. This meant that when I came across referencing to a more up-to-date version of the Google JQuery Library for my carousel, the carousel did not work as it was told to use both libraries. To resolve this issue, I made sure I was only referencing one JQuery version from the same source and not referencing both of them. The usage of comments and clear definition can help me realise my problem much quicker in the future when I do import similar JavaScript dependant features.

Correctly Defined JavaScript Properties

When setting up the main carousel for both my main page and portfolio page I needed to make sure I was setting the correct visual properties for both. Visual properties such as the size of the main panel, the size of the thumbnail frames, whether or not to have an information overlay and what not. In order for these features to work, they must be defined exactly otherwise the slightest hitch-up in code can completely disable the whole carousel feature. Whilst implementing the carousel, I use a classmate of mine to double check whether or not I was writing the code correctly with what certain symbols had to go where. Furthermore, with using the correct tutorials from http://spaceforaname.com/galleryview/ I was able to create the desired carousel I wanted for the website. 

Positioning Preferences

When positioning elements with CSS there are a multitude of ways one can do it. Whether it be padding, margins, position selectors or just plain floating, a variation of using these features was the best for my portfolio website. However, I did come across a few problems when I wanted to fix my header. Initially, I used "Position:fixed;" to fix my header however I forgot to use the correct top and left selectors to position it correctly. Instead, when using only position:fixed this brought an unwanted affect further down the line as my header was inheriting this margin-top "like" property from one of my pages. This took me one or two hours of toying with my CSS, cleaning it all up, using websites such as j-fiddle to display my problem to friends and trying to fix this very basic error. Eventually, my classmate and I figured it out after much experimenting. But just the simplest of code can completely create errors which seem to have no correlation to what you were aiming for initially. This can seriously throw a spanner into the works as most of the time during those 1-2 hours I was chasing leads which had nothing to do with my error. This proves to me that if I never noted down my research into the tools needed in CSS, I could've been stuck with this issue to this very day.

Tips to Avoid Further Issues

          

Usage of the Cascade in Cascading Style Sheets

As stylesheets are read from top to bottom when the browser passes over each declaration it pucks up new properties and resets the properties that have already been set by declarations. Therefore, if an element with associated styles is mentioned again, not only it will inherit those stylings but you can also reset them by re-mentioning the properties. This affect was useful when styling my sections for the page as I gave each page a height of 600px, however for my final page not only did I want it to inherit the initial properties but I wanted to re-write the height so it would look more like a footer. Therefore, not only was I able to keep the same stylings but I was also able to re-write some properties in order to befit the specific id, this shows the importance of the cascade affect as I'm writing less code.

Commenting on Code

A great method of not keeping code messy and incoherent is using comments to clearly display what a chunk of code does. For example, when I was referencing all my exterior stylesheets and scripts, I used comments to clearly display what the code did. Otherwise, if I didn't use comments in this situations I wouldn't know what certain JQuery library was being used for or what a certain JavaScript file was doing, especially as I have low knowledge about JavaScript itself. Addiontionally, commenting was also useful for when I was setting stylings in CSS, by splitting up what was for positioning and visual I was able to clearly see what certain properties did what without a massive cluster of code instead.

Using Reset Code
Originally when I set up my main CSS Stylesheet I used a reset code at the beginning of it before starting on my own stylings. I used this reset code to abolish the semantic stylings that come already with HTML elements. If I wasn't to use this reset code then I would receive unwanted padding/margin/etc affects that would automatically be associated with the elements I put into my HTML. The reason why HTML has semantic stylings is not totally understood by me but hopefully in the future HTML will because more independant of content structure and CSS independant of presentation.

The Usage of Classes and IDs
When styling with CSS, we can group elements together to be stylised with Class elements. They're defined with using a "." before a selector, assuming that it's previously defined with "class=" beforehand. However, if one would want to specifically stylise one element, it is better to use an id as they're not meant to be re-used.

During the process of creating the buttons for my navbar, I used one class element that would be associated to each button. To avoid having one massive block of code for each button, using class elements allowed me to only repeat the "class=" reference in my html for each listed item. Therefore, using class elements saved me a lot of time and code rendering for my website.

Creating my Website w/ The Design Cycle 1

Perparing My Portfolio Website

Sketching out the Website

Inspirational Websites (Annotations in Orange/Green)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   

 

 

Learning the Tools to Create my website

<!--Completing various exercises that details the need-to-know features of making a Website-->

<!--Writing down notes on each section in order to clearly interpret and understand the HTML/CSS--> 

<!--Reading/Noting down articles which details important information such as different type of references used (Stylings, Scripts, etc)-->

<!--Secondary Research into how users view websites, such as the "F" Eyetracking Concept -->

<!--Understanding the basic content features that are used in a Portfolio Website -->

Web Template Evaluation

Web Template Evaluation

Over the past week or so I've created a Web Template that will be integral to the design of my final Portfolio Website. This website will not only contribute to getting a higher grade in my Web Design unit but also will help me with my Personal Professional Development unit too.

Since beginning the unit and taking time into researching various web technologies/issues, I've learnt a lot that is required into making a web template. There are many key factors which are needed in order to make a web template, one of these are the tools needed to put the website together. For the structure of my website, I used HTML, the coding language that is used to structure out content within a certain layout. For the stylisation of my website, I used CSS, this helped me integrate sophisticated design elements into making my template a lot more presentable and easier to the eye. To learn this code I used many different resources whilst taking notes in order to revise and remember what is needed to put together a web template. Most notably, I used codecademy.com to learn the basic features of HTML/CSS along with projects and tutorials into positioning and selector use. The image above displays the various exercises I took into order to understand the tools I had to know to put a web template together.

Secondly, my research through web design issues has also helped me structure out a website and what to avoid whilst putting a template together. With using such resources as the 960 pixel grid system, I've been able to put together a template that is consistent with most other commonly used website templates. Building a working HTML web template with this grid system has helped me realise the essence of using pre-made dimensions and the improvement that has been made from using the old table system. Overall, it has made me reduce the amount of complicated table nesting HTML I could've used and promote the law of keeping content separate from presentation (HTML/CSS). With pre-made layouts like these I most definitely will not hesitate making another website template as I'll have a simple laid out structure to follow by when positioning elements.

  

For my website I've decided to use vertical parallex scrolling instead of the generic usage of multiple HTML pages. Whilst this is costly on the amount of data needed to be loaded in one page, the different factors making up of my website can be found in one place and easily navigated about. In order for this type of navigation system to work, I've decided to use a fixed header (logo, navbar + clock) so that the user can easily be taken to the different pages without having to scroll to the top everytime. These three elements are used for identification (logo), navigation (navbar) and for general information (Clock:Time and Date).
The pages on my website are split into 4 sections, the Main-Wrapper, of which only the top is visible in the image (blue). The Main Wrapper is to keep the top 3/4 of elements together whilst also having a place for the header to go. The Left Column and Right Column sections are also held by the Main Wrapper, generally for my website I've kept images to the left and small chunks of information to the right (red and green). With attention to Jacob Niel's research in how user's read websites, I've decided to make my left column larger than the right column. This is so that any user visiting my website for the first time will be induced to look towards that side of my webpage. Lastly, my Sub-Main is not kept within the Main-Wrapper, but kept within the Page div itself, it is used for short tag-lines or additional information.

Overall I've felt like I've created a Web template that will be very beneficial to creating my website. One that can be easily manipulated due to the nature of the nested elements whilst also making my content easily positioned with usage of the 960 Grid System.