The first is by Jeremy Keith and discusses conditional loading of content for websites designed using Responsive Web Design techniques. The technique Jeremy describes allows you to have one web page for mobile devices and desktop browsers alike, show just the necessary content on the small form factor mobile web browsers, but show additional content for the larger sized browsers too loading that additional website content only when needed. This saves on bandwidth for people viewing your website using a mobile web browser allowing your site to load quickly and not cost them more time or data than necessary.
http://bit.ly/siNiYY

Two solutions to the RWD Image Problem. One challenge when designing using Responsive Web Design techniques is the issue of serving appropriately sized images for different devices. The basic RWD technique is to use the largest images required for any device in the HTML, and just change the scale at which the image is displayed to make it smaller for smaller devices. The problem with this basic approach is that it’s not very mobile-friendly. All devices would be downloading images with large file sizes. This is particularly an issue with mobile devices that are likely to have slower internet connections and caps on bandwidth. Your site will take longer to load than necessary and for users who are paying for every bit of data as they go, downloading all those large images can add up to a substantial penalty.

Techniques continue to be refined for downloading small images for mobile devices and the largest images only when appropriate. Here are two of the latest techniques available:

The first by Matt Wilcox is a server-side solution involving PHP, cookies, and Javascript on the client:
http://bit.ly/uEioLu

The second by Jake Archibald is a client-side only solution with fascinating benefits. But in the words of the author, it’s a dirty, dirty solution:
http://bit.ly/vJlbcy

Check them out and comment. Which method do you like better?

Here’s one solution: https://github.com/filamentgroup/Responsive-Images#readme

The technique explained and demonstrated enables “developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.” Pretty nifty.

The technique should work for Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), and Opera but results in larger bandwidth overhead in Firefox as well as IE 7 and earlier.

I’d like to hear if you give this a try, send me a link to your site or demo.

I’m cautiously optimistic about this approach. While is has limitations, it’s a good start on solving an important problem.

“A really nice example of responsive web design from an unexpected source.” – via http://adactio.com/links/tags/responsive

A photo gallery website using responsive web design techniques.

What I’m talking about is creating potential website layouts to show a prospect how their new website might look during the sales process. It’s not uncommon in our experience for a prospect to ask for this type of work, especially when they are talking to several web design agencies and making a decision about who choose as their new web designer.

We recently won some web design work where the client asked exactly for this. It was a competitive bid process, and we had been informed that we made the cut to the final three agencies. At this stage they asked if we could create a wireframe mockup or examples of what we envision the site would look like…

The Explanation

Here’s how we explained to them why we don’t do speculative design work:

We would be pleased to show you and your team sites we’ve designed in the past, as well as review other existing sites with elements that could be useful. I’m sorry to say that one thing we don’t do as a matter of policy is create speculative wireframes or rough layouts. There are quite a few reasons why we find this doesn’t work.

- Creating wireframes and design layouts for a business is precisely what our designers do, and they have an established process for creating fantastic work. To get those fantastic results, we need to go through the whole process. If we attempt to do something “quick”, it’s not going to be representative of what they would actually come up with after completing our process.

- If we were to spend the proper time to create initial layouts, well, that’s a large amount of the time you are hiring us to do. Doing that speculatively would be a large expense, and given that no agency wins every job they bid on, adding that labor to every estimate or bid would drive up the cost of every website we do. So by not doing speculative design or wireframes we are able to keep your costs lower.

We believe that our extensive portfolio of past work will provide evidence of our capabilities and give you the confidence that we can create a perfectly-fitting web site for your unique company. We are more than happy to demonstrate that during our upcoming meeting.

Strengths and Differentiators

We further shared that one of our key strengths is that our design team is capable of creating a wide variety of layouts, each appropriate to the company we are serving and specifically designed to meet the needs of their website visitors. Many designers are good at one type of layout, or creating variations of one general look and feel of a website. Our designers have a very wide range of design styles which is a key differentiator for us compared with our competitors. We shared examples across the range of our designs with the prospect, with the goal of giving them the confidence that we could create a design that would be perfect for their company and the constituents of their website.

This can be a scary approach to take, knowing that one or both of the other agencies competing for the job may very well create some speculative designs and “wow” the client. We stuck to our guns, and in the end, won the work.

More Resources

While I was crafting our response, I recalled listening to an article about this on the Boagworld podcast some time ago. Here’s an excellent blog post from their website that shares some additional reasons why speculative design work isn’t a good idea.

Even the browsers were getting easier. Webkit and Mozilla based browsers were the most standards-compliant we’ve ever seen. IE8? Not bad for a Microsoft browser. IE7 was a bit of a mess, but nothing like IE6 which finally fell below 10% usage. Mobile? To some extent there were so many different phone operating systems and phone browsers that many of us had given up bothering. Call it a head-in-the-sand approach. But it sure made things nice.

Then Apple sold 3 million iPads in 80 days.

#*@&!

Oh yeah, and the iPhone4 is out with a super high-res screen. And mobile seems to be consolidating. The big three (in no particular order) are Android running Chrome (webkit), iOS running Safari (webkit), and Blackberry running who-knows-what but people who care can download Opera which is right there with webkit when it comes to web standards. So guess what. Mobile matters. It matters a lot. And the mobile space is clearly not as fragmented as before.

All of this adds up to a big problem. People are viewing our web sites on all kinds of screen sizes. 1024 is no longer a magic number. Not when mobile growth is 8x that of desktop growth. The pace is so hot that it looks like mobile web access will eclipse desktop web access in just 3 to 5 years. So yeah mobile matters. And size matters. The number of screen sizes we should care about just jumped through the roof given the variations of phones, iPads, tablets-yet-to-come, netbooks, laptops, desktops and external monitors that are already out in the field.

So what’s a designer to do? How can we avoid being thrown back to the horrid days of browser-sniffing and coding completely different HTML layouts for different browsers and devices?

The answer is blowing in the wind, and it’s called Responsive Design.

The core principles of Responsive Design for the web are using a flexible grid, sizing design elements as proportions (%) rather than pixels, and using CSS3 media queries to make your design responsive to the size of the viewport or device.

Wait wait wait you say: this sounds a lot like fluid layouts which have been around forever. Sort of, but in the words of Jeffrey Zeldman “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.”

The lynchpin in this technique that doesn’t suck is the use of media queries, a CSS3 feature, that allows you to change how elements are displayed based on the size of the viewport. This even works dynamically while you are dragging the corner of your web browser around. This lets you create a design that morphs into a one column layout for small viewport or device sizes, and a three column layout for large viewports, but not TOO wide if you are on a 1920px wide browser. Yep, you can even keep line lengths readable.

But CSS3 isn’t supported by IE8. Or IE7. Or IE6. No problem. Turns out there a Javascript workaround that enables IE5+ (yes, that’s right, IE5+) to interpret media queries. http://code.google.com/p/css3-mediaqueries-js/ Now we’re talking!

Media queries are supported in the latest versions of all the other browsers that matter including: Opera 9.5+, Firefox 3.5+, Safari 3+, Chrome and Mobile Webkit.

And to sweeten the deal, the Javascript workaround mentioned above also allows Firefox 1+ and Safari 2 to use media queries

Ready to learn more? Start with the definitive article by Ethan Marcotte:
http://www.alistapart.com/articles/responsive-web-design/

Follow up here, which includes links to some related articles, shares the history of the very recent evolution of the technique, and includes links to several sites already using the technique:
http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/

I’ll be demonstrating the techniques at the upcoming Fort Collins Internet Pros Meetup on Thursday, August 12. Learn more and RSVP here:
http://www.meetup.com/goFCIP/calendar/12297128/

The first article this year is “Working with RGBA Color” by Drew McLellan.

Key points:

• This is one technique for setting the opacity/transparency of HTML elements
• The CSS opacity property is available starting with CSS3
• opacity adjusts opacity for all parts of the selector (HTML element), so if opacity is set to 0.5 for a heading element, the opacity of both the text color and background color are 50%.
• Using RGBA color specification allows finer control. The “A” part = “alpha channel”, which controls opacity, and can be applied to each color declaration as opposed to the entire selector. RGBA allows you to specify different opacity values for the text color vs. the background color.

Quick CSS terminology review, CSS syntax:
Selector {declaration1; declaration2;}
declaration = property:value;

example:

h1 { color: #000000;}
selector = “h1″
declaration = “color:#000000;”
property=”color:”
value=”#00000;”

Back to Working with RGBA color:

• To specify RGBA, use rgba(0-255, 0-255, 0-255, 0-1) as the value in your CSS declaration instead of hex codes, see the article for examples
• RGBA is supported by the latest versions of Firefox, Safari, Chrome and Opera, but is not supported by IE (of course)
• See article for ways to specify fallback colors or PNGs when RGBA is not supported (important)
• Opacity/RGBA can be changed on :hover or manipulated with JavaScript for elegant rollover effects
  
• RGBA can be applied to text color, background color, and border color

An Event Apart Boston 2009 “the design conference for people who make web sites” just wrapped up today, and that was a strong message from no less than four of the fifteen presenters. In the past there has been a tacit assumption in the web design community that web sites should look the same, pixel for pixel, in the web browsers used by the majority of web site visitors. That would currently include Internet Explorer 8 (IE8), IE7, IE6, Firefox, Google Chrome, and Safari. One of those six browsers are used by approximately 97% of web site users according to the W3 Schools browser statistics page as of May 2009.

The new trend is a more realistic approach to web site design and development issues. “Different does not mean broken” said Andy Clarke, one of numerous presenters at the conference making the point that it is okay for web sites to not look identical in different web browsers.

What matters is that the content and functionality of a web site be made available to the largest number of web site visitors possible. If a button has rounded corners in Firefox but not in IE6, it’s not a big deal.

This approach allows web developers to start using some of the new features available in CSS3 right away, including creating rounded corners and drop shadows on both text and containers. Implementing these style elements in CSS saves time in the development process when initially creating a web site, and over time when maintaining it. The problem is that CSS3 features are not supported by IE7 and earlier. Many CSS3 features are supported by IE8, Firefox 3.5 and above, and Safari 3 and above. So going forward, support for these features will continue to improve.

Web site owners will be interested to know that implementing these features, like rounded corners, using CSS3 saves them money both in the short term (during development) and in the long term (considering web site maintenance). Design elements like rounded corners can be made to work in older browsers that don’t support CSS3, but that requires the designer to create separate special background images for each of the four corners of the box, and requires the coder to use extra HTML markup to apply those images. These images mask the “natural” square corners of the box giving them a rounded appearance.

While this looks great in more browsers, there are many downsides. In addition to taking more labor to create the effect in the first place, if changes need to be made to the corners in the future it takes more time than changing a few digits in a style sheet. There is also a slight performance hit to the web server, as more graphics have to be downloaded to the user’s computer in addition to a slightly more complex and therefore larger HTML file.

I am very much in favor of the new direction. What it does is focus our attention on what matters more as web site owners and web site designers: the content of the web site and the functionality of the web site. That is what we should be striving to deliver effectively to our web site visitors. Using the new techniques, if web site visitors are also using modern software, they will be rewarded with an enhanced appearance to the page.

Perhaps you have done your research, and know very specifically what you are looking to have created.  Perhaps, you are looking to become educated through the process of web development.  Or perhaps, you have no idea how to even get your project started.  Whatever perspective you are coming from, CodeGeek has had experience with a vast array of clientèle.

Our clients are as unique as snowflakes and daisies…no two are alike.  Each CodeGeek client comes to us with their own individual set of website needs that has to ultimately be crafted into a website.  Because each business is diverse, and the presentation of that business must be distinctive, the final look of each CodeGeek project is, therefore, unique.

When looking through our portfolio, you will see a wide array of designs, content, layout, and presentation.  Perhaps you have viewed our portfolio and think that we don’t offer what it is you’re looking to have created.
Each project accurately reflects what our clients have asked for and needed in a website.  And we deliver exactly what our clients want.

Here are just some of the various sites that CodeGeek has been a proud participant in creating…
www.designingbeautyacademy.com
www.dlssystems.com
www.scandinaviahouse.org
www.lpfadvisor.com
www.mwlogfurniturecolorado.com
www.glenivy.org
www.secondwindconsulting.net

Whatever type of site you are aspiring to have developed, CodeGeek can help. Contact us today.

We previously explored e-commerce website development. This month we will look at important considerations for informational websites.

A great informational website is the difference between a web surfer becoming your customer or going to your competitor’s site.

“Conversions” are an important metric for informational websites, just as they are for ecommerce websites. For an ecommerce site a conversion is more obvious – a conversion occurs every time a visitor makes a purchase. In the case of an informational website, a conversion means the visitor has been persuaded to do what you want them to do. It could be having them read your Blog, be educated by your opinion (through an advocacy or political site), join your on-line community, or subscribe to your newsletter. What does a “conversion” mean for your web site? It should reflect your website’s business objectives.

Informational sites can be broken down into a few main categories:

1. Content sites: These are sites whose business is the creation and distribution of content. Generally speaking, the main objective of a content site is to increase the public’s awareness of or interest in your business and/or website, sell subscription services, or increase the number of readers.
2. Self-service sites: These are sites that allow people to easily and independently serve themselves. Examples include blogs, research sites (such as Wikipedia), on line media sites, or advocacy sites.
3. Directories: A company can register itself with a directory that is appropriate to its line of business in order to gain qualified leads.
4. Other informational sites can include entertainment, forums, community building sites, photo sharing sites, and more.

Informational sites exist to inform users. When developing a great informational site, it is important to focus on the conversion factor, specifically keep in mind what the visitor (prospective customer) is wanting, and to fulfill that want/need. Becoming clear on what type of informational site you’re building will help you develop the proper elements to create conversions.