Demos. Parallax. What The Heck Is Responsive Web Design? Responsive websites respond to their environment Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts) Recommended Approach Go All In On Responsive Make pages that look great at any size. “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” - Jeffrey Veen Small + Medium + Large One site for every screen. Everyone. The Boston Globe Largest responsive web design project to date bostonglobe.com Grey Goose Responsive site for Grey Goose with parallax scrolling animation www.greygoose.com Barack Obama The Obama campaign continues to be at the leading edge of web technology. barackobama.com Time & Money Older Browsers Performance Content Website vs. “Stop Thinking in Pages.
Frameworks (save time) or Roll Your Own (more control) Best Practices.
Css3. Mastering CSS, Part 1: Styling Design Elements - Smashing Magazine. How to Implement Some Slick Icons Using a Font and CSS. Using an image-based font can be a fun and quick way to implement icons across your site. It’s a super easy process that gives you complete freedom to go back and re-size your icons at any time. Today we’ll use the excellent Pictos font to build a simple web page so you can get a feel for the process. Using a Font for Icons This week’s design deal features the awesome Pictos font, which contains 96 minimal icons that are just perfect for web design. The great thing about this font is that you not only get a print version, but a folder full of various formats to use on the web as well. What this means is that we can easily use @font-face to embed the Pictos font into a site and then utilize the icons in place of images.
Even if you’re pretty new to CSS, this should be a breeze. Basic HTML and CSS The first thing you want to do is start up a basic starter kit with one HTML file and one CSS file. Body CSS For the body, all we need to do is set the base font size and apply a background image. CSS Hat turns Photoshop layer styles to CSS3 with a click - PSD CSS - Convert PSD to CSS3.