Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Archive for the ‘Responsive Web Design’ Category

5 Things I Learned in Web Design 2014

Posted on: December 22nd, 2014 by alemieux

Looking back on this year, I’ve learned some things for web design that’s made coding a bit easier if not more enjoyable. Some of these came about as a set of circumstances and others I just stumbled on. I hope you find some value in these too.

Bootstrap

Bootstrap

After wrestling with WordPress for so long, I started looking into some HTML frameworks for some boutique sites that I needed to build quickly. I heard about Bootstrap from a co-worker and she was using it for a the apps that her team was developing it. Once I started in, the full breadth of it was impressive and it took a while to get used to the grid system, but once I did, I saw the potential.

There are some really great things about Bootstrap that are baked in, like Buttons, forms, navigation, responsive images, and some great JavaScript components. I’ve used Bootstrap for a few sites now and beat up on it pretty good. It’s pretty stable / reliable and I really like the fact that there’s plenty of examples and good documentation on their site.

Media Queries

Media Queries

I must admit, that I was struggling with this one for a while. I understood the basic concept but its practical applications eluded me. I spoke to a friend about it and he simplified it for me. The trick is to start by creating all of your standard styles for mobile view first and then add media queries to support larger layouts. It made great sense and I still use that advice now.

JQuery

JavaScript & JQuery

I used JQuery heavily in a game that I created for a conference at work. Selecting elements and manipulating them with JQuery is so easy and JQuery offers some really powerful libraries to get things done. I was able to quickly create a working prototype with JQuery and then take that into full development.

John Duckett’s JavaScript & JQuery book offered some more great insights into JQuery that made me appreciate the language more.

.net Magazine

.net magazine

While wandering around Barnes & Nobles, I stumbled on .net magazine and was instantly hooked. This web resource magazine is packed with insightful articles, tutorials and information on best web practices and tools. The subscription price tag is pretty hefty, but the content is great. The November issue on Responsive Web Design was particularly helpful.

They have a great section of the mag called Showcase, which showcases websites from all over that are pretty fantastic. There’s a brief background story behind how each were built and it’s very inspiring. I highly recommend it.

Firebug

Firebug

I’ve been using Firebug for a while now, but I really started using the Console and debug mode this year. It’s making development easy for me. Not only do I inspect other site’s code, but I inspect my own code and am able to troubleshoot style and code issues. I do like Chrome’s dev tools, but I’m so used to Firebug now. Firebug’s add-ons are great too.

So there you have it, 5 things that made my life easier this year. What tools and sources made your life easier this year?

RWD – Browser Tools for Responsive Design

Posted on: November 26th, 2014 by alemieux 1 Comment

Last time, we looked at the HTML5 Shiv for older versions of Internet Explorer. Next up, we’ll take a look at some of the browser tools that you have at your disposal when working responsive.

Chrome

Google Chrome’s Developer tools are a fantastic repertoire of debugging aids that are essential for any web workflow. Chrome also comes in another form called Canary, which is intended for developers and has all of the latest features Webkit.

To Open the Developer Tools, go to View > Developer > Developer Tools. Immediately, you will see the HTML and CSS source in the Elements tab. You can inspect any element in the DOM by hovering over them first to see what’s highlighted, and then by clicking on them. All of the computed styles for the selected element will appear in the Styles tab. You can see the cascade and how styles are overridden as you move downward. If you want to temporarily disable a style, you can uncheck it. If you wanted to experiment with a given style, you can change the values in the style properties that are displayed. You can also enter new property / value pairs on elements. If a color is present, you can click on the color to get a nice color picker and change the value. None of these changes affect the page you’re working on, it’s literally a playground to check your work. If you switch over to the Console tab, you’ll be able to see any errors that might happen during a page load or on JavaScript events. You can use the Console to test variables and write some simple scripts to test.

The Responsive portion of the Dev Tools is some very nice emulation tools. Click on the rectangular shape near the magnifying glass in the top of the Developer Tools Window, this is supposed to look like a cell phone. Now you’ve enable Device Emulation mode.

Device Emulation

On the left is a handy pixel ruler. On the far right is a page scale indicator. By default, it’s set at 1.0. You can click the plus (+) or minus (-) buttons to change the scale or hold shift and drag on the page. At the top, in the orange section, you can select which device you want to test and change the orientation. The device pixel ratio is shown as 1 for some devices and for retina displays and HD screens, it’s shown as a higher value. The iPhone 5, for example, is shown as 2.

In the blue Network section, you can also emulate network throttling and latency. Refresh your page to see the desired effect. Unless you’re testing specifically for interactions that might be affected by network throttling, you should have this set to No throttling, which is the default.

You can get to the emulation options inside Chrome itself or inside the Developer Tools window.

Device Emulation Options

The range of devices and the ability to change the orientation is pretty impressive. Download Chrome and try the Dev Tools today if you haven’t already.

Firefox

Mozilla’s Firefox is my default browser. One indispensable Add-on that I’ve been using for years is Chris Pedrick’s Developer Tools, which you can also get for Chrome. When you install this add-on, you can:

  • Get the HTML source code in a nice, readable format
  • Get all of the CSS from any page you’re looking at, which includes external CSS as well as relative files.
  • You can enable and disable JavaScript
  • You can view all of the image information, including background images
  • You can outline all Block Level elements
  • You can also validate your HTML and CSS

For the responsive side of things, there is a Resize option. Here, you can resize the browser window itself to any pre-defined settings or settings that you add. If you choose Resize > View Responsive Layouts, you’ll get Mobile and Tablet views of your page in both Portrait and Landscape.

Firefox Responsive Layout

Another great Add-on for Firefox, which is very similar to Chrome’s developer tools if Firebug. Firebug has a tabbed interface where you can inspect your HTML, CSS, Scripts, and network activity. In the HTML tab, you can inspect the DOM. Rolling over an element will highlight it in the browser. The Style sheet is visible in the related Style panel. Here you can disable properties by clicking near them. You can also see a color chip for any colors that are specified.

Firebug

There are even Add-ons for Firebug, like YSlow, an Add-on that gives you performance data on web page load times and gives you advice on how to improve performance, which I’ve been using lately.

Although Firebug is pretty powerful, Firefox has its own set of developer tools. Steadily getting better, this suite of tools has all the things you’d come to expect with some additional features, one of them being a Responsive Design View.

Firefox Developer Tools

Click on the icon to the left of the Gear and you’ll be put into this view. There’s a list of preset sizes for Mobile and Tablet devices. You can change the orientation of the view with the arrow icon. Click the pointer finger icon to enable touch events, and you can take snapshots of each view.

Responsive Design View

I’ve been using this view over the past few weeks to test a responsive design and it’s been pretty reliable.

I should mention that Mozilla has just introduced Firefox Developer Edition. I just started playing around with this, but it has a really nice looking interface that’s easier on the eyes.

Firefox Developer Edition

Safari

Apple’s Safari has some built-in developer tools that have to be enabled. Go to Safari > Preferences and in the Advanced tab, choose Show Develop menu in menu bar. You may have to restart Safari afterwards.

Safari Preferences

Comparable to Chrome and Firefox, Safari has a web inspector in the Resources tab. You can also get to the CSS by enabling the Styles panel on the right. You can also inspect Layers (Absolutely positioned Divs) and HTML Node information. External resources can be inspected, like fonts, images, JavaScript and Stylesheet files. Clicking on these items on the left gives you a nice preview in the center panel.

Safari Dev Tools

Out of the box though, there are no responsive views. There is an extension called ResponsiveResize that you can download and install for Safari that will allow you to view common mobile and tablet sizes. You can also add your own custom sizes.

ResponsiveResize Safari Extension

Simply click on a size button and the browser will resize for that particular dimension.

Internet Explorer

There have been occasions where I had to view a page in IE because something wasn’t working right. “Does IE have developer tools?” I asked myself, and yes it does, though not as robust as the other’s mentioned here. Go to Tools > Developer Tools or F12 (In IE 8), and you’ll see an HTML inspector. The Style panel will show the styles of an element that you click on. There is no highlighting as you hover over elements, but if you click on the cursor icon at the top left of the panel, and move your mouse over the page, it will outline those elements.

Internet Explorer Dev Tools

At the top of this panel is a menu and under Tools, there’s a resize option. You can choose from some preset sizes and you can add your own custom sizes. This resizes the browser window. Although it’s not an elegant experience, at least there are some tools available. I haven’t explored these tools for IE9 or 10, so if you have and think they’re better, by all means, comment on this post and let us know.

Summary

Browser emulation is nothing like viewing your page on an actual device and this approach is not meant to be a replacement of that method. I, like many other people, don’t have a lot of time and resources to develop a device testing lab. With responsive design, one of the key things is to see how the pages flex and how elements on the page resize and shift as the scale is reduced or expanded. I like Firefox’s built-in Responsive Design View for this.

Hopefully, this will be helpful information for those getting started with RWD or anyone who’s doing web development in general. Next time, we’ll start getting into Responsive Typography and talk about the almight Em.

RWD – Viewports

Posted on: November 14th, 2014 by alemieux

This will be the start of a series on responsive web design (RWD), a topic of great importance nowadays, with lots of directions and advice. I’ll focus on the necessary aspects for those who are just getting started.

The Viewport

Typical Viewports

One of the first aspects that needs to be addressed when developing a site for mobile devices is the viewport width and scale. When viewing sites on an iPhone, for example, the default experience (if the site has not been developed with Responsive Web Design in mind) is a lot of pinching, zooming, and scrolling on the users part. Without the viewport width and scale being considered, the iPhone is rendering the page in a way that it can be viewed entirely, which will make all of the text incredibly small and unreadable.

The viewport on the iPhone (and other devices) is the area that determines how content is laid out and where text wraps on the webpage. Additionally, the viewport can be larger or smaller than the visible area1.

With the default viewport setting, the content will appear in the viewport without any scaling and not necessarily at the width of the viewport. In order to change that, we need to apply a Meta tag in the head section of our HTML document:

<meta name=“viewport” content=“width=device-width, initial-scale=1” />

There are actually a bunch of attributes other than what’s being shown here, but this code snippet has been widely adopted 2. The 2 attributes we’re most concerned with are width and scaling.

Viewport Width

You could set this up to be whatever width you want to target, but since we’re talking about responsive design, the best thing to do is set the width to the device width. This will tell the browser to show the webpage at its own device width3. The effect will be that the page will be readable and will not require so much pinching, zooming, and scrolling.

Viewport Scaling

Here’s an example of a site viewed on an iPhone without the viewport scale set:

Setting the initial-scale does 2 things:

  1. It sets the inital zoom factor of the page to the defined value, calculated relative to the ideal viewport. Thus it generates a visual viewport width.
  2. It sets the layout viewport width to the visual viewport width it just calculated.4

The initial scale attribute is a ratio of 1 and will scale the content to the edge of the viewport. When it is set to 1 the page isn’t zoomed in.

Site with No Viewport Set Site with Viewport
In this example, the Viewport Meta tag is not included in the code and therefore, iOS uses its default width and scaling In this example, the Viewport Meta tag is set. Notice the scaling and width of the site.

Now your page will render correctly within the viewport on mobile devices.

Next time, we’ll tackle HTML5 and how to make it work with older browsers.

  1. Safari Developer Library: Configuring the Viewport https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  2. Responsive Meta Tag: http://css-tricks.com/snippets/html/responsive-meta-tag/
  3. Understanding The Viewport Meta Tag: http://www.paulund.co.uk/understanding-the-viewport-meta-tag
  4. Meta viewport: http://www.quirksmode.org/mobile/metaviewport/