This entire course is focused on the concept of “Human Centered Design.” At first, I had no idea what this concept was or why it was such an essential part of the Web Design and Development course.
When we first started talking about the need to make sites applicable for web, tablet, and phone views, I was clueless to say the least. It had never occured to me that each type of technology needed sites to be formatted accordingly, but after looking at a few, it was very easy to see why this is essential to a well-planned, human centered deisgn.
Keep in mind that the column count is the same (12) for all of the following:
Phone layouts are more likely to be simplified since their space tends to be more limited. They often include more white space so that there are not too many distractions for the reader. Since the content width of this layout is limited to 312 px, it is important to use the space wisely and effectively. Also, keep in mind that the cell (24 px) and gutter (2 px) widths are smaller for this platform. Avoid too much clutter and fonts that are hard to read on a smaller screen. The phone layout is vertical as opposed to horizontal, which is also an important factor to consider when coding the structure of the site. This means that what ever is positioned at the top will be the primary focus.
Tablet layouts are something that I am still pretty unfamiliar with, so I am trying to get the hang of them! I do not have a tablet of my own (nor does anyone in my family) so it is a little harder for me to try to gauge the spacing needed to have a successful structure. The size is not as restricted for tablets, so the options are more plentiful for this platform. However, even though you have more flexibility to add more content or images, it is important to incorporate white space so that the viewer is not overwhlemed. For this size, the content width is 758 px. This layout is horizontal, making it easier to spread content and boxes accross the entire page. Still, what is placed at the top will be the main focus, but the viewer has more space for their eyes to wander on the tablet view.
And finally, we have arrived at web layouts. These are probably the most time consuming layouts to work on. This platform gives you a ton of space to convey a message and express your creativity a little more. With a content width of 1180 px, it is important to make the best use out of the space. More eccentric fonts, patterns, and images tend to work better on a layout like this since the space is not as condensed, making it easier to distinguish sections. This platform gives you the opportunity to play around with edges, borders, and larger headers. The gutters (20px) and cell (80px) widths are much bigger on this grid size.
As this semester comes to a close, I can confidently say that I now understand why human centered design and layouts are such imperative aspects in web coding. Not only do these grids enable you to make the content and sections appear appealing to the viewer, but helps guide them to certain sections or locations by making the areas more accessible. Simplicity usually helps make the guidance easier, since white space can attract attention to a certain area. With technology constantly changing, it is important to adapt your site accordingly in order to create the most effective message possible!