CSS Framework + Progressive Enhacements

Editor's Notes

• #2: \n
• #3: \n
• #4: \n
• #5: I have been designing website for about 10 years. For the past 6-7 years I have been doing it as a full time web developer for the federal government. During this time, I have also been running my own independent freelance business and that’s where I get to be a little more creative.\nI specialize in front-end web design and I use Drupal exclusively as my development platform. The reason for it is that Drupal does all the heavy lifting for me. Later on I will be presenting on Drupal as a CMS. You’re welcome to join me.\n
• #6: \n
• #7: \n
• #8: \n
• #9: \n
• #10: \n
• #11: \n
• #12: \n
• #13: \n
• #14: \n
• #15: \n
• #16: \n
• #17: \n
• #18: There is a 24 column but it’s not widely used as the 12 or 16 columns version. There is also a fluid version which is gaining a lot of traction especially when it comes to responsive web design which allows for the grid to be resized automatically based on the size screen it’s being looked at.\n
• #19: \n
• #20: You no longer measure your regions in pixels. You use columns as the measurements unit\n
• #21: You don’t have to do the math yourself. All the calculations have already been made for you so you can focus on design.\n
• #22: The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure.\nWhat you need to know is that columns don't have a fixed width: they can vary based on the resolution of the screen, or the size of the window\n
• #23: In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.\n
• #24: Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven.\n
• #25: Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes you can shift columns around on desktops and tablets.\n
• #26: There are various grid systems out there. Today we will be briefly talking about my personal favorite one, 960 grid system\n
• #27: \n
• #28: You no longer need to spend time hacking IE.\nCross browser compatible out of the box\n
• #29: In the 16 column version each column is 40px wide. Everything else remains the same\n
• #30: All elements float to the left by default. If you know a little about floating elements you’ll know that floating elements to the left automatically aligns everything horizontally.\n
• #31: \n
• #32: \n
• #33: \n
• #34: \n
• #35: \n
• #36: The premise of this session is not to teach you all there is to know about great web design, but to introduce you to principles and techniques that will help you become a better designer. \n
• #37: Example of this are apple products. The opposite is also true, a poorly designed product (whether is a website or not), does not inspire confidence or trust. That’s just the way it is. \n
• #38: Example of this are apple products. The other side of the coin is also true. Personally when I visit a poorly designed website, I become skeptical or suspicious whether it works well or I make a pre-assumption that this website may not work well. Better yet, I question the company’s reputation or trust if I am about to do business with them.\n
• #39: These elements are true not only to web design but design in general\n
• #40: It’s how you use color. It doesn’t mean using every color in the spectrum. Some of the most beautiful website are those who only use two or three colors effectively. Sometimes the lack of color can also be a great way to enhance design.\n
• #41: Don’t over do it.\n
• #42: Negative space (White space). A great design is not the one where there is nothing else to add but instead where there is nothing else to remove.\n\nMany people make it a goal to pack every single pixel in the canvas. They can’t stand the fact that a section of the page doesn’t have something on it. You’ll see today how you can effectively use negative space to enhance your design.\n
• #43: Using helvetica font. Talk about the helvetica documentary. Talk about shopping at Target or The Gap.\n\nToday you will see that what makes this website attractive is the typography. It’s not about using all the fonts in the world but instead using a hand-full of fonts effectively (2-3 fonts tops)\n
• #44: Before we get into it. I would recommend you get a hold of the following 3 books. Start with HandCrafted CSS then to get a good foundation on CSS in general. Then move on to CSS3 for web designers and finally, Responsive web design. You will become a better designer after you have gone through these books.\n
• #45: Talk about the fact that css3 is a series of modules that run independently from each other. This is a good thing. This means you can implement only those properties that are widely supported.\n\nThe notion is that because some properties of CSS3 are not widely supported you should not use CSS3 at all. That’s the wrong approach. Embrace the properties that are supported.\n
• #46: \n
• #47: \n
• #48: \n
• #49: \n
• #50: \n
• #51: \n
• #52: \n
• #53: \n
• #54: \n