Applying App Design Concepts to Website Design Should we let app design guide us more in website design? In this article we'll explore how app design concepts can help rethink the planning and design of websites for a better user experience. If you ever look up best practices, design techniques, or trends in application design, you’ll notice something significant: there seems to be a much greater focus on what is most important, that being the user experience, usability, and functionality. We see this stressed every now and then for that in web design too, but how often is it done? Web design should not only be about making things look good, but also about good user experiences and a website’s goals. A Very Well Planned Out Layout If we’re talking about mobile apps or tablet apps, layout is extensively planned out ahead of time — usually to make efficient use of space. The same principle should apply to the Web right? I’m not against pattern libraries. Interactivity & User-Centric Design What makes an app, an app? Mobile First Conclusion
Interview Questions and Exercises About CSS If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to ask on-the-fly. I thought I'd think up and round up some ideas for reference. Exercises To Do Seeing people's actual work is just as important as what they say. Seeing people work their through exercises live might be even more important. Create This Button I saw this idea on Mobify's CodePen account. Using CSS properties alone, recreate this button: This would be a great test of the candidate's CSS3 skills. How did they handle multiple borders? I hope I didn't ruin Mobify's hiring process! Fix The Sidebar The right sidebar here has fallen down below the content. Even though the two columns are 75% and 25% wide and floated opposite ways, the sidebar has fallen. There are other ways. Make this fixed width design fluid. Here's a design. Changing the pixel widths to percentages (how did they handle the math?) Replace this logo markup with an image.
Responsive Typography in Web Design: Understanding and Using Responsive web design, also abbreviated as RWD, is a well-known concept on the internet nowadays. It is very popular and was introduced about 4-5 years ago to the masses. Since then, everybody talks about it and website owners without a responsive layout look on how to change that. RWD is important because the internet nowadays is mobile, not static. We do not only browse from our desktop machines anymore, we use tablets and smartphones. RWD has different components. Why consider typography? The content is the most important element of a website, we all know this by know. Typography is already introduced in Responsive Web Design to some extent (column width, type size or line height, for example), but this article will help you take beyond the default settings of RWD. What’s important There are three basic principles you need to keep in mind. But before looking at these, the choice usually is down to serif or sans serif fonts. Use alternatives Still media queries… Understanding REM DoneDone
A Simple Guide to Responsive Typography | textures The vast majority of articles talking about responsive design focus on two main areas: a fluid, flexible grid, and fluid, flexible images. What many of them don't talk about is typography. And yet, for the majority of websites the text, the content, is the most important element. Granted, for sites where images or video are the primary content, responsive type is a bit less important, but it still shouldn't be overlooked. The good news is that responsive typography isn't particularly difficult to achieve. Principles of responsive type There are two main principles to creating effective responsive typography. The second is optimized line lengths, which maintain readability. Resizable type using rems Most designers use either pixels or ems for sizing their type. Rems offer a better alternative to ems. Rem units are now supported in all of the major modern browsers, including Opera from version 11.6 and IE9. Now your rem units will be applied to the default font size for the device. Conclusion
Elastic Stack: Elastic Dragging Interaction ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out. View demo Download source Today we’d like to share a little script that lets you navigate through a stack of thumbnails with an elastic touch. Three items are visible initially, the main one and the the two next ones, which can be seen because we’ve added some perspective to the item list and translated the two items on the Z-axis. The HTML structure that we are working with is the following: When the first item gets dragged, we’ll want it to bounce back if it’s dropped too close to the stack. And this is how you can initialize the script: The beautiful illustrations used in the demo are by talented artist Guzk.
Tim Severien Posted on: October 21st, 2013 Photo: Wikipedia Alignment Horizontally and vertically Dynamic sized elements. Static sized elements. Another method for static sized elements (thanks Thomas). With percentages. Horizontally Block elements with a width value. Inline and inline-block elements. Vertically Inline and inline-block elements in a static parent. Faking tables. Sizing The following creates a full-sized block element, but it fails with borders, margins and padding. The next snippet creates a full-sized block element for full screen that doesn’t rely on box-sizing for margin and padding. Next we create an absolute element that’s always equal or larger than the viewport, based on the document’s height. Pretty much all methods mentioned here can be combined by nesting them.
Responsive Typography: The Basics by Oliver Reichenstein When we built websites we usually started by defining the body text. The body text definition dictates how wide your main column is, the rest used to follow almost by itself. Used to. Until recently, screen resolution was more or less homogenous. Today we deal with a variation of screen sizes and resolutions. In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing solely on the aspect of our latest experiment: responsive typefaces. To avoid designing different layouts for every possible screen size, many web designers have adopted the concept of Responsive Web Design. Adaptive layouts: adjusting the layout in steps to a limited number of sizes Liquid layouts: adjusting the layout continuously to every possible width Note: Responsive design already incorporates a lot of macro typographic issues (type size, line height, columns width). Choosing a typeface The right tone Serif or sans serif? What size? Line height and contrast
A simple guide to responsive typography The vast majority of articles talking about responsive design focus on two main areas: a fluid, flexible grid, and fluid, flexible images. What many of them don’t talk about is typography. And yet, for the majority of websites the text, the content, is the most important element. Granted, for sites where images or video are the primary content, responsive type is a bit less important, but it still shouldn’t be overlooked. The good news is that responsive typography isn’t particularly difficult to achieve. Principles of responsive type There are two main principles to creating effective responsive typography. The second is optimized line lengths, which maintain readability. Resizable type using rems Most designers use either pixels or ems for sizing their type. Rems offer a better alternative to ems. Rem units are now supported in all of the major modern browsers, including Opera from version 11.6 and IE9. Now your rem units will be applied to the default font size for the device. Conclusion
SVG Icons FTW Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and use SVG as icons in our web projects. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But fortunately we’ve had icon fonts coming to the rescue. It’s plain text, which means they can be gzipped to up to 95%It’s a vector graphic, which means it can be scaled to any size making it Retina readyIt’s one source file, which means a minimum of HTTP requestsIt’s a font – you can easily change size, color, shape and add a shadowBrowser support for older browsers possible (e.g. Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text shadow. So today we will explore the possibilities of using SVG icons instead. Using SVG icons Currently, SVG looks more like a retired super hero. Getting started
Responsive images – end of year report It’s nearly two years since I suggested a <picture> element as a strawman proposal as a way to solve the problem of responsive images, so let’s have a look at how we’re doing. In September there was a big meetup at Mozilla’s Paris office organised by Mozilla’s Marvellous Mr Marcos who’s been very active in the Responsive Images Community Group and did the hard work of actually turning the <picture> strawman into a spec. Such is the combined allure of Marcos and Paris that a rep from Apple showed up – kudos to Edward O’Connor. The outcome of the meeting was that <picture> isn’t a viable option. Browser makers don’t like the fact that it’s a new element that does the same as <img> (or what <img> should do if we were speccing it today), and that it depends on multiple nested children. I’d based this on the HTML5 <video> and <source> pattern, but Ian Hickson already said “we learnt with <video> and <source> that having multiple elements for selecting a resource is a huge design pitfall”.
Responsive Font Size with CSS | codeitdown.com Making your font-size respond to viewport or container size should be a must to complete your responsive designs. Having a fixed font-size accross devices is not always a good idea. The key point is to get a readable font size and a comfortable line length in most viewports. CSS viewport units and media queries provide the means to implement a responsive font size. Font Size and Line Length There are lots of different views on which is the best pixel font size, or which is the minimum readable size. There's much more to font sizing than it appears. As a general rule, use the largest font-size that doesn't look disproportionate and results in lines with 20 words or less (all words count). Getting the same physical font size and the same number of words per line in all devices would happen only in a world with a single universal screen size (imagine it!). Line Height A third measurement to take into account is line height or line spacing. CSS Viewport Units The Problem with Viewport Units
CSS3 module: Multi-column layout Abstract This module describes multi-column layout in CSS. It builds on the Box model module [no public working draft yet] and adds functionality to flow the content of an element into multiple columns. Status of this document This document is a Working Draft of the CSS Working Group. This is a public W3C Working Draft for review by W3C members and other interested parties. A list of current W3C Recommendations and other technical documents including Working Drafts and Notes can be found at Please send comments to the email@example.com mailing list (see how to subscribe) or to the editor. Table of contents 1. This CSS3 module depends on the following other CSS3 modules: the Box model module, which this module extends 2. This module describes multi-column layout in CSS. On the web, tables have also been used to describe multi-column layouts. 3. This proposal describes a set of new properties in order to support multi-column layouts in CSS. column-span 4. 5. 6. 6.1. 6.2.
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. The aim of this tutorial is to introduce you to several techniques that can be used to create this dimmed overlay with CSS, and determine the pros and cons of each technique as we go over them.
12 amazing tools for online collaboration | Design Individuals in design teams don't always work together in the same office. You may be positioned in distributed groups, or working from home, and clients can come from all over the world. This is where collaboration tools come in – they make it easier and faster for designers to get feedback and approve artwork in a professional manner, and they come in all sort of forms, from free Android apps to Chrome extensions. Here we gather together some of the best available online tools to allow designers to collaborate together in real time. Some are created specifically for designers, some serve as a concept crafting whiteboard, and we've also included some more full-on project management tools for when you need to take your collaborative project to the next level. 01. Want to improve communication with your team? Perfect for anyone managing a team of remote employees, Slack enables project development to move forward more smoothly. 02. 03. 04. 05. appear.in 06. 07. 08. 09. 10.