In the beginning of web design, HTML had to do it all: content, styling and layout.
Cool designs were the result but nightmares resulted. Maintaining and redesigning a site became impossible due to the length of code. Out of the chaos, CSS became.
CSS allowed styling separate from content. Layout techniques at first were mainly floats. However, realization hit that floats were great to wrap text around objects but not a good solution used for an entire page layout.
Front-end-developers starting coming up with their own techniques to share with each other. Continuing to perfect and eventually creating code libraries. The layouts were fantastic but also complicated. The fix was to create frameworks to pass around rather than teach people to hand-code. Today there are hundreds of layout frameworks to choose.
Life is good – right?
It is if you want a site that looks like all others: it isn’t if you want a site that stands out. There are so many amazing tools to use today. Tools in conjunction with frameworks, a kind of mix-and-match mentality, is better than full on automation. Returning to creativity and thinking outside the box is the goal. Get back to hand coding.
I had just taken a course on Bootstrap. I loved it! I thought, “Why had we not learned this first?” The time saving this framework provides is amazing. Then I read Jen Simmons’ “The benefits of learning how to code layouts with CSS” and understood. I am fortunate to come into this field at this time. Those who have been in the trade during the height of frameworks are going to have the hardest time reimaging. My curriculum has taken us through the steps the beginning front-end-developers had taken. I am learning that “mix-and-match” mentality and thankful for it.
When the learning gets tough, I will power through reminding myself what Jen Simmons stated:
“In many ways, perhaps it’s the people who are brand new to the industry who have the most potential. You might think, “well, I know nothing! I have to learn it all at once!” Yes, you do. And, actually, so do most of us. You at least don’t have to unlearn anything.”
“If I were a scrappy young designer or front-end developer, I would jump all over this layout stuff and learn it as fast as I could. I expect that later this year and throughout 2018 there will be a lot of demand for people who know how to hand-code a layout. Those folks who can imagine an innovative page design and make it happen — you will have a lot of control over the future of your career. You’ll stand out. You’ll get work. You’ll be able to be picky about where you work, and raise your rates.”
In addition to Rachel Andrew’s tutorials, she offers example grids. Two grids that I particularly like are “Header, 2 col, footer” in both “flexible” and “responsive” modes. The reason I like these two examples is the clean, easy to read layout. I like both the flexible and responsive mode because blending the two will provide the most control over your layout.
The tutorials and examples have made me excited to try them in my next project. I plan to use many aspects in my next assignment: “Discography Cutting-Edge Redesign”. Look for it soon on my page!
