Why so much hate for the Hamburger? The hamburger leads the way in the ubiquitous web experience. Seeing a new lease of life in mobile design’s rise, the three small bars continue to pop up over all number of platforms. Even as I write this, I see Chrome’s own 3 barred icon looking at me from the corner of the screen. Behind that I can see iTunes with a hamburger sitting pretty aside my favourite song. Even one of my favourite games, Football Manager, has recently employed that ever present hamburger. Yet I continually see articles spouting “Kill the Hamburger”. History Though many of us may consider the hamburger a new invention – countering the ever problematic issue of minimalism on smaller interfaces – it has existed far longer than you’d imagine. For the next 30 years it remained a relatively niche icon until mobile design instilled a new lease of life. It is with this universal adoption that the hate has reared its head. Hamburgers are healthy in moderation It is all about the enviroment – where and how it is used.
CSS3 Transitions, Transforms and Animation Tutorial 50 CSS Libraries, Frameworks and Tools from 2014 With all of the changes and advancements that CSS has gone threw these last few years, we should not be surprised at the huge volume of free resources and tools that are currently being released. These time-saving CSS libraries, frameworks and tools have been built to make our lives that little bit easier and also offer a clear learning window into CSS properties we may not fully understand. In this post we have collected 50 of our favorite CSS libraries, frameworks and tools that been released this year. All of the tools and libraries have been categorized into the following categories: Animation Libraries, Spinner & Indicator, CSS Typography Libraries & Tools, CSS Frameworks & UI Kits, Icon Creation Tools, Color Tools, Reference Resources, and an extensive selection of miscellaneous CSS tools. CSS Libraries for Animation CSS Shake – A collection of CSS classes that will vibrates & shake the 'DOM'. Magic Animations – A small library of CSS3 special effect animations. CSS Color Tools
Fixed Positioning in Mobile Browsers Fixed positioned elements (typically headers or footers) are extremely common conventions for native mobile platforms, so naturally fixed elements found their way into mobile browsers. Web designers are used to fixing elements to the window using CSS’s position: fixed, however, in the land of mobile browsers, support for fixed positioning is far less universal and is way more quirky. I set up a demo to test fixed positioning support across mobile browsers. You can view the demo here. I was particularly curious to see how fixed positioning worked without disabling the user’s ability to scale the page. The Test The actual test is as absurdly simple as you can get. Talk about basic. Mobile CSS Fixed Positioning Support Maximiliano Firtman’s amazing Mobile HTML5 site features a chart of fixed width mobile browser support, but (as you can see from the above results) “support” isn’t exactly binary. Twitter's mobile site features a fixed header for iOS but not for Android Javascript Solutions
Browser CSS hacks I don’t use CSS hacks anymore. Instead I use IE’s conditional comments to apply classes to the body tag. Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I’ve seen. With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the css. So here are go: Comprehensive List of Browser-Specific CSS Hacks If you’d like to take a gander by yourself: Test page with all these hacks present. View the test page at browsershots.org (Thx to Webdevout, Evotech, and Jeffrey, porneL, and commenters.) I should point out I’m not including weird hacks like the voice-family ones or anything particularly ugly. Somewhat related… Here are the most concise browser sniffs I’ve seen. Update 2009.06.03 - I added the suggestions left on Ajaxian and in the comments and updated the browser versions to consider Safari 4, IE 8, and Chrome 2. Update 2009.11.10 - Added #prop: value IE<=7 hack. Update 2010.01.24 - Added prop: value! Freeform addendum
A Complete Tutorial to Susy — Zell Liew Susy is a plugin to Compass that allows you to create customizable grid frameworks easily. It makes responsive design extremely easy by removing the need to manually calculate widths. If you need to create repsonsive websites do not want to constrain your design with available frameworks out in the open, Susy might be the perfect answer. This is the first of a two part tutorial that covers the basics of Susy. In this tutorial, we are going to install Susy, set up Susy defaults and understand how to create the 10-column complex nested grid AG test found on the susy website. Important Update Susy 2 is now released, which makes this tutorial obsolete. Installing Susy Susy requires Sass and Compass. This tutorial assumes that you already have Sass and Compass installed. Once you have Sass and Compass installed, go ahead and install Susy from the command line: # Command line$ sudo gem install susy Important Note: Susy has been upgraded to Susy 2, and a lot of the configurations is changed.
Codrops Chitra's Blog: WVU Research responsive redesign, web performance optimization and more... The main purpose of this article is to share my experience and lessons learnt during the responsive redesign of WVU Research website and also dispel some myths about responsive design, workflow and especially SIZE of responsive websites with example and proof. I am grateful to the openness in web-community in sharing knowledge and information in these exciting times and inspiring others with their work, knowledge and feedback. Explore website: Screenshots: On my portfolio page Myth #1: Responsive design is bloated and a responsive webpage is generally over a Mb. No, not if it is done right. Read on to find out how I have managed to have the sizes of home page at ~205K loads in 665 millisecs to 1.5 secs on desktop and 160.52K, 1.29 secs on mobile. The feedback has been very good so far, from administrators, internal users and clients on the effectiveness of the website overall. See results below: More on Responsive workflow: I.
Zing Design blog Google Maps has emerged as an enormously helpful tool for users and a powerful tool for designers and developers. Adding a dynamic map to your website is super simple with the embeddable , unfortunately this leaves us with limited control over aesthetics and functionality. Adding an interactive map with a more bespoke feel can mean digging through Google's gargantuan JavaScript API for hours. Fortunately, we found a quicker way to deal with it. We've also built a lightweight WordPress plugin to help you sort it out even faster. Read the full article Responsive web design: key tips and approaches Some time ago, designers knew the exact dimensions of work they were commissioned to do whether it be a book cover, poster, newspaper, etc. However, with the emergence of smart phones, iPads and other monitors with different sizes, aspect ratios and resolutions, we’ve lost control of our visual borders. It’s not surprising that responsive web design (RWD) has become the new buzz. This emerging trend is not about fashion or aesthetics; it is rather an attempt to solve usability problems that arise due to the various devices used to browse the Internet. In this article, I’ll describe the approaches used when designing for different devices, what screen sizes and resolutions should be taken into account, and how RWD works from a designer’s point of view. Responsive web design approaches When creating a website that is fit for all monitor screens, the most common approach is designing within the standard screen width and height. There are dozens of graphics display resolutions. In conclusion
Creating a Mobile-First Responsive Web Design Introduction We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following: There is even more up to date responsive guidance on our new Web Fundamentals site. Why we need to create mobile-first, responsive, adaptive experiences How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation What we could do to further enhance our adaptive experience The Need for Adaptivity As the web landscape becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. However, mobile context is much more than just screen size. View the demo Structure Style Less JS
Responsive Menu Concepts The following is a guest post by Tim Pietrusky. I know Tim from his prolific work on CodePen and from being a helpful community member there. He wrote to me with this guest post about responsive menus which I'm more than happy to share with you below. Not only is it a timely concept, but one of the concepts improves upon a clever CSS trick we've covered here in the past. When it comes to responsive design we are faced with various techniques on how to best handle altering our navigation menus for small screens. Three of them are made with pure CSS and one uses a single line of JavaScript. Before We Start In the code presented in this article, I don’t use any vendor-prefixes to keep the CSS easier to see and understand. All menu concepts in this article are based on this simple HTML structure which I call basic menu. To address small screens I use the same media query on all concepts. @media screen and (max-width: 44em) { } 1. This is what it looks like on a small screen with a custom style.
A Three Step Guide to Usability on the Mobile Web Designing mobile sites is a different kind of web design. Much like your first experience of designing for the desktop web, it can be both exhilarating and daunting in equal measures. So many possibilities, yet so many usability restrictions. Don't panic, we've been there too. This paper is our "101" guide to getting your design and usability principles right. We'll start by setting some mobile web design rules to live and die by... Five Rules for Designing Usable Mobile Web Sites 1: The mobile web is mobile2: Context is king3: The devices are (very) different4: Forget your dotcom thinking. Rule 1: The Mobile Web is Mobile Never overlook the obvious. Rule 2: Context is King When it comes to usability, context is everything. This point is critical to the success of your mobile site: your can no longer account for where your users are accessing your site from. Rule 3: The devices are (very) different Mobile devices are, of course, very different to desktop and laptop computers. Limit choices.