Hi guys,
I’m not new to web design, but my focus switched from web to print design for the last 3 years. Right before I focused elsewhere responsive web design was beginning to pop up. Now that I am back into my roots, I’m trying to get up to speed.
I understand adaptive images, media queries, ect, but as often noted, the design processes has updated itself when making content the focus. No more PS layouts (thankfully), but I’m still a little confused on a standard design process and grids assist with a work flow.
-
Using grids for a fixed layout made since, but I don’t understand how grids are being used in the fluid sense. There are a million different grids out there and I’m not looking for the specific details of each, but more how they help with the design process.
-
How do these grids help a designers work flow? I know some actually layout the HTML and CSS, but how do they take my larger design and smaller designs and make them correlate?
-
How do they help keep aspect ratios, not for images, but just container boxes? Do they help calculate what % and em is needed between two designs?
Here is my design processes, which may help communicate my questions and confusion more clearly:
- Wire frames of 3 designs: desktop, tablet, and mobile
- PS a general layout (not pixel perfect) with colors and type-eventually I will do this in the browser
- I have to calculate the % between each design (the change in container, type size, padding, ect)
- Then I have the above numbers to insert into a basic HTML and CSS layout
- Then I have something basic to review break points
How are these grid systems there to help speed up this crazy process and how are individuals designing to them?
Thanks so much, simple questions with a long question!