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.