UI Design Guidelines for Responsive Design Some UI guidelines and tips to consider when designing a website to make it cross-device friendly and responsive. The web development community has come up with endless solutions, best practices, and tools for coding a responsive design with ease. While the vast majority of websites can be made responsive now, it’s time to push the envelope further. It’s easy to pay attention to great coding best practices, but sometimes the best design practices for various screen sizes get pushed aside. Many resources on responsive design cover the basics — make use of excess space on desktop, make things simpler on mobile. Yet, many don’t go beyond this basic knowledge. Desktop We see most of the attention for user interface principles when it comes to desktop websites. Points to Consider With the possibilities of desktop design, we can get away with, and take advantage of: Websites should take advantage of the extra capabilities of a desktop site to give the users more options. Tablets Showcase Conclusion
30 Examples of Mega Menus in Web Design Mega menus are often used on large sites that have considerable number of pages for users to navigate. Rather than just using a dropdown, the mega menu opens up a bigger area that offers more options. While mega menus can make it easier for users to get deeper into the site with fewer clicks, the huge amount of options can also potentially overwhelm some visitors. For this reason, great care should be taken to make mega menus as user-friendly as possible. In this post we’ll look at 30 examples of mega menus in action. Looking for hosting? Text Opening Sequence with CSS Animations A simple and fun text opening sequence effect with blurry letters using CSS animations. View demo Download source Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS. The idea is to blur text and make it appear with a rotation while animating the space between the letters. So, let’s do it. Please note: this is highly experimental and only works as intended in browsers that support the respective CSS properties. The idea is to have a couple of sentences fade in with the aforementioned effect, so we’ll want to wrap every appearing bit into an h2: Remember, this is just a experimental effect; let’s not be too strict with markup best practices :) And the last one?
The Ultimate UX Design of: Responsive Web Design Navigation In this series Marcin Treder of UXPin – The UX Design App explains how to design the User Experience of the most important ingredients of web and mobile apps. Step-by-step tutorials and examples from the most important services in the world will help you in your own, everyday practice. Responsive Web Design – Current state of affairs Three years have passed since Ethan Marcotte coined the term “Responsive Web Design”. Once a revolutionary fresh idea, has in the year 2013 been transformed into a commodity. I’d even go so far as to say that responsive web design will soon be as obvious as the separation of css and html for semantic reasons. We live in the post pc era. Designers need to prototype responsive websites and coders have to code them. Wait a sec…What’s Responsive Web Design? Responsive Web Design is certainly not a self-explanatory term (although it’s close to that), so I guess we need to define it. Can’t wait to see it in action? The Challenges of Responsive Web Design Move & Hide
Complex Navigation Patterns for Responsive Design The most frequently asked question I get since posting my responsive navigation patterns article is: How do I handle complex navigation for responsive designs?” Great question, but before we get down to brass tacks, I urge you: use mobile as an excuse to revisit your navigation. Look at your analytics. What are your experience’s key sections? Where are people spending most of their time? Another thing: if you have a zillion sections and pages, prioritize search. OK, now that all that’s out of the way, time for some real talk. Sometimes you just have a complex navigation. The Multi-Toggle Barack Obama's Multi-Toggle Navigation from his redesigned campaign site The multi-toggle is basically just nested accordions. Quick tip: use one of two emerging icons: the plus sign (+) or downward caret (▼ ▼) to let users know there’s more content. Pros Scannable – users can quickly scan parent categories before making a decision to go to the next level.Scalable – Got a menu that’s 17 levels deep?
Creating a Border Animation Effect with SVG and CSS The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines. View demo Download source Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions. Let’s take a look at the basic concept first, and then we’ll work towards the final effect. Please note that we’ll be using CSS transitions on SVGs which might not be supported in all browsers. The next step is to add the other lines. And that’s it!
How to Make a Single Page Responsive Website with Flat UI Pro (Part 1) David East takes you step-by-step through the process of creating a simple website using Designmodo’s Flat UI Pro framework. In this video tutorial, you will learn to create a simple, single-page responsive website using components from Flat UI Pro. East takes you through the process of using the kit and customization to create a website from start to finish, from creating simple navigation to adding specific fonts, colors and images. As an added bonus, this kit works with the Twitter Bootstrap framework, making it fully responsive. The tutorial will help you build the site, fix any issues that pop up between screen sizes and publish. While you do need some knowledge of coding and web design basics, this tutorial is easy to follow and can have you on the way to building a great website in a matter of minutes! What you will learn in this tutorial: How to create a single-page website using Flat U Pro. Video run time: 27 minutes Part 1 Video run time: 12 minutes Part 2
A Pragmatic Developers Handbook In order to work effectively with git and github, you must understand the philosophy of it’s development mode. Git was created by Linus Torvalds to solve the code management issues experienced by the Linux kernel team. This team is highly distributed, highly capable, and very large, so the design requirements for git were to be very fast, very flexible, and to work well with a distributed team. GitHub adds to the core of git a web interface that makes it easy to browse code, create repository forks, and assign permissions. This combination is extremely powerful when used effectively. Steps Clone the repository You may choose to create a local fork, or you may have push rights to the upstream repository. To clone the upstream repository for this book, you would run git clone firstname.lastname@example.org:easel/handbook.git. If you are operating out of a forked repository, you should add a remote for the upstream, for instance with git remote add email@example.com:easel/handbook.git. Decide what to implement
Fixed Background Scrolling Layout A fixed background image scrolling layout with 100% height panels and smooth scrolling. View demo Download source A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section. The HTML <div id="cbp-fbscroller" class="cbp-fbscroller"><nav><a href="#fbsection1" class="cbp-fbcurrent">Section 1</a><a href="#fbsection2">Section 2</a><a href="#fbsection3">Section 3</a><a href="#fbsection4">Section 4</a><a href="#fbsection5">Section 5</a></nav><section id="fbsection1"></section><section id="fbsection2"></section><section id="fbsection3"></section><section id="fbsection4"></section><section id="fbsection5"></section></div> The CSS
Camlistore Camlistore is a set of open source formats, protocols, and software for modeling, storing, searching, sharing and synchronizing data in the post-PC era. Data may be files or objects, tweets or 5TB videos, and you can access it via a phone, browser or FUSE filesystem. Camlistore (Content-Addressable Multi-Layer Indexed Storage) is under active development. If you're a programmer or fairly technical, you can probably get it up and running and get some utility out of it. Many bits and pieces are actively being developed, so be prepared for bugs and unfinished features. Join the community, consider contributing, or file a bug. Things Camlistore believes: Your data is entirely under your control Open Source Paranoid about privacy, everything private by default No SPOF: don't rely on any single party (including yourself) Your data should be alive in 80 years, especially if you are Latest Release The latest release is 0.7 ("Brussels"), released 2014-02-27. Video Demo Or see the older presentations.