Week 11: Responsive Web Design

Something awesome happened at work last week.

During our team meeting our manager said that we would move forward with using some of the new features in HTML5 and CSS3 even though not everything is supported in every browser. We're not just letting go of pixel-perfect similarity between browsers, we're not worried about having the exact same visual effects and features. Instead of designing everything for the least capable browser the templates will be designed based on what's possible in modern browsers. Furthermore, the sites will be designed for multiple devices.

It's the most exciting thing since we dropped support for Internet Explorer 6 and I'm not even a designer.

So it seemed like rather good timing that J. Cornelius (VP of Operations at Coffee Cup and President of the Atlanta Web Design Group) came to speak to our class that same week and touched on the same thing.

Why is this good?

• Less time spent tweaking
• Deliver the best possible design regardless of browser
• Deliver design meant for mobile
• Things that are used are kept and improved
• More pressure on browsers to adopt standards

I won't dwell on the first item since I've already ranted about it in a previous post. But the point made by John Allsopp earlier and reiterated by Cornelius last week applies to the second item as well: most people only use one browser. The person using IE7 doesn't care that the person using Opera or Firefox gets rounded corners and a different font. However, the people using Opera and Firefox will like how nice sites look that make full use of the standards those browsers support. There's really no reason those users should get less than what's possible.

But let's say for a second that a lot of people do use multiple browsers. If they have a browser the site looks better in wouldn't they just use that one rather than complain that the other browser doesn't show all the same stuff?

A lot of people already design for mobile but sometimes what happens is that a separate version of the site is built for mobile devices. Using CSS to make the existing site adjust for different devices will make maintenance much easier.

Another point is that it is important to use the new standards in order to keep them around. The W3C abandons things that aren't implemented by the browsers and the browser companies won't implement things unless there is pressure to do so. We can't wait for every browser in existence to support something to use it because that will never happen. While we're waiting for more support, W3C and the browser companies see little to no interest and the existing support gets dropped.

The major browser companies are using the W3C standards and the modern versions of their browsers have some level of support for HTML5 and CSS3. Since the browser wars are no longer about whose interpretation of the standards is correct the browsers have to compete based on who delivers the best experience. If a lot of sites start using something that's only supported by Mozilla that pressures the other browser companies to implement it as well.

Example Sites

Amped - Amped is the hack day that wrapped up Web Week in Atlanta. Currently, if you look at it in Firefox (3.6.4) you get the gradient background with the circular stripes. You don't see the stripes in Opera (10.63) but you do still see the effects with the font and text. In IE9 (9.0 beta) you lose the background stripes and font/text effects (but still looks cooler than how it does in IE6).

Robot or Not - This is the site our manager showed us right after coming back from An Event Apart (the conference put on by A List Apart). Designed by Ethan Marcotte, it is an excellent example of a site that adjusts to different browser window sizes.

More Information

A List Apart: Responsive Web Design

The Big Web Show: Episode #9

Responsive Web Design presentation on SlideShare

Week 3: Web Standards

It is very important to have standards. We have standards of weights and measures. There's agreement on how long a foot is and how much a pound weights. There are industry standards. You don't have to worry about electronic devices only working with one kind of wall outlet (at least not until you go overseas). There's even standards for the weight of yarn.

So why not use standards for the web?

There are already plenty of articles explaining why web standards are good and necessary. The main reasons are:

Maintenance and Production: It is easier and faster, and therefore cheaper, to create a web site that uses standards than to create a site specifically for one browser using proprietary code (or worse, a different site for each browser).

Accessibility: You can make your site more accessible by coding to standards. This is usually stated in reference to disabled users but will also help those hampered by older technology or slow/limited Internet access.

Search Engine Optimization: Other things being equal, a site with valid code is ranked higher by Google than a site with invalid code.

Professionalism and Quality: If you're a web developer writing standard code shows that you know what you're doing. You want to be seen as someone who is current on industry standards, technologies, and best practices. If you own the site then you don't want your site to flat out break in other modern browsers even if it isn't the one most of your target audience.

There are more of course: page weight, re-usability of the code, etc. but these are the reasons I see given the most often. They're also the reasons that both the developer and site owner will care about.

So are there any arguments against using web standards? I didn't really find any articles railing against standards but here are two reasons I've heard not to bother with them.

Tables are easier than using CSS
If browsers would support the multi-column layout module I would just say that this statement is false and move on. But since this is not the case then it may be true in production depending on your comfort level with CSS. But once the site is in maintenance you're in trouble and here's why: the client can't see the table, they only see space.

I can GUARANTEE that eventually the client is going to ask for content to be added someplace that is going to break the template because there is space there. They can't see that putting a wider banner in that cell is going to throw off the spacing for the entire table. They can't see that the change they're requesting is going to require adjusting all of the colspans and rowspans in the table. They only know that they are being quoted/charged an awful lot of money for what looks like a very simple change.

The site has to look exactly the same in every browser so it's OK to make the developer write hacky code.
No.

No, no, no, no, no.

No.

And also no.

I'm going to quote/paraphrase John Allsopp here and say that a site does not have to look exactly the same in multiple browsers because most people don't use different browsers on a regular basis. At worst, for the average non-web designing user, they might be using IE6 at work because they have to and a different browser when they use a mobile device. But no one expects sites to look exactly the same on a mobile device as they do on a computer and since IE6 is not a modern browser there can't be a reasonable expectation for things to even work in it, much less look the same as they would in IE8 or FF 3.x.

Yes, I did say earlier that you don't want your site completely broken browsers other than the one used by the majority of your users but there's a difference between the template being broken and something being 5 pixels farther to the left in IE than it is in FF.

Side Note:
OK, how ridiculous is this? Apple has an HTML5 showcase but blocks you if you try to view the demos in anything other than Safari. *facepalm*
Found via an article in InfoQ.

Week 11: Dime Sized Design

A list of resources for designing sites for the iPhone/iPod Touch

General iPhone Web page best practices
Building web sites for the iPhone with Freeway - Although the paper is geared toward explaining how to use a specific product to create web sites for the iPhone the list of recommendations for optimizing the site come from Apple. The information is useful even if you don't intend to use Freeway.
iPhone Microsites: Tutorials


Working with the viewport
Configuring the Viewport - This page is from Apple's Safari Dev Center. I honestly couldn't find another site that had a comparable amount of information.


CSS for good iPhone Web pages
Building iPhone Apps with HTML, CSS, and JavaScript - Here's something really interesting: this is an O'Reilly book that's under construction. They're posting it online as they write it so they can get feedback. The link goes straight to Chapter 2
Basics & Tips on Designing for the iPhone - A 30 minute video from css-tricks.com


The WebKit and using it's features for iPhone Web apps
Make the most of the iPhone SDK
To WebKit or not to WebKit within your iPhone app? - not a 'how to' but I thought the pro/con info was interesting

the iUI
Writing an iPhone page in minutes using IUI
iUI 0.13 - An Overview
iUI Introduction Wiki Page - I like how the home page says to go to the Introduction and the first thing in the introduction says is "See the home page". There are links for more info here.

Layouts
Liquid Multi-column CSS layouts - Several layouts with 2, 3, or more columns that are compatible with the iPhone.

For inspiration
20+ Websites Optimized For The iPhone
Web Design Inspiration for the iPhone

Week 10: Insert Joke About Tubes Here

I was looking at my subscriptions in Google Reader and spotted this from Line25: 40 Amazing Female Role Models for Web Designers. I thought it was pretty cool so I'm sharing. Line25 also posts, among other things, 'Sites of the Week' if you just want to look at pretty designs.

---

Network Neutrality

I'm sure by now most people have heard that the FCC is drafting rules on network neutrality. (What's up with all the links to Word docs? Not everyone owns a copy of Microsoft Word. PDFs people! Adobe Acrobat Reader is free!)

The list of what the current proposal would require of Internet Service Providers seems reasonable, to me anyway. As long as everything is legal an ISP can't prevent anyone from sending or receiving data, using services or applications, or connecting to other networks. Nor treat it said items in a discriminatory manner. They can't block anyone from the competition and they'd have to make some of the information regarding their network management public.

I know companies like to keep how they do things secret but that's what they get for having invisible bandwidth caps.

The current Wikipedia article on network neutrality is written as a debate instead of an encyclopedic article. Bad for Wikipedia and not exactly neutral either but still interesting reading. I looked at a couple of the web sites cited by the article and was struck by this:

That scenario [a bifurcated world in which the wealthy enjoy first-class Internet access, while everyone else is left with slow connections and degraded content], however, is a false paradigm. Such an all-or-nothing world doesn't exist today, nor will it exist in the future. Without additional regulation, service providers are likely to continue doing what they are doing. They will continue to offer a variety of broadband service plans at a variety of price points to suit every type of consumer.

This is laughable at best and at worst an incredible insult to the intelligence of anyone reading it. I'm supposed to believe that an ISP would never charge users more for accessing sites like Google and Hulu or degrade services like Skype that compete directly with their own offerings just because it hasn't happened yet? ISPs already want companies like Google to pay them to keep access to their site fast. Why should I believe that they won't also charge customers more for other people's content or that only the sites that can pay the most will be easy for me to get to?

I think the problem is that all the major ISPs are either cable or satellite providers or telecommunications companies. Comcast, Charter, AT&T, Verizon, etc. are all used to getting paid at both ends. Both parties have to pay for phone service to make or receive calls. The customer pays for cable or satellite TV and the networks pay money to have their channels carried by the providers.

OK, I've strayed away from 'something I've learned' to 'here's some opinions I already had'. But I did find out from the Wikipedia article that it isn't just ISPs who are against the legislation. While Tim Berners Lee supports network neutrality Robert Kahn does not. That surprised me. People like Bob Kahn believe that they should be able to develop and use technology that does treat different types of data differently and that it will be necessary to improving the Internet. There's a link to an article and a link to a video as sources for that. The article from the Register, unfortunately, doesn't say much about why network neutrality is bad just that it is.

Saying this will prove my professor right in having us do these blog posts, but why doesn't Robert Kahn have a blog?

If anyone knows of any sites with detailed arguments from Robert Kahn or any engineer about why net neutrality is bad feel free to put them in the comments.

Weeks 7 & 8: Midterm Assignment

Midterm Paper for MIST: 7500 - Web Analytics and Design for Personal Blogs