SitePoint » Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and More » Web Design Tutorials & Articles

Scalable Vector Graphics: Drawing Basics

Craig Buckler — Tue, 22 May 2012 16:38:16 +0000

In my previous posts we discussed what SVGs are and reasons you should consider SVGs for your project. In this article we’ll look at the basic concepts, document structure and drawing elements.

SVG Co-ordinate Space

An SVG is defined in whatever co-ordinate space you give it. That space does not necessarily relate to pixels, cm, inches or other units because the images are scalable to any dimension.

Optionally, you can define a viewbox which determines the co-ordinates your SVG uses. The following SVGs would look identical:

An SVG with a viewbox of 0,0 to 200,100 with a line from 0,0 to 100,50.
An SVG with a viewbox of 0,0 to 300,150 with a line from 0,0 to 150,75.

Your images are rendered within a viewport, i.e. the whole browser window or a block in an HTML page. By default, an SVG viewbox will stretch in either direction to fill the viewport space. However, you can state that you want the aspect ratio preserved.

Unlike mathematical graphs, the SVG co-ordinate system starts at the top left (usually 0,0) with the x-axis pointing right and y-axis pointing down. Therefore, a point at 100,200 represents 100 units to the right of the left hand edge and 200 units down from the top edge.

SVG Length Units

Lengths in SVG can be specified either as:

a relative value in the SVG space, e.g. 10
an absolute or relative measurement, e.g. 10px. SVG supports em, ex, px, pt, pc, cm, mm, in and percentage units.

If your image will be scaled, use units which are relative to your viewbox, e.g. a line width of 10 within a 100×100 viewbox will be 10% of the full width/height.

SVG XML Document

An SVG image is defined as an XML document. Assuming you’re creating a new SVG file, such as image.svg, an XML declaration and doctype must appear at the top of the document:

This is followed by the root SVG element:

Several optional attributes can be applied to the svg element. Two important ones are:

viewBox: establish the dimensions — a rectangular co-ordinate area used for your image specified as “min-X min-Y width and height”, e.g. viewBox="0 0 600 400". It’s important to remember this is an abstract space; it does not relate to pixels and your drawing elements are not constrained within these co-ordinates.
preserveAspectRatio: defines how a viewbox is scaled. There are many options, for example preserveAspectRatio="xMidYMid meet" ensures the middle of an SVG’s viewbox is aligned with the middle of the viewport (the browser window or HTML element containing the SVG) and the image fits the space available while preserving its aspect ratio.

An optional title and description can be defined using title and desc elements. Our basic XML document is therefore:

Grouping Elements

Any set of elements (lines, circles, rectangles, text, etc.) can be grouped using … tags. In essence, it’s identical to grouping drawing objects in a graphics package so they can be manipulated as a single item.

Personally, I prefer to define a root group node so I can modify the whole image easily via JavaScript or CSS, e.g.

A single group can have any number of nested inner groups.

Lines

A single line between two points is drawn using the line element:

The stroke-linecap attribute defines the line-end effect and accepts values of butt (the default), round, square or inherit:

Polylines

Polylines define a set of connected straight line segments:

The stroke-linejoin attribute defines the line-joining effect and accepts values of miter (the default), round, bevel or inherit:

Polygons

Polygons are are similar to polylines except that the resulting shape will always be closed:

Rectangles

Square or rounded rectangles are defined using the rect element:

The x and y attributes define the top-left corner. rx and ry specify the horizontal and vertical corner rounding.

Circles

Circles are defined using a center point and radius:

Ellipses

Ellipses are defined using a center point and two radii values:

Text

Basic text can be added using the text element:

SVG

The x and y attributes define the bottom-left co-ordinate of the first character in the string.

The Result

Our final SVG document contains the following XML code:

and renders this image:

click to view the actual SVG

While this is a simple example, the file is 1,176 bytes before minification and gzipping. The equivalent compressed PNG above is 5,611 bytes — it’s almost 5x larger and cannot be scaled above its native 407×274 resolution without losing quality.

Further Scalable Vector Graphic articles will appear on SitePoint soon…

5 Fantastic Podcasts For Web Designers

Megan Kirby — Mon, 26 Mar 2012 16:00:47 +0000

If you are a web designer looking to learn new skills, or even just to listen in on conversations about your passion, then podcasts might just be the ticket for you. You can listen in the car, at work, or even at the gym, to gain new insights into your career. Talk about multi-tasking! Here are 5 of my favorite web design podcasts:

1. The Big Web Show

The Big Web Show focuses on a special guest each episode. This is great, because this allows each episode to take a new direction, usually going in depth into what the guest’s specialty is, or is really passionate about. It is produced by the 5by5 Network and features topics like web publishing, art direction, content strategy, typography and more. Big Web has a very loose format, but still manages to pack in a lot of great information, and the guest format brings in new perspective each and every episode.

2. The Web Ahead

Also produced by the 5by5 Network, The Web Ahead is the more technical cousin of The Big Web Show. More dedicated to the web developer, the show hosted by Jen Simmons focuses on the changing technologies and future of the web. They discuss such topics as HTML5, mobile, responsive web design, iOS, and Android. There are all topics that web designers should be well aware of, even if they are on the front-end.

3. The Deeply Graphic DesignCast

With only 8 episodes under its belt, Deeply Graphic has already found its stride. While not exclusively devoted to web design, many of their episodes do focus on it. Already, there is a 2 part episode all about the web design trends of 2012, as well as an episode dedicated to online portfolio websites. Most of the other episodes focus on general business-side topics that print as well as web designers can apply to their business. Produced by The Deep End design studio in Los Angeles, the three hosts have varied experience, and weigh in on issues from different viewpoints, which makes for a very interesting and entertaining show.

4. Shop Talk

Shop Talk is a podcast with a twist… its also a live call-in show! The two hosts, Chris and Dave share a genuine enthusiasm about web design and development that is infectious. They have guests on a regular basis and they have a lot of fun talking about some really geeky things. But I just happen to be a geek too, so it fits into my day perfectly.

5. The Boagworld Show

Boagworld combines entertaining banter and great information into an extremely listenable package. They follow the format which I like, one topic per episode. But these guys take it a step further, and organize their podcasts into “seasons” of 6 episodes each. Each season is its own umbrella topic, and each episode fits nicely under that umbrella.

Bringing Cut the Rope to Life in an HTML5 Browser

Giorgio Sardo — Wed, 08 Feb 2012 22:50:01 +0000

Award-winning mobile game Cut the Rope is an immediate favorite for anyone who plays it. It’s as fun as it is adorable. So we had an idea: let’s make this great game available to an even bigger audience by offering it on the web using the power of HTML5.

To do this, Microsoft’s Internet Explorer team partnered with ZeptoLab (the creators of the game) and the specialists at Pixel Lab to bring Cut the Rope to life in a browser. The end result is an authentic translation of the game for the web, showcasing some of the best that HTML5 has to offer: canvas-rendered graphics, browser-based audio and video, CSS3 styling and the personality of WOFF fonts.

You can play the HTML5 version of Cut the Rope at: www.cuttherope.ie.

We think that the HTML5 version makes the web more fun and it demonstrates the advances in standards support made in the latest version of Internet Explorer. With that in mind, we want to share some of the cool “behind the scenes” technical details used on this project to help you build your own HTML5 sites and ultimately get ready for the Windows 8 Store!

Cut the Rope running in IE9 as an HTML5 application, ported from the original iOS source code.

A screenshot of one of the specially designed levels that are uniquely available in this version.

Objective-C to JavaScript

In bringing Cut the Rope to a new platform, we wanted to ensure we preserved the unique physics, motion, and personality of the experience. So early on we decided to approach this game as a “port” from the native iOS version (rather than a rewrite). We kicked off the project with an extensive investigation of the original Objective-C codebase. Turns out it’s a big and complex game. The native iOS version consists of about 15,000 lines of code (excluding libraries)! The most complex parts of the codebase are the physics, animation, and drawing engines. They’re complex on their own, but made even more so by the fact that all three are tightly connected and highly optimized.

It was a daunting task: get this code into a browser while maintaining the unique personality and incredible quality that gamers are accustomed to. To accomplish this, we bet on JavaScript.

In the past, JavaScript had a reputation of being a slow language. Frankly, that reputation was initially valid. Older JavaScript engines were designed for simple “scripting” kinds of tasks (hence the name). Today, however, JavaScript engines have been highly optimized. With features like just-in-time compilation, JavaScript now can execute at near native speeds.

Beyond that, we know that coding for JavaScript is different from – and requires a different kind of mindset than – coding in a compiled language. As we ported the game from Objective-C, we knew we would need to embrace the task of making these sorts of changes and optimizations.

One obvious example was the lack of structs in JavaScript. Structs are lightweight aggregations of related properties. It’s easy to use a JavaScript object to hold a set of properties, but there are important differences between that approach and a proper struct. The first difference is that structs get copied whenever they’re assigned to a variable or passed to a function. So, a function written in a compiled language like Objective-C can modify a struct passed as a parameter without affecting the value in the caller. Even within a function, assignment of a struct to a different variable will copy the values. JavaScript objects, on the other hand, are passed by reference. So when a function modifies an object parameter, the changes will be visible to the caller.

An easy way to mimic the nature of structs is to create copies of JavaScript objects for assignment or parameter passing. In native languages there is typically very little overhead to using structs. Creating an object in JavaScript is much more expensive, so we had to be very careful to minimize the number of allocations. Particularly on assignments, whenever possible we tried to copy individual properties rather than creating entirely new object instances.

Another example is the object oriented nature of the Objective-C codebase. In lieu of traditional object-based inheritance, JavaScript offers prototypical inheritance, inheritance based on the Prototype property. This is a highly simplified form of object inheritance that really isn’t compatible with a traditional object oriented language like Objective-C. Fortunately, there are a variety of class libraries that can help you write object-oriented programming (OOP) style code for JavaScript; we made use of a very simple one that was written by John Ressig (of jQuery fame). (Note that ECMAScript5, the specification for the newest version of JavaScript, also includes some support for classes but we opted not to use it in this port due to our lack of familiarity with that version of the language coupled with our aggressive development schedule).

In addition to porting from Objective-C to JavaScript, we also needed to port our graphics code from OpenGL to the HTML5 Canvas API. Overall, this went really smoothly. Canvas is an amazingly fast rendering surface, especially in a browser where that API is hardware accelerated (like Internet Explorer 9).

An example of drawing the ropes with aliased lines using the canvas API.

Surprisingly, we encountered a few areas where the Canvas provides more functionality than does the version of OpenGL ES that was used by the mobile version of Cut the Rope. One example is drawing anti-alias lines. Drawing anti-aliased lines in OpenGL requires tessellating a line into a triangle strip and fading the opacity of the end caps to complete transparency. The HTML5 canvas automatically handles anti-aliasing for lines drawn with its line API. This meant we actually needed to remove code from the OpenGL version. Unwinding the array of triangle vertices in the OpenGL code also gave us much better performance over trying to natively copy the triangle strip method of drawing lines.

In the end, we have nearly 15,000 lines of code executing in the browser (it’s been minified so if you view the source code in your browser, it will be many lines fewer than that). Anticipating the complexity associated with that much code, Denis Morozov (the Director of Development at ZeptoLab) asked a fair question early on: will HTML5 give us the speed and performance that we need for this game?

To answer that, we created an early “performance” milestone, one where we focused on getting a minimal version of the most intense parts of the game running. Namely, we wanted to see what the ropes looked like and whether we could handle the complex physics engine in the browser.

Performance

Three weeks into the project, we finally had the basics of the physics and drawing engines in place with a simple timer to bootstrap the animation. We could now render a couple of ropes, a star, and an Om Nom sprite into the game scene. Progress! By week four, we had included some basic mouse interaction and with that we could actually play the game! We were testing performance along the way, but we wanted to let the team at ZeptoLab give us their feedback.

When we shared the code with ZeptoLab, they were pleasantly surprised by the performance (particularly the speed and smoothness from the game) that we were seeing in modern browsers. To be honest, we had been holding our breath just a little. We expected JavaScript to be fast but the physics calculations were intense and had to happen in real-time. This is a great example of where common preconceptions about the “slowness” of JavaScript turn out to be wrong. The latest generation of JavaScript engines is incredibly fast.

In this case, we were previewing the game in Internet Explorer 9. When you load the game, Internet Explorer 9’s Chakra JavaScript engine pre-compiles the code on a background thread—just as a compiler would compile a language like Objective-C or C++. It then, in real time, sends the compiled code (byte-code) to the game thread for execution. The result is near-native execution speeds. Amazingly, this is something that you just get for free from the JavaScript engine—we didn’t have to do anything special in the code.

Framerate test results early in the project (note that framerates are capped at 60FPS)

Our bet on JavaScript was paying off, so we turned our attention to hardware and browsers. With Internet Explorer’s hardware-accelerated rendering stack and our experience with Disney Tron and other HTML5 sites, we didn’t have any concerns about its ability to run the game perfectly on our test machines. We were easily hitting our capped goal of 60 FPS (frames per second). We wanted to be sure, however, that the game ran well on other hardware with other browsers. Here’s what we saw after some preliminary testing.

Based on those numbers, we set 30 FPS as our minimum bar. We decided that when the browser goes below that threshold, we would notify the user. They could still play the game, but we’d inform them that it could feel a little bit sluggish. This ensures that we support the huge diversity of hardware and software that’s out there and provide the best experience we can to all of the game’s visitors.

Two things we want to point out. One, the current version of the game works best on desktop PCs and Macs with a mouse. We have not added the support for touch based input yet, but this is something we’re considering for future versions.

Second, the current version of Chrome (version 16) has known issues related to media playback that make sound unpredictable in Cut the Rope. We researched workarounds and have attempted to re-encode the media in multiple formats (including WebM), but haven’t found a format or MIME configuration or anything else that will reliably fix the problem. These appear to be browser bugs and known issues. More importantly, the game continues to be playable and enjoyable in spite of the intermittent audio. In light of that, while we can say Internet Explorer 9 users get a great plug-in free experience, Chrome and some Firefox users could have run into an audio problem but will notice we fall back to a flash plugin to ensure that sound effects and music will work.

Tools

A great thing about HTML5 is that you don’t need to learn a new language to unlock the power of this new technology. If you know and understand JavaScript, you already have access to all that a modern browser can do. You could even create your own game like this!

Code Editor and Development Environment

Visual Web Developer 2010 Express is a free download and a great editor for even experienced web developers.

A screenshot from the profiler that shows the disproportionate amount of time being spent in Calc2PointBezier, a function that’s used to caculate the positions of the rope segments.

There are some great free tools that make working with JavaScript and HTML5 easy. Much of our development was done in Visual Web Developer 2010 (the “express” version is available for free here). This is a really robust web editor with autocompletion for JavaScript and CSS. It’s great that the express version is free! We did most of our testing in Internet Explorer 9 on Windows 7 and from time to time we would also test on Firefox, Chrome, Safari, and in Internet Explorer 10 developer preview. In general, all major browsers have a very consistent implementation of the HTML5 features we used and, in most cases, anything we tested in Internet Explorer 9 “just worked” everywhere else.

Check out our Resource Loader!

Cut the Rope has unique and very detailed visual styling – lots of media in the form of images, sounds and video – which comes at a small cost. The result is that the whole game is much bigger than an average website. Combined, it’s around 6 MB (compared to 200-300K for a typical site). That much media can take a little while to download and we can’t start the game until we know everything is there. A traditional web page is pretty forgiving if you’re missing an image or two but the HTML5 canvas API (drawImage) will fail if the image isn’t available.

To tackle this challenge, we wanted to create a resource loader that downloads all of the content we need for the page and gives us good feedback as things are downloaded. This bit of code does a bunch of smart things:

1. It deals with the peculiarities of how different browsers handle downloads and how they inform you of their progress.

2. It lets you make smart decisions about the order in which things are downloaded (you might want to start big files first, for example, or maybe download all of the menu images before you get the game images).

3. Finally, it gives you smart events as things arrive so that you can show the user progress or even start part of the game when the first group is completed.

Building these types of libraries is tricky to do well. Since we’re really pleased with how this all came together, we wanted to share the code for our resource loader with you. The result is PxLoader, a javascript Resource Loader library that you can user to make preloaders for HTML5 applications, games and sites. It’s open source and free. You can grab it from the top of the page, or just click here.

Performance Tools in Internet Explorer

Another indispensable tool in the development process was the JavaScript Profiler in Internet Explorer 9. Profiling lets you discover hot spots and bottlenecks in your code. At one point in our first performance related milestone, we nearly called it quits when we discovered that on some machines we were stuck at 20 or 30 FPS.

We did some initial code reviews, but nothing was jumping out. We loaded the game with the profiler and immediately saw that we were spending a lot of time inside the satisfyConstraints() function. That function calculates some of the math related to the physics of the ropes. The Objective-C implementation which we had ported was written recursively, passing a new object into each successively deeper call.

With some guidance from Microsoft, we decided to replace the recursive function with an “unpacked” iterative version of the same code. The results were amazing. We saw a 10x improvement in every browser! Frankly, we would have never found that without the profiling tools in Internet Explorer 9.

What’s next?

At BUILD in September, Microsoft showed a developer preview of Windows 8. With this announcement, the HTML5 story got more interesting because Metro style applications can be created using a variety of developer toolsets, including HTML5. This means that web developers can take code that was written for the web and easily and seamlessly port it to Windows 8. The investment in immersive experiences online now can pay off in real profits later with the Windows Store.

In fact, with very little extra work, we were able to port this HTML5 experience to a Windows 8 Metro style app. Read about Cut the Rope and its integration with the Windows Store in this blog post.

We are excited to see what developers can build today with HTML5. You can download Internet Explorer 9 and find other beautiful sites at www.beautyoftheweb.com, or download the Developer Preview of Windows 8 at dev.windows.com.

Responsive Web Design

Katrien De Graeve — Mon, 30 Jan 2012 12:30:21 +0000

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Core Concepts

Three key technical features are at the heart of responsive web design:

Media queries and media query listeners
A flexible grid-based layout that uses relative sizing
Flexible images and media, through dynamic resizing or CSS

Truly responsive web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.

Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three ways to implement media queries:

Use the @import rule to import style rules from other style sheets:
@import url(style600min.css) screen and (min-width: 600px);
Put media queries directly in the style sheet, as shown below.

#nav
    {
        float: right;
    }
        #nav ul
        {
            list-style: none;
        }
    @media screen and (min-width: 400px) and (orientation: portrait)
        {
            #nav li
            {
                float: right;
                margin: 0 0 0 .5em;
                border:1px solid #000000;
            }
        }
    @media screen and (min-width: 800px)
        {
            #nav
            {
                width: 200px;
            }
                #nav li
                {
                    float: left;
                    margin: 0 0 0 .5em;
                    border: none;
                }
        }

Include a query in a linked style sheet’s media attribute:

/>

Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.

The following images present an example of a responsive web design approach that uses media queries.

Figure 1 and Figure 2 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 3 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.

Figure 1 Navigation Appears on the Left

Figure 2 In an 800×600 Resized Window, Navigation Switches to the Top

Figure 3 The Same Site on a Windows Phone

If you’re looking for some great examples of responsive web design that take full advantage of media queries, the http://mediaqueri.es/ enthusiast site can be addictive, as Figure 4 shows.

Figure 4 A Collection of Sites That Use Media Queries

Media Query Listeners

Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.

Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo “CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.

So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

Other viewport settings include maximum-zoom and initial-scale.

Flexible Grids

A flexible grid-based layout is one of the cornerstones of responsive design. The term “grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing.

By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result

Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5

This results in the following CSS style:

h1{
    font-size: 1.5em;
}

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is:

12 ÷ 24 = 0.5

And the CSS style is:

h1 a{
    font-size: 0.5em;
}

You can also use percentages. The calculation algorithm is the same; you just end up with percentages.

Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System or Fluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.

CSS3 Grid Layout

The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an “Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.

Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications.

How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width.

In the first example, the HTML for defining the content consists of one header and three different blocks of text.


    
        Hello world
    
    
        Lorem Ipsum section 1
        
            Phasellus venenatis sem vel velit tincidunt tincidunt.
              Curabitur gravida, ante sit amet [... ...]
        
    
    
        Lorem Ipsum section 2
        
        Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
        Suspendisse [... ...].
        
    
    
        Lorem Ipsum section 3
        
            Curabitur ultrices tristique purus, sed pellentesque
               magna scelerisque ut.
            [... ...]

You start by laying out the blocks of content under each other so that the content fits smartphones.

@media only screen and (max-width : 480px) {
    #mygrid {
        display: -ms-grid;
        margin: 3px;
        -ms-grid-columns: 100%; /*one column taking full width */
        -ms-grid-rows: 70px auto auto auto; /*4 rows */
    }
    #myheader {
       -ms-grid-row: 1;
       -ms-grid-column: 1;
    }
    #block1 {
        -ms-grid-row: 2; /*place into row 2 / column 1*/
        -ms-grid-column: 1;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #block3 {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }
}

You can add background colors as shown in Figure 5 to make it clearer that you’re working with grid items.

Figure 5 Blocks of Content with Background Colors

In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions, as below. The results are shown in Figure 6.

@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 — just because we can*/
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
        -ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction of available space*/
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2; /*block 3 can go into row 2*/
        -ms-grid-column: 4;
         background-color: #515050;
    }
}

Figure 6 A New Layout with Two Adjacent Columns

The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between. The results are shown in Figure 7.

@media only screen and (min-width: 1220px) {
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        -ms-grid-rows: 100px 1fr;
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2;
        -ms-grid-column: 5;
        background-color: #515050;
    }
}

Figure 7 Three Side-by-Side Columns with a Spanning Header

The Grid specification is a welcome addition for implementing responsive web designs.

Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Websites.

Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change.

The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.

Flexible Images and Media

The final aspect of responsive web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.

Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

img, object {
    max-width: 100%;
}

An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.

Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive web design evolves and becomes the basis for many quality Websites.

Legacy Browsers

What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.

css3-mediaqueries.js by Wouter van der Graaf: code.google.com/p/css3-mediaqueries-js/
Response.js: github.com/scottjehl/Respond
Fluid images: unstoppablerobotninja.com/entry/fluid-images/

In Closing

Jumping on the responsive web design wagon isn’t something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.

Responsive web design is in its early stages. Web designers will continue to offer different opinions and recommend directions related to whether to build for mobile first, how to fit these decisions into the design process, whether to slice up the comps into all the different screen sizes, and so forth. And as more and more screen sizes and form factors arrive, the conversation will continue.

HTML and CSS standards are evolving to help web designers deal with these issues. It’s clear that some form of responsive web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.

Here are some additional resources:

Webfont Icons: an Alternative to Images

Craig Buckler — Tue, 17 Jan 2012 16:49:01 +0000

Let’s be honest, creating dozens of tiny icons in a graphics package isn’t fun. Even when you’ve gathered a decent set, you end up managing dozens of tiny files or creating image sprites and slicing them in CSS.

Fortunately, HTML5 provides us with another option: webfonts. A font set can contain graphical icons and character sets. Wingdings is the most well known but free fonts such as Iconic can be more useful and provide example HTML and CSS code.

View the webfont icon demonstration page…

Once you’ve found or created a suitable font, you’ll need to convert it to a number of formats to ensure good cross-browser compatibility. The @Font-Face Generator at fontsquirrel.com does the hard work for you and supplies a ZIP file containing all the fonts and CSS code. The font is then imported at the top of your CSS file, e.g.


@font-face {
	font-family: "IconicStroke";
	src: url("iconic_stroke.eot");
	src: url("iconic_stroke.woff") format("woff"),
	url("iconic_stroke.ttf") format("truetype"),
	url("iconic_stroke.otf") format("opentype"),
	url("iconic_stroke.svg#iconic") format("svg");
}

It’s possible to add icon characters to your HTML file, such as using an ‘r’ for Iconic’s RSS icon. However, that may confuse people using screen readers so CSS pseudo elements are a safer option, e.g.

Your HTML:


RSS Feed

Your CSS:


.rss:before
{
	font-family: "IconicStroke";
	content: "r";
}

The Advantages of Webfont Icons

Webfonts can be an ideal alternative to graphics:

fonts can be scaled to any size, use any color and have CSS effects applied
webfonts offer good cross-browser compatibility and even work in IE6
a single font file can be more efficient than multiple images

The Disadvantages of Webfont Icons

Webfonts may not always be appropriate:

font characters are single-color (although CSS3 effects can help)
generating fonts is not as easy as PNGs or SVGs
image file sizes will be smaller if you only require a few icons.

Overall, there’s little to dislike about webfont icons and they could cut development time. Have you used them in any of your projects?

View the webfont icon demonstration page…

DesignFestival: 18 Great Stripe Generators and Textures on the Web

Tara Hornor — Fri, 23 Dec 2011 10:00:37 +0000

Stripes are a great way to create some energy in your background or just give your designs some texture. This collection gives you two sets of tools: generators and images. The stripe generators allow you to create and download repeatable stripe patterns right out of the browser. These are great for simple stripe patterns and quick design if you don’t have the software to create your own stripe patterns, making them perfect for use in any design project.

Continue reading here:
DesignFestival: 18 Great Stripe Generators and Textures on the Web

DesignFestival: WordPress Plugins for Graphic Designers and Photographers

Tara Hornor — Mon, 19 Dec 2011 06:00:45 +0000

If you are a freelance graphic designer or photographer, then you need a way to show off your work. WordPress is hands down one of the best ways to manage your own website. You can easily update content in minutes and the high degree of customization means you can make your WordPress site look exactly the way you want it. We broke down the three main plugin categories into gallery plugins, share/bookmark plugins, and social media plugins

DesignFestival: How to Make a Unique Header for WordPress

Tara Hornor — Fri, 16 Dec 2011 06:59:59 +0000

If you use WordPress to manage your website, you likely started with a theme that needs to be modified. It’s easy enough to use the built-in tools in WordPress to modify CSS and sidebars, but arguably the most important identifier for your site is the header. So how do you find this, create your own, and get it in place?

DesignFestival: Resource: 5 Free Icon Sets for Your Web Projects

Joel Falconer — Wed, 14 Dec 2011 13:59:27 +0000

Need icons in a hurry for your next web project? Here are five icon sets that can be had for free, perfect for web projects of all kinds and including a social services icon set. Token Glyphish WebAppers Icon Set Sapphire Icon Set Polaroid Social Icon Set

View article:
DesignFestival: Resource: 5 Free Icon Sets for Your Web Projects

DesignFestival: Designing for the Web: Templates and Grid Systems

Felix Mak — Tue, 13 Dec 2011 13:00:44 +0000

Continuing on from the previous article in this series, Designing for the Web: Resolution and Size , we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues and introduce some tools for you to use when designing a website. Just keep in mind that as in the print sphere, the web sphere contains a multitude of choices for design as well as development. This is only one method and we are attempting to come from more of a designer angle rather than a developer one.

Read this article:
DesignFestival: Designing for the Web: Templates and Grid Systems

DesignFestival: 10 Top CSS Design Resources

Tara Hornor — Fri, 09 Dec 2011 21:39:00 +0000

Cascading Style Sheets (CSS) gives you unprecedented control of the layout and design of any web document. As browser support only improves, we will see CSS becoming the primary styling system. This is partly because CSS is so light when compared to most JavaScript, AJAX, or image-based design systems. And as the support for more transitional features like sliders and gradients find their way into CSS, there may not be a need for anything but CSS in the near future.

Continued here:
DesignFestival: 10 Top CSS Design Resources

DesignFestival: I Still Love Flash. Here’s Why.

Felix Mak — Mon, 05 Dec 2011 17:25:24 +0000

In recent times, people from all quarters have been getting their boots into Flash. The late Steve Jobs felt that (other than the competing business model issues) supporting Flash was not in the interest of Apple’s customers and that iOS products would not support it. A week or two ago, I came across the Occupy Flash movement.

More:
DesignFestival: I Still Love Flash. Here’s Why.

DesignFestival: Designing for the Dark Side

Tara Hornor — Thu, 01 Dec 2011 23:18:09 +0000

Whatever your motivation — the client told you to do it, you’re tired of white or light backgrounds, or your deep-seated anger over your own father cutting your hand off (just don’t be a hater!) — designing dark websites can be a serious challenge. Careful use of the Creative Force is in order as dark designs have special considerations. A few design tips will keep you from fully giving in to the Dark Side, although this might just be your destiny… For those of you looking for some inspiration, check out this collection of 20 dark websites with some excellent examples. If you need some design advice, keep reading

DesignFestival: Designing for the Web: Resolution and Size

Felix Mak — Mon, 28 Nov 2011 22:44:51 +0000

As a graphic designer working in print, it is important to understand and work to a set of fixed standards. This ensures that what the designer produces will actually be usable as a print item and also printable! For example in print, designing a simple business card has its own factors to watch for — this is also dependant on who you use to print your jobs. Some common issues to watch for would be if the job is of a standard size (and if the printer offers its own set of guidelines and sizes), if you decide to print in laser (which affects price as well as color), or offset, if you are using solid or process, how much bleed should you leave and if they have affordable metallics — the list could go on and on! Even with so many varied print issues, we feel comfortable ensconsed in our guidelines and the familiar set of difficulties.

View article:
DesignFestival: Designing for the Web: Resolution and Size