HYPERlinks: December 14, 2011
This week both Tim and Jenni have links about Responsive Web Design that are must-reads for developers working on sites that need to look good on any screen, from a desktop monitor to a smart phone. Jason shares some HTML5 resources and fixes for IE stubbornness. Analisa is in love with the Pandr‘s color tool, you will see why…
Thanks for following our weekly link series, we have fun picking the best links to share with you!
Jenni Schwartz / Designer
Responsive Web Design
Responsive web design is a hot topic these days. From desktops to mobile browsers to netbooks and tablets, users are visiting web sites from an increasing range of devices and browsers. Are your designs ready?
The term “responsive web design” is related to the concept of developing a website design whereas the layout changes according to the user’s screen resolution. The practice consists of flexible grids and images and an intelligent use of media queries.
50 Gorgeous Responsive Web Design Examples:
Techniques in Responsive Web Design:
Tutorial: A Basic Responsive Grid (plus handy CSS3 media quiery reporter)
Tim Ware / SEO, Web Design & Development
Responsive Design & Facebook
With people increasingly viewing websites on devices of many sizes and shapes and resolutions, the Responsive Design approach—one design that adapts to various displays via HTML5 and CSS3 —is really building steam. This article on the Facebook Blog looks at it in depth: http://developers.facebook.com/blog/post/599/
Comparison of CMS Platforms
There are a gazillion Content Management System (“CMS”) options out there, but WordPress, Drupal and Joomla lead the pack. Here are a couple sites that compare them, by features and by popularity/usage.
Jason Amor / Facebook Designer & Developer
On your next HTML5 project, rather than starting from scratch and hacking your way through the haunted forest of browser inconsistencies, consider starting with an HTML5 template. There’s a few boilerplates out there, but the two most popular are HTML5 Boilerplate (http://html5boilerplate.com/) and HTML5 Reset (http://html5reset.org/). These jump-off points create a level, HTML5-compatible playing field for your web project.
HTML5 Placeholder Fix for IE
Speaking of HTML5… one of my favorite things is the Placeholder feature, which allows you to specify placeholder text for your input fields. This way, you can display what field something is by showing text inside of the input field, rather than alongside. Once the user clicks in the field, the text is replaced with a cursor. Unfortunately, IE doesn’t even pretend to care about this functionality, so you have to fix it with jQuery. This post shows you how: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Native Form Elements
Form elements don’t look the same in everywhere. If you want to see what they will look like in certain browsers, just visit nativeformelements.com in the browser you’re wondering about. This is especially useful for design mockups. Just screenshot a form element and toss it into your PSD.
Analisa Svehaug / Social Media & Project Manager
The Pandr Color Tool
It’s a bookmarklet, it’s a website, it’s a color palette detector! Pandr, web design company from the UK, developed this awesome tool that you can use as a bookmarklet in your browser, or just copy and paste a URL into the web page. When using the bookmarklet you can instantly see the color scheme of any website* you visit. Or paste the URL into their site and see the range of colors being used.
*If the site does not have a style sheet, the tool might not work. We tried on Google and got an error message.
Designer Resource – Free Social Media Icon Sets
Design Deck has some great free PSDs, icons and other resources for designers. I especially love their social media icon sets. Most of them are simple, clean, and work well on most sites. Browse through their collection of icons suites and see what you think.
Redesigns of Major Social Media Websites
In the last few weeks we have seen several big social networks unveil major design overhauls (or promise them, and not deliver…ahem, Facebook Timeline anyone?). Here are 3 significant ones that you have probably already seen. It’s interesting to see how these social industry leaders approach UX and overall design on sites that get a lot of use and traffic. Plus, mobile is a huge part of their markets now, so you can see how that influences design and interface structure. Twitter, for instance, rolled out the mobile update first (we are still waiting on the website update).
Stay tuned, next week will be a special holiday gift edition of HYPERlinks!