Showing posts with label responsive. Show all posts
Showing posts with label responsive. Show all posts

Sunday, December 20, 2015

6 Essential Bourbon Neat Mixins

6 Essential Bourbon Neat Mixins

This tutorial is aimed at getting you started with Neat; a semantic grid framework built for Sass and Bourbon.

Tuesday, October 06, 2015

Responsive Images for Busy People: Srcset & Sizes

Responsive Images

This guide won't regale you with the cool theory behind responsive images, because for now, you're just testing the waters. It won't lecture you on the potential benefits to site speed, because there are better resources out there. And it won't dwell on the pitfalls, quirks, or brain-bending complexities of the modern implementation, because you're a busy person and will study these later.

Instead, we're going to look at a single real-life example of efficient image scaling using the new srcset and sizes attributes. These should not be used for art direction – for this, you'll want to use picture and source media. Instead, we're strictly concerned with ensuring that the user's browser loads the most appropriately-sized version of our image based on the size of the viewport. We want the browser to be able to pick a source file before parsing or rendering CSS and JavaScript. To do this, we'll need to supply it with:

  • a list of image source files, plus their widths in pixels/li>
  • hints about the size at which the image will be rendered on the page

A Live Example

We'll dive right in with a live example, and then break down how it works. For the sake of being topical (and because NASA / JPL kindly release their images into the public domain), we'll go with the Curiosity Rover's selfie on Mars. The three image source files have been watermarked for convenience. Take a peek at the HTML and CSS powering this example. What's going on here? The first thing to note is that the usual src and alt attributes are present and correct. Browsers which don't support the new syntax will simply load the resource specified in the src as a fallback.

See the Pen Responsive Images with srcset and sizes by Tom Bennet (@tombennet) on CodePen.

srcset

Next up, srcset. As you'll see, this attribute contains a comma-separated list of image URLs; each one is followed by its width in pixels, specified using the w descriptor. "Why can't we specify heights too?", I hear you ask. Well, most images in responsive environments are constrained by their widths, not their heights, so dealing solely in widths keeps things simple. This situation may change in the future, but not today. So, our browser now knows which resources it can choose from. Splendid. There is, however, a problem: the browser doesn't know the size at which the image will be rendered on the page until it has downloaded and parsed all the relevant CSS and JavaScript files. Relaying this information to the browser before it starts processing your page's layout will enable it to start downloading the appropriate image file as soon as possiblw.

sizes

This is where sizes comes into play. This attribute is used to describe the various sizes at which the image will be rendered on the page. Much like srcset, it takes a comma-separated list, but in this case we supply a list of CSS lengths paired with media conditions, which is then followed by a default length. This is easier to understand when you've got a simple example translated into English, so here goes...
sizes="(min-width: 40em) 33.3vw, 100vw"
This says: "If the viewport is wider than 40em, then this image will take up one third of the viewport. Otherwise, it will take up the full-width (100%) of the viewport." We're pairing media conditions with CSS lengths, thereby giving the browser a clue as to the breakpoints it will encounter in the CSS. Note that more than one pair can be provided. The browser will iterate through your list of media conditions until it finds one that matches, and will then use the paired length as the image's rendered width. If none match, it will use the last length in your list (the one without a paired query) as a default. Here's the syntax:
sizes="
[media condition] [length],
[media condition] [length],
[media condition] [length],
[default length]"
Our browser now has all the information it needs to make a decision; it knows the widths of the source files, and the size at which the image will be rendered on our page.

calc

Why, then, is our Martian example slightly more complex? What is calc doing there? On the Red Planet, as on Earth, determining the size of a single element can be complex in a responsive environment. Thankfully, we can include the excellent and widely-supported CSS calc function to describe a relative length as mathematical expression. In our example, we've used calc(66.6vw - 4em) to express the length: "Two thirds of the viewport width, minus 4ems." Sure enough, head into the CSS, and you'll see rules that set our image width at 66.6% with 2em padding on either side.

Final Thoughts

A few pointers for those of you frantically resizing and refreshing the CodePen to try and change the watermark: the spec is fairly flexible, and allows the browser to make decisions based on both your markup and on other relevant factors. These can include the user's connection, preferences, whether or not a larger asset is already cached, and so on. Something to bear in mind. Support for this technique is quickly gaining momentum. As of the launch of OS X El Capitan, a full implementation is available in the current versions of Chrome, Firefox, Safari, and Opera (including mobile versions). As for Microsoft Edge, it's available in version 13, currently in Insider Preview and due to be released soon. For developers who require wider browser support, Picturefill is an excellent polyfill for responsive images. Version 3.0 – a full rewrite of the codebase – will be available imminently. That's all for now. If this quick primer has tickled your fancy, be sure to check out the excellent resources below for a comprehensive introduction. Happy coding!

Resources

Tuesday, February 24, 2015

Effective Web Typography: Rules, Techniques and Responsive Design

Effective Web Typography: Rules, Techniques and Responsive Design

Responsive Web Design isn't just about columns, grids, images and icons. All of this will not make sense without text for content. As Bill Gates once said "Content is King".

When it comes to content, we need to talk about web typography. Looking at modern web design trends, having responsive typography is a big factor every web designer and web developer shouldn't miss.

Here, we will discuss creating responsive web typography and factors you need to know about it.

Typography Basics

Good typography is all about selecting the right type for web or printed media. From font type, color of the text to the length and font-size on different viewports, good typography ensures that the final letter forms generate the highest quality end result.

Before we dive in to the process of creating successful responsive web typography, here are a few terms that you need to understand.

Typeface

Typeface

Also known as font family. This is a collection of design of characters with a complete set of letters, numbers, symbols, special characters and weight.

Font

Font

This is the actual computer file that contains information about the lettering used, such as typeface, weight, width, style and so on.

Baseline

Baseline

This is the line where the letters rest and where descenders extend.

Cap Height

Cap Height

This is the height of the capital letters above the baseline.

X-height

X-height

Also known as corpus size. This to the distance between the baseline and midline (half the distance from the baseline to cap height)

Descenders

Descenders

This is the part of a letter that extends below the baseline.

Tracking

Also known as letter spacing. This is the consistent increase or decrease of space between letters uniformly.

Kerning

The process of adjusting the space between individual characters in glyphs of varying widths.

Leading

Also known as line height in CSS. The distance between the baselines of successive lines or types.

Points to Consider on Web Typography

Words, phrases and sentences have meaning but each character can have emotion. Aside from being responsive, you must also consider presenting better web typography to your audience.

The complete design will not make sense if your audience will not understand or is not attracted to your content. In web typography there are four basic elements:

  • Type
  • Color
  • Texture
  • Image

All of these will have a big effect to your typography end-result but the type will magnify the expressiveness of your message.

There are five factors that can help you create presentable web typography.

1. Choose the best typeface that corresponds to your topic

Most sites nowadays are using the same typefaces. Yeah, you guessed it right; I am talking about Arial and Helvetica. However, it would make a lot of sense if you could align typefaces with your message.

For instance, your web pages talks about a children's book would it be good if you'll use something like DK Crayon Crumble or Little Miss Priss in your header text?

I am not suggesting you need to do this all of the time but the point is make sure that typography aligns with your target audience and the text is clear and readable.

2. Use web fonts

One of the greatest improvements of web design nowadays is the support for Web fonts on all modern browsers via @import command and standard link tag. Check out the demo below.

Using @import tag:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Using the standard link tag:


This means that you can use any font that is available on the hosted web font site such as Google Font, Typekit and Fontdeck. Here are the following the advantages of using web fonts:

  • It saves money. You don't need to purchase fonts online.
  • It saves time. While you can integrate fonts manually in your folders file, using web fonts can be done with a line of code.
  • They are compatible on all new versions of web browsers and are SEO-friendly.

3. Use proper color combinations

One of the major issues web designers commit nowadays is throwing unnecessary color combinations to their sites. Remember good web design can be identified by how well the site functions and how good the design is.

Speaking of design, you don't just design your web pages randomly and throw a lot of colors that doesn't mix especially with your text and background of your site. This will make your text unreadable and will bring pain to your visitor's eyes.

But how do you use proper color combinations? While there is no general rule, there are some guidelines.

  • Use proper contrast or distinction colors between text and the background as suggested by W3C. Colors that have the same value but different hue may be easily read with a person with a good vision but not on color blind person. It is important to check the contrast before applying it to your design. You can use this great tool to simulate contrast.
  • Use flat UI colors if possible. These colors are light and have great combinations that are not painful to the eyes. Check out flatuicolors.com for more information, based on Flat UI.

4. Use text instead of images

As we all know images make web pages slower. Most often images are the only way to force the web browser to display a preferred font and the exact layout you want. However this might not work. Using real text is the best way to go especially with responsive web design. Remember, search engines can't read images but they can read text.

5. Use fallback text style when clipping text

There might be a time wherein you need to clip text on images to create a textured or image text. The problem here is that not all browsers support this technique.

The best way to do this is using Paul Irish's CSS Browser Selector plugin. This is a lightweight plugin that detect the browser and manipulates the styles you want to appear on specific browsers. Here's how to use this cool plugin.

  • Download the plugin here and then link it to your head section:

  • Set CSS attributes (either id or class) with the code of each browser you want to change specifically on your stylesheet.

    .opera #header { margin: 20px; }
    .webkit #header { margin: 30px;  }
    .ie #header{ margin: 10px; }
    .ff3 #header {margin: 15px; }

For more information about this cool plugin check out this site.

Responsive Typography Ground Rules

Most of the fundamental typographic elements can be manipulated with CSS. However, it actually more than just adapting or optimizing the size of the text on each viewport. Now that we've discussed how you can achieve presentable web typography, it's now time to talk about the basic ground rules that we can apply to achieve better responsive typography.

1. Use rem instead of pixels and ems

The use of both pixels and ems is popular. While pixels are fixed, ems are relative units to the parent element. This means when you resize the browser it's hard to figure it out the size you need to set to achieve the output you want to attain.

A better option is using rems. Rems or also known as "root em" are always equal to the font size of the root HTML element and what's more exciting with this is that it was being supported by modern browsers.

html { font-size: 16px;   // 1rem = 16px }
h1 { font-size: 1.9rem // 19px }
h2 { font-size: 1.8rem // 18px }

In this example I'm defining a base font-size of 16px which is the reference of the font-size of the other element. The size of the h1 and h2 will change as the viewport changes.

For older versions of Internet Explorer, we can specify the font-size in px units first and define the rem units along with it and we can have a resizable text on all browsers.

html { font-size: 16px;   // 1rem = 16px }
h1 { font-size: 19px; font-size: 1.9rem; }
h2 { font-size: 18px; font-size: 1.8rem; }

2. Experiment rem units on different viewports

Now that you know how to use rem, you need experiment on different sizes of screens via @media queries. The output will depend on the typeface. You need also to use actual font sizes and see if you'll get the result you want.

@media (max-width: 640px) {
h1 { font-size:1.7rem }
h2 { font-size: 1.6rem }
}
 
@media (min-width: 480) {
h1 { font-size:1.9rem }
h2 { font-size: 1.8rem}
}

Notice that on smaller screens the font size is a bit bigger compared to the wider screens. This will make text more readable as users read via phone or tablet.

3. Use CSS3 pseudo-classes to specify specific styles

One of the great features of CSS3 is that it can target a specific letter, line or paragraph and give it a different style. This gives designers the freedom to resize or adjust the text on different sizes.


As you can see on the example below, we use the following the CSS3 pseudo-classes:

  • first-of-type – selects the first child of the paragraph tag
  • first-line – selects the first line of the the paragraph tag
  • first-letter – selects the first letter of the paragraph tag

4. Control your measure

As suggested by Robert Bringhurst, the most ideal measure or line-length is around 45 to 75 characters per line. For responsive web design, the measure is not that easy to control especially on smaller viewports. If you can't control measure, you can't control legibility of your text.

There is a good article by Elliot Jay Stocks that talks about this topic on how to use media queries to achieve a desirable line height and measure.

Using Plugins

While there are a lot of jQuery plugins that we can use for responsive web typography online, the most popular one is the FlowType.js. This jQuery plugin counts character per line and set font sizes at definite line length at any viewports.

Let's take a closer look on how this works.

Step 1: Set Typography Values

Start adding CSS basic set up for FlowType.js.

body {
   font-size: 16px;
   line-height: 20px;
}
 
h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}
 
h1 {
   font-size: 3em;
   line-height: 1em;
}
 
h2 {
   font-size: 2em;
   line-height: 1em;
}
 
p {
   font-size: 1em;
   line-height: 1em;
}

These values will be used by FlowType.js and change each values as the viewport resizes. Setting up font size and line height will enable you to access and set up your web pages when JavaScript was disabled.

Step 2: Link FlowType.js to your head section

Download FlowType.js and include it the head section of your html document.


Step 3: Call FlowType.js

Activate FlowType.js, we just need to add the following codes just before the closing tag.


Step 4: Customize FlowType.js Settings

There are some values that FlowType.js has by default, however you tweak them to the settings you want it to be set up. To do this, you just need to include some other options on your jQuery code.

$('body').flowtype({
   minimum   : 500,
   maximum   : 1920,
   minFont   : 16,
   maxFont   : 40,
   fontRatio : 34,
   lineRatio : 1.50
});

Aside from flowtype.js there are some other jQuery plugins that might help to create responsive web typography. Check out the following jQuery plugins:

  • FitText – A jQuery plugin that makes font-sizes flexible making text and headlines fluid or responsive.
  • js – A great plugin for radical web typography. It helps control the kerning of text in a just a line of jQuery code.
  • Responsive Measures – A simple script that enables you to create ideal measures for a container’s text.

What's Next?

Responsive design is becoming more and more advanced. We may think that images, layout and grids are what matters. However, we must not forget that the content or the text is what’s read by people and search engines.

Just like putting effort on layouts and images, you must also put some effort on how your text will appear. After all what matters most is that your text is readable, understandable and is easy for eyes on all viewports.


Friday, June 20, 2014

Responsive Multi-level Menu

Responsive Multi-level Menu

Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the "parent" level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.

Monday, April 28, 2014

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble

Flexboxgrid

Building with a grid has become an everyday requirement for front-end developers. Not only do grids provide a sense of rhythm and consistency in design, but when a well-known grid structure is used it provides a simple collective design language for cross–team work.

Saturday, April 26, 2014

Using Media Queries in JavaScript

Using Media Queries in JavaScript

If you practice responsive design then you use a lot of media queries. Media Queries are a CSS feature that gives designers the power to add something like if statements. By this I mean that it allows you to apply rules only if the current page meets certain conditions. In this article I'll show you how I use media queries in JavaScript.

Saturday, April 26, 2014

How to Make Any Website Responsive

How to Make Any Website Responsive

According to Verisign's Domain Name Industry Brief for 2013, it is estimated that 85% of all .com and .net TLDs (top-level domains) have websites: that's over 100 million websites (being that .com and .net domains collectively number over 120 million). Now, that is a lot of websites! So how exactly are we going to make them all responsive?

Saturday, April 26, 2014

Why Element Queries Matter

Element Queries
A sketch of our main component

At work, many of our pages present one or more collection of items, like products, shops, or whatever. It's basically a list of thumbnails, with a title and a location and/or a price. When you click on it, it leads you to the page related to the item. We call this the elements component (we could have called it thumbs-list or something but that doesn't matter).

Sunday, March 09, 2014

A responsive approach to image scaling with CSS

A responsive approach to image scaling with CSS

There was a popular article written a few weeks ago called "Vertical align anything with just 3 lines of CSS". This approach to vertically aligning things with top and translateY is something we've used recently, but in a little different context. We had to fit images into responsive containers that had fluid widths and set heights and all we knew were the widths of the images.

Sunday, March 02, 2014

Making Embedded Content Work In Responsive Design

Making Embedded Content Work In Responsive Design

A few HTML elements don't play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube.

Saturday, February 08, 2014

15 Best Responsive Web Design Testing Tools

Over the past few years we've seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and many more. As the use of different devices continues to rise all across the world, so does the need for us to deliver a tailored experience for those devices on the web. But how do you test your website responsiveness?

Sunday, January 12, 2014

Simple Responsive Grid

Simple Responsive Grid

A simple responsive grid layout with minimal markup.

<div>Simple Responsive Grid</div>
  <span class="grid">
    <div class="unit-2">Simple Responsive Grid</div>
    <div class="unit-2">Simple Responsive Grid</div>
        
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
        
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
  </span>
    
<img src="http://placehold.it/400x300">
  <span class="grid">
    <img class="unit-2" src="http://placehold.it/400x300">
    <img class="unit-2" src="http://placehold.it/400x300">
        
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
        
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
  </span>

div {
    font-family: monospace;
    text-align: center;
}

div, img {
    width: 100%;
    font-size: 80%;
    margin-bottom: 10px;
    color: white;
    background-color: black; /* optional border color */
    padding: 10px; /* optional border width */
    box-sizing: border-box;
}

.grid {
    display: block;
    margin-left: -10px;
}

.unit-2, .unit-3, .unit-4 {
    float: left;
    border-left: 10px solid transparent;
    box-sizing: border-box;
    background-clip: padding-box;
}

.unit-2 { width: 50%; }
.unit-3 { width: 33.3%; }
.unit-4 { width: 25%; }



via CSS Deck by

Tuesday, December 24, 2013

Challenges & Solutions for Your Responsive Navigation

Responsive Navigation

One of the biggest hurdles when creating a responsive website is implementing the navigation – hands down. Not just from a design standpoint, but from a content and development standpoint as well. Debatably the most important element on the page, a user should have no issues as they try to navigate around your website no matter what device they are on.

Saturday, December 07, 2013

Device State Detection with CSS Media Queries and JavaScript

Device State Detection with CSS Media Queries and JavaScript

Being able to detect device state at any given moment is important for any number of reasons and so it's important that web app CSS and JavaScript are in sync with each other. In working on the Mozilla Developer Networks' redesign, I found that our many media queries, although helpful, sometimes left JavaScript in the dark about the device state. Is the user viewing the site in desktop, tablet, or phone screen size? Easy from a CSS perspective but CSS doesn't directly speak with JavaScript. I've created a system based on media queries and z-index which can tell me which media query the user is viewing the site in at any given time, so that I can make adjustments to dynamic functionality whenever I want!

Friday, November 15, 2013

Which CSS Measurements To Use When

CSS Measurements
Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where and when, on their pages. The instinct is to use just one system for everything, but that decision can severely limit the execution of your designs.

What follows is a list of suggestions, not absolute rules.

Friday, November 01, 2013

Conditional Media Query Mixins

Conditional Media Query Mixins
Sass makes working with media queries pretty excellent. You can nest them right within other blocks of CSS, which puts the properties and values you are changing right next to each other. That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain those changes separated by tons of other code or in a different file. We've covered this before. It was new in Sass 3.2.

Sunday, October 06, 2013

12 must-read RWD resources (September digest)

12 must-read RWD resources

1. Seven Habits of Highly Effective Media Queries

Brad Frost shared some considerations for crafting high-quality media queries. Read this article »

Saturday, October 05, 2013

7 habits of highly effective media queries

7 habits of highly effective media queries
As we all know, media queries are responsive design's secret sauce. Here are some considerations for crafting high-quality media queries:

Tuesday, August 27, 2013

Responsive Images with Apropos

Responsive Images with Apropos

When Square's front-end engineering team was building our Japanese website, we decided early on that we needed to support a wide variety of devices, and that responsive design was the right way to do that. (Who wants to support a completely separate “mobile site”?) However, we weren't sure how we would serve every visitor the appropriate version of the gorgeous images shot by our talented photographers.

Friday, August 23, 2013

Responsive Content Using CSS Regions

Responsive Content Using CSS Regions

CSS Regions allow content to flow across multiple areas of the display, called regions.  The beauty of CSS Regions is that you can separate the content from the layout. And with that comes the ability to create some responsive content very easily.