Using HTML class week 1

The basics

Although I have not learn any new HTML and CSS elements, I have discovered to create a visually pleasing layout using skeleton. Skeleton is a frame work that positions content in columns. Overall there are 16 columns that designers can use structure the content. I participated in an interesting exercise where I had to produce a very complex layout for a website using columns. The experiment was a success but the behaviour of the block level element prevented me from adding a break line. Block level elements are at 100% width and 0% in height and are drawn to the top left corner. The underline only appeared underneath the shortest paragraph. A HTML 5 element row was added to ensure the underline appeared underneath all paragraphs in the row.

Another interesting tips was using the nth child ta. The second tutorial involved us targeting the first character in each div's paragraph. To achieve this, we had to enter the target as follow html container p::first-letter. The target states that inside the HTMl file there is a container but inside this element are p tags. The ::first-letter informs the browser to target the first character in the p tag. This helped me realised that I need to have concise class names, such as news section, to help my code to offer flexibility.


Codeacemy

http://www.codecademy.com is a great website for developing HTML and CSS skills. The website offers learners tutorials offer a learnable path and interactive text editor. Generally, the terms and the tags are professionally explained. I have recently finished the Jqery course, which was very useful. This post logs the very interesting tutorial.

methods of programming

One of my inspirations for this project is have a fluid background. To achieve this I used web developer on Google to see other designer's code. I saw a website that uses section class to achieve the block of colour effect. To apply this onto my website, I used section classes that made sense to me. I used 100% to ensure that sections cover the width of the screen.

I came to realisation that symbols with nice effects. I wrote the conventional navigation bar but a h4 tag was placed to pushed down the text below the imagery. I originally used an inline element known as a span class. However, span classes appear on a same line, therefore, a task was performed to make them block. The solution for this was to place the words into h4 tags.

Accessibility check

I had an interesting experience with the accessibility check. As part of the requirements, I had to perform this check to see if the website has any problems of being accessible. The majority of the HTML pages and all CSS passed without any problems.  The checker identified the heading as a known problem. When the searched for the heading, I found no syntax issue, therefore I ignore it. I have made-sure that the documents feature images with alts tags, no flash, no table and text with a high contrast.

Evaulation

Since I have done an evaluation on my pre-production stage, I just as well reflect about the entire production stage.  Adapting my design to the website has given me the experience of developing a professional website. The use of illustrator has enabled the website's content to captivate students. The retro icon are used to prevent the website from looking empty. Although skeleton was being used, I did not used that restraint as an excuse to make a visually pleasing website.

I placed a section class outside the container to create a 100% backgrounds. The process of adding these backgrounds was an easy process due to some CSS3 properties being available. Background size and positioned allowed me to place the retro logos as intended.

Overall the home page features a simple paragraph with the navigation below. I thought that Home pages should introduce the user the subject within a couple of sentences. The original plan with the home page was to place the introduction underneath the navigation. However, I thought that completing this task would have been time consuming. A decision was made to place the introduction on the overview page.

User testing 2 and problem solving reflection

After I consolidated with the changes, I managed to user test with a couple of friends of mine. I presented the old and new versions of the site. Same as before, I asked them to perform a certain tasks without assistance. One of the improvements they realised was the quantity of text. They suggested that reducing the text causes the website to feel understandable. They also pointed out there was not enough contrast between the navigation and the main content area. In response to this, I applied a blue background to the navigation area.

Problem solving reflection

One of the disturbing effects that was encountered was the mobile navigation pushing down the graphical elements. This was because I accidentally made the navigation exit the flow of the document. To solve this,  a tutorial was followed that enabled me to enhance the user experience. Generally the Jquery code allowed it to not disturbed the other elements.

The slider was another issue that made the interactive design look unprofessional. Although the images appear normal, there were not large enough for the user to experience vibrant atmosphere. Nivo slider and light-box are Jquery plugins that are simple implement. I placed the JS and theme files into the heading of the document. The scripts were inserted at the end of the document to ensure the sliders upload first.


Accessibility

One of the most common mistakes made by designers is the lack of use of alt tags. Alt tags enable the specialist software to assist deaf people through the website. Without it, specialist software cannot define it as an image. A short description of the image was placed to ensure that my HTML code is validated and the website meets the breif's requirements.


Improvements

Although I am pleased with the website, I felt that the time restraints caused me to come out with other solutions. The navigation bar features nice retro designed icons, I feel that skeleton made my options limited due to its 960px container. There is a method of making the container into percentages but performing this takes would have consumed a lot of time. As mentioned in my technical research, there are still people having large screens. In future, I may use bootstrap to make a 100% and free flowing website.

Crit Feedback

Critics gave me very constructive feedback that will enable me to improve the website's user experience. Generally the website was praised for its use of illustrations to make the website look captivating. The general theme and the use of imagery could draw the audience to read the website.

Today's post will focus on the suggestions given. Although there were minor issues, the quantity of content was a massive issue. One constructively stated that the quantity of the text makes the information overbearing and causes the layout to feel cramped. In response to this, the number of text is dramatically reduced.

One peer thought that having a fixed navigation bar is illogical due to the footer. I decided this was a strong case therefore, I removed the Jquery and the CSS that causes the graphical element to appear at the top of the page.  Other than replacing a few images, there is not much to do for this task.

User Testing and time management.

So far with my user testing, I managed to test my website on three people. I generally know them but I pretended that the website presented was not mine. This was to ensure that the users could give useful constructive feedback. I used paper Iphones for user testing to ensure that they enable me to develop the best concepts. Last week, I managed to test my prototype on these 3 people. I asked questions that prevented them from quoting yes or no. Whilst the user was performing the tasks given, I was viewing for any hesitations and their face expressions. 

The most common problem with the website was the home page. They suggested that the background and the symbols are very striking elements, therefore it caused them to read the short paragraph lasts. To solve this issue, the text colour and scale were altered. The font size was set to 18px in order to sort the hierarchy structure. 

time management

Performing this task last enabled me to make the amendments to the website.  Relating to time management, I thought that doing this activity the week before the extended deadline helped to improve the website's design. At the moment, I have been logging my progress and adding elements to improve the user experience. 

Logging of code

Learning code

One of the things I have learned on this project is to make-sure that the plugins or code are necessary for the user to experience. Using many plugins on CodeDrops could have made me lazy in terms of writing code. I managed to learn new code by watching You Tube videos. I was able to understand the overall code due to the presenter talking about the instructions and code. Understanding the syntax rather than placing a plugin improve my learning. A slider plugin was used but I watched a simple tutorial discussing about the code required to create the interactive element.  Due to fast approaching deadlines, I realised that coding a error free image gallery would have been impossible. However, I managed to separate the code into small parts to understand the CSS.

CSS3 code

Generally, CSS3 has prevented me from using image swap. The issue with image swap is the increase of bandwidth. The browsers has to make more hits to display the image, making uploading process a lot longer. In the late production stage, I realised that there a webkit feature known as filters. There are wide range of websites offering tutorials on how to apply them on websites. I studied the code on a couple of website before using it. Using RGB as a colour format instead Hex is a key component of this code. Experimenting with the code caused me to conclude changing the opacity and alpha channels for the RGB colours makes this colour format more flexible than the Hex pallet. 

website blogging

 CSS and HTMl Validator

I have now the experience of making-sure that my HTML and CSS files have no syntax errors. The code from all documents were placed inside a validator input to help me with an issue. W3 revealed that there were typographic errors in my layout css. Using CMD J to quickly find the line where the mistakes is located.

I reinserted my CSS code until there was not any errors on W3's website. Correcting the mistakes resulted in a well-done message appearing on a site. The code below allows me to place a W3 CSS3 tested  certificate onto my website. Adding this symbol will signify to users that this site is trustworthy. Trustworthy is a key aspect of user experience design that web developers should consider when in the planning and production stage. 

However, validator has a problem at recognising figure caption and CSS3 functions. Even though captions are new tags, validator do not recognise them. Webfilters are other properties that validators have struggle to recognise.  However, I have attempted to correct many errors as possible.  It may appear that have more errors than usual. 

Z-index

A confliction between the navigation bar and SVG logos caused me to explore the Z-index. The SVG logos appeared a front of the fixed navigation links. W3schools points out that the z-index function arrange the graphical elements into layers resembling the ones used in Photoshop. The graphical element with the highest value appears on the top layer.  With my experience with CSS, I set the z-index at 100 for the navigation whilst 99 for the SVG logos. At first, I thought that this solution may not work due to my lack of experience using this specific code but the website was seen on browsers, the confliction disappeared. This experience taught me to make-sure that add the z-index to ensure that graphical elements do not collide. 

web filter

One of the changes I had to make with the site is the home navigation. As an hover effect, a background colour was applied on the anchor tag. My peer suggested that it made the navigation look very blocky. Webkit filter shadow feature was found on a website that allowed me to apply drop shadow on the SVGs. However, there is no information whether that the CSS3 property is supported by Firefox, so an underline was included in the hover effect. Adding this will not reduce the user experience. 

Illustrations

While looking at my sketchbook I realised that having a globe map revealing the location of the famous reefs was an efficient concept. After doing some drawing I managed develop an idea where the user would click the image, which takes them to a particular reef. For example, having the user selecting the image showing the New Caledonia's reef locations causes the website to scroll down the the Caledonia sub section. 

In response of my feedback from the previous Ibook project, I have produced diagrams featuring the website's graphic style and colour scheme. Overall, a artistic brush was created to make the smoke look believable. Shadows had to inserted to give the diagram depth. There is a fish diagram being developed as well. 

my website code part 1

My design

Overall, the feedback about my design style has been very positive.  The simple design enables the content to be nice presented on all devices. I decided to apply flat colours with simple retro signs and shilouutes. The retro signs improves the readability for the content of the site. The darker tone of blue draws the users eyes to the paragraph after reading the heading, which is very important.

For my footer, I decided to include a border featuring corals. This was to ensure the user notices that this is the end of the page. Placing an image as a border for every section was the orginal plan but experimenting with the feature causes me to realised that this would make the website look clunky.





There are some graphs or diagrams that will be placed on the website. I feel that these diagrams need to be captivating, so I inserted the resources on Illustrator and then drew them using the pen tool. The final outcome shows graphs showing my visual style. Graphs can come across as uninteresting but applying visual style could allow them to catch the user's attention.

As a visual learner, I felt that incorporating symbols and words for the navigation system could entice the user to explore the subject of coral reefs.  Students are captivated by imagery therefore, it made sense to me that applying the retro designed symbols can enhance the user experience.

Positive

The project overall has allowed me to enter a interesting journey. I found sketching all of my designees and referring to them in the production stage was very useful. On the image above, building the website was an easy tasks because I planned the number of columns in my sketchbook. I planned the elements that are fixed and fluid. Naming my div tags in my sketchbook allowed me to insert the right backgrounds and colours. I placed a lot of illustrations as background into each section without making mistakes.  I placed all of the backgrounds as I intended.


Negative

A lot of planning went into this navigation bar

One of the many drawbacks for this projects was the workload. I felt that getting the right hierarchy and the user experience caused me to sketch regularly. I was  drawing many layouts, concepts and design elements in order get the website that targets the right audience. I had to developed a few brainstorms to truly understand the website's content and purpose. I realised journey is very essential part of the design, which will help me develop children's books over the summer hoildays