background preloader

A Simple, Responsive, Mobile First Navigation

A Simple, Responsive, Mobile First Navigation
We're going to build a simple, responsive web site navigation. Our solution will help us place emphasis on the content of our page, arguably the top priority when designing for mobile. There'll be no JavaScript involved, and we'll tackle it from a Mobile First approach. Mobile Navigation If you've read Luke Wroblewski's Mobile First you'll be familiar with his statement that: As a general rule, content takes precedence over navigation on mobile. What he means by this is that mobile users are often looking for immediate answers; they want the content they went searching for, not more navigation options. Many sites, even responsive ones, stick to the convention that navigation belongs at the top of any given page. Take this example from London & Partners: A perfectly decent responsive design, but at standard mobile viewport dimensions (320px x 480px) all you really see is a navigation menu. So What are the Solutions? Big screen, little screen. Pure CSS Solution Step 1: Markup Step 3: CSS Reset Related:  CSS3

Recreating the OS X Dock with CSS - ZURB Playground - ZURB.com The CSS The HTML <ul class="osx-dock"><li class="active"><span>ZURB</span><a href=" title="ZURB"><img src="/playground/osx-dock/zurb-icon.png" /></a></li><li><span>LinkedIn</span><a href=" title="LinkedIn"><img src="/playground/osx-dock/linkedin-icon.png" /></a></li></ul> Copyright ZURB, freely available for distribution under the MIT license. Product Design Training from the Experts at ZURB This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS. This is just a simple modal with the default styles, but any type of content can live in here.

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.

Creating Polaroid Style Images with Just CSS - ZURB Playground - ZURB.com Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we've turned regular old images into cool looking polaroid style images—with no additional markup to show the text. Using the Title Attribute Instead of adding additional markup (more headings or paragraphs), we've opted to reuse the content within the title attribute of the surrounding anchor tag. Since it's good practice to use proper title text, and it's really freaking cool to do stuff with just CSS. Note: this is from the CSS2.1 spec, but browsers haven't implemented it fully. We have to use the title attribute for the anchor because the alt attribute isn't fully implemented by Safari or Firefox. Adding "Random" Tilts Safari 4 and Firefox 3.5 both have support for the :nth-child pseudo-selector (this is CSS3). Read about :nth-child and it's usage here. Although this seems like a bit much, this works to our advantage. Making Them Scale For the scaling, we once again turn to some CSS3.

Responsive Navigation: Optimizing for Touch Across Devices As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes? Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. Designing towards touch really forces us to simplify and decide what's most important- what needs to stay on the screen. An Adaptive Solution

An Awesome CSS3 Lightbox Gallery With jQuery Martin Angelov In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling. Before reading on, I would suggest that you download the example files and have the demo opened in a tab for reference. So lets start with step one. Step 1 – XHTML The main idea is to have PHP as a back-end which will generate the necessary XHTML for each image. demo.php <div id="gallery"><? Nothing too fancy here. The gallery Step 2 – CSS Now that we have all the markup in place, it is time to style it. demo.css Step 3 – PHP

Build a CSS dropdown menu | CSS3 Knowledge needed: Basic HTML, intermediate CSS Requires: Text editor, devices and/or emulators at your discretion Project time: 30 minutes Support file Figuring out the best way to optimise navigation for mobile devices is downright challenging. Our community has come up with a ton of different approaches for addressing this issue, each with its own set of pros and cons. In the past, I’ve frequently advocated for converting traditional list-based navigation into a select for mobile (see example below). I have always been enamoured of pure CSS dropdown menus, but they have traditionally relied on :hover. As you probably know, the target pseudo-class selector (:target) allows you to apply styles to elements referenced in the fragment identifier of a URL. In this URL, the fragment identifier is “content”, which will make the browser scroll to bring an element with an id of “content” into view. 01. 02. 03. <ul id="nav" tabindex="0"> <! 04. Like this?

CSS3 Transitions — Thank God We Have A Specification! Advertisement This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Alex MacCaw has already written a very insightful and thorough article on “All You Need to Know About CSS Transitions.” Whereas Alex wrote about achieving particular effects, I’m going to talk about the technical background, especially the JavaScript-facing side. Pitfalls — this article is all about pitfalls. 01. Separation of concerns is nothing new — we’ve been using template engines for years to accomplish exactly that, separating our HTML from whatever scripting language we were using. A couple of weeks ago, I was tasked with developing a JavaScript module that would allow for the use of CSS transitions in a way that the JavaScript side would know nothing about the transitions taking place. “Not knowing is difficult to handle. 1. Timing Functions

Progressive And Responsive Navigation Advertisement Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments. A Common Structure Below is the HTML structure of a navigation menu created by WordPress. Please note: Any ellipses (…) in the snippets below stand in for code that we have already covered. Our navigation, unstyled. Our Tools CSS ResetHTML5 elementsLESS CSSjQuery CSS Reset Resetting our CSS styles is where we’ll start. HTML5 and CSS3 Elements We’ll be wrapping the menu in HTML5’s nav element, which is one HTML5 feature that we should be using right now5. CSS3 will give our menu the progressive feel we’re looking for. jQuery

The Definitive Guide to CSS Transitions Back in the golden days of the web, we had a little thing called Flash to help us make the web a dynamic, fun, interactive place. But, Flash is being used less and less. Of course, in certain environments it can still be put to amazing use, but in today’s web environment you need CSS to get the job done. One of the easiest ways to give your site a near-instant facelift is to bring CSS3 transitions to the table (pun intended). Drop this into an HTML document and check it out: Yeah, I know gray boxes aren’t all that exciting, but the point is that the transitions on the box to the right are more interesting and give the design a more polished feel. Pseudo-Classes for CSS Transitions The key to making CSS transitions work is through the use of pseudo-classes. Here we have the CSS element for a link and the pseudo-class “hover” for when the mouse is over the link. Some other important pseudo-classes you need to know for CSS transitions include: Introducing CSS Transitions Beyond :hover and Links

Anatomy of a Mobile-First Responsive Web Design Last month I had the opportunity to contribute to Google’s HTML5 Rocks site with an article called Creating a Mobile-First Responsive Web Design. In the article, I walk through step-by-step the process of creating an adaptive website that does its best to take context into consideration. While the tutorial goes over the construction of the experience, this article will take a look at the responsive/UX considerations of the demo. To do this, I’ve created a feature on the demo that annotates (almost) every element on the page, explaining why the element exists on the page, and also what was considered when incorporating the element into the design. You can toggle annotations by clicking the red area that says “Annotations Off”, which is either fixed in the bottom right corner of the demo on larger screens, or below the site footer on smaller screens. So without further ado, I will walk step by step through every element in the demo. Masthead Header Logo Primary Navigation Search Box Rating Stars

35 Useful CSS3 Tutorials To Boost Your Skills Good CSS3 tutorials can teach you the tricks and techniques used by experienced web designers and developers to implement a specific solution. Looking the experts over the shoulders is also a great way to pick up fresh inspiration and further to see that something your client is asking for can actually be done. A great CSS3 tutorial providing clever solutions to requirements you need to fulfill may be a great time saver and therefore may kick-start a project. CSS is for styling and controlling layout of webpages. While CSS3has become very powerful it is often used with JavaScript / jQuery to add cool dynamic stuff. If you are not familiar with the possibilities offered from jQuery you may also want to seek some wisdom in jQuery tutorials. In this article we have collected some of the best CSS3 tutorials we have been able to find. Advertisement Create an animated 3d bar chart using CSS3 This is a tutorial on how to create an animated 3d bar chart using CSS only. CSS3 pricing table

Fanfare for the common breakpoint .net Magazine is running a series of articles on their site right now as part of their responsive week. There’s some great stuff in there: Paul is writing a series of articles—one a day—going step-by-step through the design and development of a responsive site, and Wilto has written a great summation of the state of responsive images. There’s also an interview with Ethan in which he answers some reader-submitted questions. What devices (smartphones/tablets) and breakpoints do you typically develop and test with? Ethan rightly responds: Well, I’m a big, big believer of matching breakpoints to the design, not to individual devices. He’s right. If we begin with some specific canvases (devices), they’re always going to be arbitrary. But I now realise that I have been also been guilty of strengthening the hallowed status of those particular pixel widths. Physician, heal thyself. So I’ve started taking screenshots at different widths. I don’t think that will happen.

ZenCSSPropertiesEn - zen-coding - CSS-properties and its aliases for Zen CSS plugins - Set of plugins for HTML and CSS hi-speed coding Based on CSS 3 draft specification Property Alias Special Rules @import url(); @i @media print { @m } ! expression() exp Properties Groups Sorting Methods Positioning Box behavior and properties Sizing Color appearance Special content types Text Visual properties Print Positioning position:; posposition:static; pos:sposition:absolute; pos:aposition:relative; pos:rposition:fixed; pos:f top:; ttop:auto; t:a right:; rright:auto; r:a bottom:; bbottom:auto; b:a left:; lleft:auto; l:a z-index:; zz-index:auto; z:a Box behavior and properties float:; flfloat:none; fl:nfloat:left; fl:lfloat:right; fl:r clear:; clclear:none; cl:nclear:left; cl:lclear:right; cl:rclear:both; cl:b visibility:; vvisibility:visible; v:vvisibility:hidden; v:hvisibility:collapse; v:c overflow:; ovoverflow:visible; ov:voverflow:hidden; ov:hoverflow:scroll; ov:soverflow:auto; ov:a overflow-x:; ovxoverflow-x:visible; ovx:voverflow-x:hidden; ovx:hoverflow-x:scroll; ovx:soverflow-x:auto; ovx:a zoom:1; zoo Sizing width:; wwidth:auto; w:a Text Print

Off Canvas Inspired by the observations of Luke Wroblewski, this Off Canvas layout demo has 3 panels that display differently depending on the viewport width. The idea here is to have the two supporting panels of navigation and sidebar content hidden just off-screen to the left and right for easy access on small/medium viewports. Off Canvas is a design pattern, not a plugin or framework.

Related: