Within CSS there are a couple different ways that you can use
layout to optimize both what you want your website to accomplish for
users as well as what works best for the presentation of your content in
general. Although there are more layout options than discussed in this post, we
will focus on two of them: fixed and fluid, and discuss the pros and cons of
both these layout options.
Fixed layouts: The fixed layout is one in which the designer has specified the pixel width of the page. It does not change the layout of the webpage if the user is viewing the page on a smaller device, laptop, mobile device, etc. The layout will always stay the same. As you might imagine, this is an older CSS layout model, one that worked well when everyone was viewing web pages on monitors at home, but it can make finding information on a smart phone a bit of a hassle for the user. The advantages then of this layout are that the designer has a lot of control, you set the pixel width and it will always do exactly what you tell it to do in terms of line length. This, therefore, means that it is easier to design around this model, and is a good strategy for a beginning web designer. The disadvantages of this system are that, if the browser is smaller than the pixels you specified, that content on the right hand side of the page will be hidden. This could be bad if you had some important info in the right upper hand corner, say social media information. Additionally, it works the opposite way, if the browser window is larger than your specified pixel count, there will be an awkward whit space on the right hand side of the user's screen. This might make your webpage look unpolished. In other words, the user is completely not in control of this layout, the designer has all the control.
Fluid layouts: The fluid layout is one in which the content reacts to the size of the browser window. Text and images "reflow" to adjust themselves and fit in their entirety in the browser window, whether on a mobile device, tablet or desktop. One might imagine that this is starting to become the norm in an age where people are looking at web pages more frequently on their iPhones than on their home computers. If you have heard of "responsive" web design, this is where that idea comes from. Some advantages in fluid layouts are that they avoid that awkward empty space we talked about with fixed layouts, as well as make sure that the user always has all the information that you want them to. This also means no horizontal scrollbars, which any user of web pages know are a pain in the butt. Yet there are a few downsides to this technological way of designing web pages. First, on large monitors, the line length becomes uncomfortable long for the user to read, and they are less predictable, making it difficult for a new designer to truly control his or her content on other devices. However, the biggest downside for me would be... there is more math involved here... and I HATE math.
Therefore, in thinking about my website and what might work best for me, while I love the idea of responsive web design, I think I might stick to a fixed layout for now, and then maybe work towards a more fluid layout later on. Simply because I am new at this, and my audience is potential employers, I would rather use a little older technique and use it well than be experimental and mess things up. Also, the way I set it up in Photoshop, users with even a very small browser should be able to get all the important info from my webpage.
.
.
.
Switching gears a little bit to talk about animation in CSS, I think that one animation technique I might use in my website is that of transitions. I would use this transition idea for my social media buttons at the bottom of my page. Perhaps I might make them change color, or maybe I would make them get a little bit bigger when the user ran his or her mouse over the button. The author says that using animations in a minimal way makes the website come to life with a polished feel and not going too overboard, therefore, I think that this is the only animation that I will use in my web design.
both these layout options.
Fixed layouts: The fixed layout is one in which the designer has specified the pixel width of the page. It does not change the layout of the webpage if the user is viewing the page on a smaller device, laptop, mobile device, etc. The layout will always stay the same. As you might imagine, this is an older CSS layout model, one that worked well when everyone was viewing web pages on monitors at home, but it can make finding information on a smart phone a bit of a hassle for the user. The advantages then of this layout are that the designer has a lot of control, you set the pixel width and it will always do exactly what you tell it to do in terms of line length. This, therefore, means that it is easier to design around this model, and is a good strategy for a beginning web designer. The disadvantages of this system are that, if the browser is smaller than the pixels you specified, that content on the right hand side of the page will be hidden. This could be bad if you had some important info in the right upper hand corner, say social media information. Additionally, it works the opposite way, if the browser window is larger than your specified pixel count, there will be an awkward whit space on the right hand side of the user's screen. This might make your webpage look unpolished. In other words, the user is completely not in control of this layout, the designer has all the control.
Fluid layouts: The fluid layout is one in which the content reacts to the size of the browser window. Text and images "reflow" to adjust themselves and fit in their entirety in the browser window, whether on a mobile device, tablet or desktop. One might imagine that this is starting to become the norm in an age where people are looking at web pages more frequently on their iPhones than on their home computers. If you have heard of "responsive" web design, this is where that idea comes from. Some advantages in fluid layouts are that they avoid that awkward empty space we talked about with fixed layouts, as well as make sure that the user always has all the information that you want them to. This also means no horizontal scrollbars, which any user of web pages know are a pain in the butt. Yet there are a few downsides to this technological way of designing web pages. First, on large monitors, the line length becomes uncomfortable long for the user to read, and they are less predictable, making it difficult for a new designer to truly control his or her content on other devices. However, the biggest downside for me would be... there is more math involved here... and I HATE math.
Therefore, in thinking about my website and what might work best for me, while I love the idea of responsive web design, I think I might stick to a fixed layout for now, and then maybe work towards a more fluid layout later on. Simply because I am new at this, and my audience is potential employers, I would rather use a little older technique and use it well than be experimental and mess things up. Also, the way I set it up in Photoshop, users with even a very small browser should be able to get all the important info from my webpage.
.
.
.
Switching gears a little bit to talk about animation in CSS, I think that one animation technique I might use in my website is that of transitions. I would use this transition idea for my social media buttons at the bottom of my page. Perhaps I might make them change color, or maybe I would make them get a little bit bigger when the user ran his or her mouse over the button. The author says that using animations in a minimal way makes the website come to life with a polished feel and not going too overboard, therefore, I think that this is the only animation that I will use in my web design.
No comments:
Post a Comment