Week 11- Outside of Class

Vacation Page CSS

For my page I decided to go with a more simple design but I mainly focused on trying to make my page responsive. In my html page I had to make several divs to break down the information into groups. By using ids and classes I could identify groups and give them similar feature or break them down into id's to give them specific features. I tried to stay as similar with the colors as I previously did in the inline style page within the html page.

At this step I added more color and got the links and destination content to become responsive.

Here is a screenshot of the web layout.

And here I just changed the styling of the link so it would have a decoration and the hover would pink. 

Readings

Above the Fold: Intro
        The intro of the Above the Fold book starts talking about the connection speed and how browsing the web and getting an effective experience you need good wifi speed. Then it talks about the screen resolution and how its measured in pixels. It also talks about the possible browsers that can be used such as Safari, chrome, firefox and the least common Internet explorer. The intro also states how the book is set up and how it will cover how to design for the web by starting off with a structured plan and then the design and followed by optimizing your site afterwards. Each section is a series of decision that must be planned out in order to have a successful site.

Above the Fold: Chapter 2: Elements of Usability
        Designers must have a good understanding of usability. The term refers to the ease with which users can learn and engage in the interface of the web site. Some factors that need to be taken into consideration are the legibility, page load time, handicap accessibility, scannable content, clear urls and page titles, consistent design, and everything must be clear so the user can go back at any point if lost on the page. Some little facts I picked up were that the navigation bar shouldn't have more than 5 or 7 options or the user starts categorizing them into sub divisions or breadcrumbs. In this planning process its important to have the user test the site by giving them a task to solve and work through the best solution. If the user gets lost pages such as 404 error pages can help the user get back on task.
       

Above the Fold: Chapter 3: Space, Grids & Responsive Design
        The final step in the planning process is to prepare the canvas for a well designed site. You can do this by creating a grid system. This is done correctly by organization and hierarchy. This is described as a visual sequencing of elements within a design so the user may perceive them in a specific and logical order. This helps the user see levels of importance by grouping information in a cohesive unit. Another way to help create balance is through white space. This can be done by creating space through margins, gutters, padding, line spacing and paragraph spacing but with too much white space it can also hurt your design. There are examples where there is a lot of space and this is described as "air" because the content as room to breathe and most of the site that use this can be successful. Designers use a grid system to create this type of cohesiveness. Grids are set up by columns and baseline grids are set up by using the typography to line up headers and content.

Above the Fold: Chapter 4: Anatomy of a Web Page
        The last chapter we read talks about the form and function of a Web Design. This is the structure of the site. Familiar terms that are used for this are the (header, navigation, feature, body/content, sidebar, footer and background). It's important to think about that users read from L to R and top to bottom making the top left corner a hot spot for a lot of information. It's crucial to place the important information in this corner but not to overwhelm it. I liked that this chapter showed a lot of different images of website pages and examples to get a feel of well structured pages. 

IID Pages

Display Factors

      This page was about the measurements of different screens and each device is different but all are measured from top right corner to bottom left corner of the screen and not the device. Each designer must take into consideration how different users will use their devices with various sizes and resolutions. One must take into consideration all the interface elements on the screen because they attain space within the browser. 

Grid Systems

       A grid is a way of showing the page has some type of structure within it's design. The design is based on alignment, object relationships and grid based components. Grids help benefit the content and elements if done in the right way. They create a sense of balance and rhythmic intent.

Page Fold

       The page fold is a term used from newspaper printing because the layout was cut in half due to folding the paper in half. In web design there is an imaginary line that creates a fold in the content. Due to this cut off from the view point area a scrolling is then needed. This imaginary line breaks the page into sections the upper half is known as "Above the Fold" and everything below is secondary information. Everything in the first half is most important. 

Scanning vs Reading

        Studies have shown that users tend to not intently read a page on web as they would the same with printed books. Clear hierarchy is key to establishing levels of importance and reading direction. Without clear paths the user can get lost on the page.