The Designer’s Role
If you’re a designer who only designs, meaning you aren’t responsible for the HTML and CSS of the site on which you are working, a lot of this might just go over your head. You may even be wondering why exactly you need to know about Responsive Web Design..
I’ve always believed that whoever designing a website should be the one later breathing life into it, through HTML and CSS. I understand that this is obviously not the case for a lot of projects, and I would respect a person’s abilities should they choose to only put together the design or only write the code.
It’s important to understand that a website is not one or the other, it’s a marriage of both design and code, each depending on one another to create a seamless experience. To truly learn how to design a website, you must understand how the design will later be implemented in code, even if it’s only a rudimentary understanding.
I’ll remind you again: this article is for designers. In the coming paragraphs, I’ll discuss exactly how, as designers, we should change the way we design to better fit the process of responsive web design.
Even if you’re not designing for Responsive Web Design, you should be designing with some sort of grid system. As the modern, educated designer you are, you should already have an understanding of what it means to use a grid, so I’ll skip the frilly bits.
If you’re a designer who only designs, meaning you aren’t responsible for the HTML and CSS of the site on which you are working, a lot of this might just go over your head. You may even be wondering why exactly you need to know about Responsive Web Design..
I’ve always believed that whoever designing a website should be the one later breathing life into it, through HTML and CSS. I understand that this is obviously not the case for a lot of projects, and I would respect a person’s abilities should they choose to only put together the design or only write the code.
It’s important to understand that a website is not one or the other, it’s a marriage of both design and code, each depending on one another to create a seamless experience. To truly learn how to design a website, you must understand how the design will later be implemented in code, even if it’s only a rudimentary understanding.
I’ll remind you again: this article is for designers. In the coming paragraphs, I’ll discuss exactly how, as designers, we should change the way we design to better fit the process of responsive web design.
Even if you’re not designing for Responsive Web Design, you should be designing with some sort of grid system. As the modern, educated designer you are, you should already have an understanding of what it means to use a grid, so I’ll skip the frilly bits.
One of the pillars of Responsive Web Design is the Fluid Grid.
Essentially, it means that your grid, which was traditionally measured in pixels, should now be thought of in terms of percent of the total page width.
The actual calculated width of each column in a responsive web site changes every time the browser window changes size, and cannot be guaranteed to be the same across different devices. This is why you must use a grid when designing for Responsive Web Design. It is a necessity, not a nicety. You cannot create a responsive web site without a grid-based design; it’s simply out of the question, it wouldn’t work.
Knowing that your design won’t have the exact same pixel measure for each column as in your design comp, there are a few other measures you should take to insure that your grid scales without issue.
Try to refrain from using textured borders in your columns, like this:
These kinds of things would be difficult for your developers to use in a responsive web site, because they wouldn’t scale well horizontally. If you make the column wider or thinner, the textured borders would struggle.
Horizontal gradients are another no-go.
No comments:
Post a Comment