So you’ve inherited an email template from another source or you created one a year ago and changed the copy and images, but didn’t address the styles. Sound familiar? Email Comb, an online email tool, will examine unused styles in your HTML email input and strip them out. No reason to deliver bloated code, right?
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.
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:
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.
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.
Here’s an example of a site viewed on an iPhone without the viewport scale set:
Setting the initial-scale does 2 things:
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.
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.
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.
I’ve used a number of HTML editors in the past. When I was forced to use a PC (gag), I was told that I had to use Notepad to code my pages. I quickly convinced them to get me a copy of Homesite, which was a Macromedia product scooped up by Adobe and never supported again after version 5.5. It was an awesome editor that was extensible and had a great Find/Replace feature. Of course, homesite and most of its features wound up integrated into Dreamweaver, with code completion, code hinting and Find/Replace all built in.
BBEdit (Bare Bones Software), was my mainstay for a while. The nice thing about BBEdit is it’s a lightweight text editor that doesn’t get in the way of your workflow. Like Dreamweaver, it has a Preview in Browser feature and lots of tools to help you build your code.
Lately, I’ve been hooked on another HTML editor called Sublime Text.
When working with longer files, like CSS files, there’s a minimap on the right side of the work screen that allows you to quickly navigate through the file by clicking on different areas of the minimap (similar to Photoshops navigator panel). You can also work in multiple layouts. Choose a Layout from the View menu and you can have 2, 3, or 4 files open at once and work on them at the same time. If your like me and are quickly distracted by what’s going on in your web browser or email program, you can enter Distraction Free mode or Full Screen mode so that Sublime Text takes up the whole screen.
You can configure Sublime Text any way you want. The Preferences allow for different Color Schemes and font sizes. I’m leaning towards the Zenburnesque color scheme, which is easy on the eyes. Oddly, Dreamweaver doesn’t have these types of options. I was surprised.
I’ve been using Sublime Text for a few weeks now and I have to say I am very impressed. At first, it took a while to get comfortable with the way the program worked, but it wasn’t hard to adapt. I wish that it did have a preview in browser feature. I know it’s easy enough to switch back and forth from the editor to the browser, but it’s a nice feature. I also think it’s a little short on help. I wish there was a built in help feature with search capability. Right now, search is relegated to their website.
At $59, the price for this editor isn’t too steep and given what it offers, I’d say that’s the right price. So, if you’re tired of Notepad or even Notepad++, give this editor a try. I think it’s fantastic.
Al Lemieux is a web designer/developer in the Boston area. If he’s not coding, he’s playing volleyball or skiing.