-
Understanding Your Mobile Audience
Jonathan Hungate
Jonathan is responsible for developing new business relationships and leading the launch of select client projects. He has more than 6 years of marketing and communications experience and has managed a wide variety of successful web projects.
As mobile web usage continues to grow rapidly, it’s important to make sure that your site is optimized for mobile devices and the people using them. This involves understanding your audience and what they want from your site while on-the-go.
Examples include:
- The ability to quickly check your balance on a banking website
- The power to check-in to your flight through an airline site
- Finding the daily specials from a local restaurant site when deciding where to eat
In each of these examples, a wise business must prioritize what content is especially relevant to a mobile user and then present that information or functionality in a simple, convenient and accessible way.
Let’s look at 2 specific examples on both ends of the spectrum:
Toyota: A virtual salesperson at your fingertips
Toyota has a great example of a mobile site. The content is highly-optimized, interactive and genuinely helpful. I can see specs, pricing, colors and more—it’s like having a virtual salesperson with me as I walk around the lot—minus the sometimes over-bearing pressure to upgrade my warranty.
Bojangles: A missed opportunity
When you’re out on the road and a “gotta-wanna-needa-hava” moment hits, bojangles.com is of little help. Instead of an optimized site with a store finder or even an 800 number, you’ll only find paragraphs of text outlining the history of the company and descriptions of the delicious food that they’re not helping you find.
Conclusion
Don’t miss your opportunity to reach mobile web users. These are often point-of-purchase interactions that can lead directly to sales, a better customer experience, or both. As we did when designing the mobile version of our own site, seek to understand your mobile audience and then optimize your site for them. And if you need a hand, let me know. We can help!
__________
Related posts:
-
HiFi Website Featured on Design Shack
Clay Schossow
Clay Schossow leads New Media Campaigns' project management and business development efforts. A graduate of UNC Chapel Hill, he has guided more than 200 websites from concept to launch. He is a frequent writer on Internet marketing and online campaigning. You should follow him on Twitter.
We're very excited to announce that our new Content Management System, HiFi, has been featured on one of the most popular web design galleries, Design Shack. The gallery boasts over 10,000 RSS subscribers and carries a lot of influence in the web design community. Currently, HiFi is holding down a solid 8.5 rating based on visitor votes -- we encourage you to also go vote for the design.
The Design Shack post says the site is featured for its bright colors, oversized deisng elements, repeated use of small tirangles, and the navigation buttons.
While it's an honor for any of our projects to be featured on galleries, this one is particularly sweet for a couple reasons. First, it's our own product getting recognized, which is a really nice bonus. Second, HiFi is positioned as a CMS for designers and developers -- the specific audience that closely follows Design Shack. When we originally designed the site, we had a goal of getting featured on design galleries, as we knew that would drive targeted and relevant traffic to the product.
The strategy seems to have paid off, as HiFi had 4x the typical daily newsletter signups yesterday when we were first featured. In addition to sheer volume, these registrations are likely more targeted than a typical day's. Designers found us through the gallery, browsed the site, liked what they saw, and converted to our newsletter for updates and announcements.
Thanks for all of your votes and support!
-
How to optimize an image for your website
Alex Pomer
Alex Pomer is a project manager and online media buyer at New Media Campaigns. He received a degree in Advertising from The School of Journalism and Mass Communication at UNC Chapel Hill. He has successfully launched sites for statewide political campaigns, national organizations and non-profits. Follow him on Twitter.
No one likes waiting for a webpage to load. It's frustraing and almost as if the site's host is asking for you to take your attention elsewhere. Both Google and Amazon have established through testing that higher webpage load times lead to lower traffic and conversions. When Google Maps reduced the size of their homepage, traffic increased 10%. Amazon's tests showed that for every 100 millisecond increase in load time, sales decreased by 1 percent.
Prioritizing image formatting is one of the easiest ways to speed up your site's load time. Unfortunately, many people gloss over their image formatting and navigating their website takes much longer as a result.
Here's an example of two images, one that has been optimized and one that hasn't, in case you don't believe me.
Last month, Google began accounting for the annoyance of waiting for pages to load by incorporating site speed into their search rankings, giving web hosts tangible incentive to start paying more attention to page load times. Since image formatting contributes so much to a page's load time, here's a quick breakdown on how to optimize the images on your website without purchasing any photo-editing software.
How big should your image's file size be?
An image's file size can vary greatly and it is the biggest determining factor in how fast an image will load to a webpage. High-tech cameras take extremely detailed pictures, resulting in huge file sizes, some are even several megabytes. Ideally though, an image that's uploaded to your webpage will be under:
- 100kb for a large image
- 50kb for a medium image
- 30kb for a small image
Here's a free online tool that allows you to sacrifice a little image quality in exchange for a reasonable file size and quick load times.
What file extension should you use for your images?
The three file extensions you should consider for your website's images are .jpg,.png and .gif
- .jpg - Use for images with more color like photos and images with gradients.
JPEG images are made up of millions of different colors but can be used at a lower quality to greatly decrease the file size. Typically JPEGs can be compressed 10:1 without much perceived loss in image quality.
- .png - Use for images with less color like charts and graphs or images with large areas of the same color, especially those requiring semi-transparency.
PNG images were created as a free substitute for the GIF format because GIF images are patented and require developers to pay a license fee. In fact, PNG actually stands for "PNG's Not GIF." PNG images are superior to GIFs in many ways including:
- Typically PNGs can be compressed further than GIFs
- PNGs are capable of varying levels of transparency
- PNGs can have a wider range of color depths
- .gif - Use for images with less color like charts and graphs or images with large areas of the same color.
GIF images are limited to 256 different colors but because image programs have the ability to control the number of colors that are in each image, charts and graphs with few color varieties can be stored at very small file sizes in the GIF format. GIF and PNG images are similar but GIFs are superior in the following ways:- GIFs can suport animated images
- While PNG images are widely supported, they aren't well supported in Internet Explorer 6.0 and some HTML email clients.
To convert your image to either a .jpg, .png or .gif file extension, you can this free online image converter tool.
What is the image title and image alt text?
The image title and alt text are used to describe the image you're placing both to viewers and to search engines.
Image Title - The image title, as the name might suggest, is a short title of the image you're placing on the webpage. It's also what shows up in that yellow box when you mouse over an image in many browsers (mouse over the image to the right for an example).- Image Alt Text - The alt text for an image is alternative text to describe an image in detail for search engines. An image's alt text will also display instead of the the image for people who have images disabled in their browser. Instead of seeing an empty image icon, the viewer will get a description of the image, which could inspire that person to enable images and see what you're trying to show them.
You can add an image title and image alt text in the HTML of a web page but many Content Management Systems, like ours, allow you to easily add them when you're inserting the image.
If you've got any good practices for optimizing an image for the web, feel free to let us know in the comments.
-
Big Relaunch of the GetHiFi.com Site
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
For some time now we've been working on our new Web Marketing platform, HiFi. We first launched a marketing site for it back in September. At that point it was just a simple landing page with a cool rainbow header.
This time around, we worked with a local designer, Lenny Terenzi to get a really killer design. We just re-launched GetHiFi.com on the design last week. Today, we put up a 38-slide slideshow that documented the process of taking Lenny's complex design and turning it into a website. We thought it would be interesting to followers of this blog since it covers HTML5, CSS Sprites and a bit of jQuery. So if that is something you're interested in, head over to the post to read more about it:
Building a Complex, High-Performance Site with HTML5, CSS, and jQuery
-
Good Web Design Remains Important in B2B Online Marketing
Clay Schossow
Clay Schossow leads New Media Campaigns' project management and business development efforts. A graduate of UNC Chapel Hill, he has guided more than 200 websites from concept to launch. He is a frequent writer on Internet marketing and online campaigning. You should follow him on Twitter.
A recent survey of B2B customers by RainToday had some interesting findings about the importance of different elements in a B2B marketer's online presence. The chart above, posted by HubSpot, outlines the top 10 important factors. The new study gives credence to philosophies that web designers and marketers have been espousing to B2B firms for years.
For example, when B2B marketers approach us about our services, we frequently hear “our customers don’t care about design – they come here for facts and to find our phone number.” It’s a statement that I’ve repeatedly heard over the years. Even if they don't explicitly state it, it's implicitly evident in the way they treat the design process or creative costs.
While I'm the first to admit that content is an essential, and likely the most important, aspect of a company's web presence, it's also critical to understand the importance of design. In fact, design is inherently relevant for the rest of the surveyed website elements, as it is the design that will highlight things like white papers, presentations, case studies, etc. Without a well-thought-out layout and attractive design, these other important features will be hidden or cumbersome to the user.
A couple of our B2B clients that have really taken this study to heart are Health Decisions and CloudSwitch. Both of these companies have similar targets of highly technical and sophisticated executives. They not only do a wonderful job of creating voluminous content in different formats, they both also placed a high priority on design, making sure their site resisted the template look of many B2B sites.
From our initial discussions, both clients were clear that they wanted their web design to be a distinguisher from their competitors, and that they wanted to make their content and calls to action available in an attractive and informed manner. The strategy has worked. Both companies frequently receive compliments on their sites and online marketing efforts, confirming that prospects are noticing.
As B2B marketers prepare to embark on a redesign, they will be well served to not only create good content and use inbound marketing, but to also place a priority on good design and informed layout. Are you a B2B marketer that has placed an emphasis on design as well as content? What has the result been? Look forward to hearing other opinions and cases.
-
The Complexity of Simplicity
Kris Jordan
Kris Jordan leads web programming & development at New Media Campaigns; Kris previously worked for Microsoft's Developer Division, and studied Computer Science at Brown University and UNC Chapel Hill. You should follow Kris on Twitter.
'Simplicity' is often the protagonist in product design lore. Perhaps too often. Simplicity is deceptive. Simplicity isn't always the good guy, and many of its best showings aren't simple at all.
Take Google, for example. Its user interface is undeniably simple. In a recent experiment it is as simple as a logo and a text box. No submit button. No links. No "I'm feeling lucky". No advertisements. The web's most popular application has the simplest design.
Very little about Google though, outside of user interface design, is simple. Google is the web's most complex application. Feel the dissonance? The most complex web app has the simplest interface. This is a key trait of 'good simplicity': leverage.
Leverage is simple with a purpose. Leverage as in mechanical advantage, not Lehman Brothers. The ability to do more with less, not less with less. Simple not as in simple stupid, but as in simple machine. Good simplicity moves the fulcrum closer to the load. Bad simplicity removes the fulcrum all together.
Good simplicity restricts user input to multiply its value. On one end of the Google machine you type in words, on the other end of the Google machine you get a list of the web pages most relevant to those terms *from across the entire internet*. On one end of the Twitter machine you type 140 characters, on the other end everyone on the internet who cares about what you're saying receives it. On one end of the iPhone machine you stretch your fingers out, on the other end a map of the entire world zooms in.
The iPhone is another icon of simple design. Its face has one physical button. One button. This beautiful simplicity is achieved through patentable complexity: a multitouch screen. When the iPhone was introduced it was both the world's simplest smart phone and its most technologically complex. The 'simple' capacitive touch screen leads us to another key trait of 'good simplicity': complexity disguised.The face of an iPhone really has 153,601 "buttons". Only one of them can be pressed reliably: the one that isn't on the screen. The other 153,600 are points on the screen so small that when a single finger touches it tens to hundreds of them are pressed at once. Specialized hardware and algorithms then turn this large amount of noisy input into the single point on the screen your finger was aiming for. Somehow it works and the result of this complexity is an interface that feels natural and familiar. It feels simple.
Good simplicity disguises necessary complexity. Bad simplicity labels all complexity as unnecessary and throws it out the door. Google could have chosen not to accept misspelled words, they could have created a separate app for solving mathematical expressions, multilingual searches, etc. These are all complex problems Google solved not by avoiding them, but by disguising complexity to make us believe it's just as simple as every other search.
Simple can be a siren just as easily as it can be a signal. Good simplicity is less with leverage, not less with less. Good simplicity is complexity disguised, not complexity denied. Don't give in to stupidity when creating simplicity.
-
Designing for the mobile web
Josh Lockhart
Josh Lockhart is a project manager, designer, and front-end developer at New Media Campaigns. A graduate of UNC Chapel Hill, Josh encourages web standards, semantic markup, and simple design. Josh writes about web development and creates RapidWeaver themes on his personal website. Follow Josh on Twitter.
Devices and Platforms
New Media Campaigns recently launched a mobile version of its website. When I was first approached with this project, Joel Sutherland and I debated how we should develop the mobile website. Should we develop a mobile website only for Apple, Inc.'s iPhone? Or should we develop a mobile website for as many mobile devices as possible?The mobile web has surged in popularity lately with help from the iPhone. The iPhone has been a tremendous success, and it has propelled web standards into the main stream thanks to its adoption of the Webkit platform. Other recent smart phones and mobile devices have also adopted the Webkit platform, such as Verizon's Droid and Palm's Pre.
Joel and I decided to target the Webkit platform rather than a single device. The Webkit platform provides a nice breadth of device coverage and a surplus of advanced web development features, such as web standards and CSS3 support. As a result, we were able to leverage advanced CSS properties such as
border-radius,text-shadow, and more. Of course, these properties will degrade gracefully in less-advanced web platforms. In an earlier blog post, Joel describes how we targeted specific devices that support the Webkit platform.Simplify, simplify, simplify
A smart phone is small compared to a desktop web browser. The Apple iPhone and Palm Pre provide a 320x480 screen. The Verizon Droid provides a slightly larger screen. With such little space, it is imperative to provide a good user experience with a simple and easy to use interface that provides only the most important information.
While designing our mobile website, I filtered our primary website into four distinct categories: Home, Work, Blog, and Contact. These categories were translated into tabs, a global layout element that resides at the top of every page on our mobile website. Tabs are an immediately identifiable and easy to use form of website navigation.
The "Home" tab provides a brief description of New Media Campaigns, with links to recent blog posts and an about page. There is also a link that will initiate a phone call and a link that will initiate an email.
The "Blog" tab provides the best example of simplification. Unlike our primary website, we do not use categories or tags on the mobile website. Instead, we provide a single paginated stream of blog posts. The listing view provides the title, excerpt, and number of comments for each blog post. Viewing an individual blog post also allows the mobile website visitor to read existing comments or leave a new comment. Ultimately, our mobile website provides a simple, usable, informative blog that provides exactly what is needed and nothing that is not.
The "Contact" tab provides only what is necessary to contact our web design agency: a simple HTML form and a link to initiate a phone call.
Our mobile website is simple and easy to use. It provides the most important information in an accessible format. This is perfect for mobile website visitors who are usually on the go, in a hurry, and need important information fast.
Device agnostic, platform centric
In my opinion, the future of mobile web-enabled devices is Webkit. Webkit provides a stable, standards-compliant, and forward-thinking platform that is being adopted by the most popular mobile devices, including Apple Inc.'s iPhone, Verizon's Droid, and Palm's Pre. RIM recently posted a job listing for a Webkit developer... perhaps a future Blackberry will also support the Webkit platform.
Our mobile website works in any Webkit-enabled mobile device, in portrait or landscape orientation. If an end-user visits our website in another device, the same information will still be accessible; we used simple, clean, standards-compliant XHTML markup to structure our mobile website. This ensures the information will still be readily accessible to any device that can adequately parse HTML.
-
Check First Impressions with Five Second Test
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
With websites, first impressions count big time. According to Nielson, visitors spend less than 25 seconds on a page and read less than 20% of the content. One in five visitors will leave a site in the first five seconds. It is extremely important to know how your site performs on quick scans to make sure that you're making the right impression.
Enter FiveSecondTest.comFiveSecondTest.com is a new site that allows you to quickly run a mini-test on a screenshot of your site. You upload an image and it gives you a URL to send people to. You can try a test on our site at:
http://fivesecondtest.com/test/xWVM6787
Once someone visits the link they get instructions and then five seconds to look at the image. They are then asked to list everything they remember.
We ran this test on our site's homepage and solicited responses on twitter. The results were about what we expected, but there were a few surprises.
Our Results
We had 30 responses, each listing some things that were remembered. We looked at everything and categorized them into classes of responses so that we could get an overall picture of the results. For example, any reference to "New Media Campaigns" or the Logo was combined into "NMC / NMC Logo". The results are charted below:
These results clearly follow the F-Shaped Pattern that eye tracking has shown visitors use when looking at a site.
It is also a huge reminder that visual details are much more obvious than textual ones. On our homepage, "Your Web Team" is the most highlighted text, but it was remembered by far fewer than those that noticed our branding and colors.
Conclusion
Five Second Test is a great tool to get first impressions about a design. It can't replace full usability testing, but for projects on a tight budget it is a great tool. Be sure to share any tests you're trying to run in the comments.
-
Why Less is Better than More
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
Less is a good thing.
Users read 20% of the text on a page.
Users generally spend less than 25 seconds on a page.
(http://www.useit.com/alertbox/percent-text-read.html)Less means you can pick your core message. On a busy site, what visitors see is based on luck; which elements did they choose to look at?
A good design should be centered around a single message.
A bad design allows users to choose from competing messages.
-
From Print to the Web: A Designer's Guide
Joel Sutherland
Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.
We work as technology partners with a number of designers. They'll design a site and we'll make it work as a website. These partnerships have been rewarding as we've worked on a diverse range of sites and have been able to meet a number of great designers.
This diversity of work is a product of many of our design partners having a print background. In web design circles we've seen this looked down upon, but frankly our experience with print designers has been incredibly positive. Generally, print designers have a very strong and disciplined design background so once they learn the basic principles of the web as a medium they are able to translate their ability well.
The purpose of this post is to cover the basics of the web for designers who have a strong print background. It doesn't cover core design principals, those translate to the web just fine. The five main areas that will be coverd are:
- Successful Web Layouts
- The Dimensions and Color of the Website Medium
- Safe Typography Choices for the Web
- Backgrounds
- File Organization
Successful Web Layouts
Compared to print pieces, most websites share very common layouts. To some extent, this is because designers tend to copy each other. Other than a lack of creativity however, there are a number of good reasons for this. Websites that behave in expected ways are much easier to use.
To get an understanding of how web layouts evolved. It is worth reading this piece by Jakob Nielsen about how user's eyes move on a webpage:
F-Shaped Pattern For Reading Web Content
General Website Elements
This eye pattern makes plenty of sense when considering how the elements of site are traditionally placed. Below are some accepted rules-of-thumb to consider when placing website elements:
Logo
A site logo should go in the top left with few exceptions. This is where a visitor's eye goes first so the site will be associated with your brand if the logo is there and ready. Additionally, this is where a visitor will check if they stumble onto the site from elsewhere and they wonder where they are.
Navigation
A site's primary navigation should either be listed vertically along the left side of the page or horizontally along the top of the page. More and more major sites are moving to a horizontal naviation scheme. We believe this trend will continue now that nearly every site designs for a minimum screen width of 1024px. This increased width allows for larger navigational structures to fit horizontally and it also encourages more multi-column content layouts. (See a nytimes.com sectional page.)
Content
The primary content of a page should be towards the left or center and be reasonably narrow. In fact, the same alphabet-and-a-half line length rule applies from print -- for a fixed-width site this means roughly 500 pixels. The primary difference between print is that on the web, text can't easily wrap from one column to the next. Visitors are willing and accustomed to scrolling while reading.
Login, Logout, and Search
These go in the top right of a page by convention. Nearly every bank, ecommerce site, search engine or really every site puts these in the top right so visitors will be looking there.
Banner and Call to Action
As described in the eye tracking article above, the first pass a visitors eye makes, is in a horizontal stripe across the top of the page. Many sites will put a banner in this area along with a call to action. This has become nearly universal among political websites that must quickly interact with new visitors since the site may be only be up during the campaign.
Contact Forms/Buttons and Signup Forms/Buttons
These are often found in the sidebar of pages towards the top. They can also be placed in the header of a site near the top, but the explosion of blogs has made it more common to see them in sidebars. The important thing to remember is that the farther down the page they are, the number of views they will get will decrease.
Footer
Obviously the footer of a site should be at the bottom. Some of the elements that are often contained within the footer include a repeat of the logo, primary site navigation and copyright line. If the site has a privacy policy or terms of service, this should go in the bottom right.
Well-Understood Layout Elements
"Featured" Box
It has become common to use a box in the highlighted banner of a site that features latest stories along with an image. Usually just one will be featured at a time, but it is possible to switch between three or four using tabs, links or buttons. This can be done simply, with a switcher, or other fun effects can be used like sliding or fading. We use this technique on our homepage to highlight our different services and we use a slide transition.
Drop Down Menus
Early-on, drop down's were considered bad practice. This was because they depended on javascript during a time when bandwidth was scarce and javascript was much more unreliable across browsers. Today they are common and quite useful. One form of the dropdown, the mega-dropdown shows a large amount of information at once. These can make deep sites much easier to navigate. Jacob Nielson has a great writeup on these.
The Dimensions and Color of the Website Medium
Compared to print, websites are very small. Websites are shown on low-resolution screens that are poor at reproducing color. This causes a number of issues that a print-to-web designer needs to be aware of.
Pixels vs. Inches vs. DPI
When dealing in print the unit of measure is the inch, or point, or cm or something else that bears a connection to real-life physical dimensions. This is why DPI is used. A designer can create something of a certain size, regardless of the resolution it will be printed at. This is not possible on the web since the unit of measure is the pixel and pixel density varies dramatically. For example, it is possible for the common resolution of 1024x768 to be used on a 12" laptop and a 19" flat panel.
This is why setting your working resolution to 72dpi is not enough! Instead it is important to understand the dimensions of the media in terms of pixels. Monitors may have varied resolutions, but in 2009 it is safe to design for a minimum resolution of 1024x768. This does not mean that you can use all of those pixels as you can see below:
Safe Dimensions
Some of the width and the height will be consumed by the browser, scroll bar, toolbars and even the windows task bar. We consider a safe maximum width to be 960px. It may be worth going more narrow if the background image or color are important to the tone of the site. For elements that must be "above-the-fold" use 500px as a safe number. Also remember that visitors are more and more willing to scroll.
For content columns aim for 450-650px wide. This gives visitors a chance to change their font size without losing a good reading width.
Working in Photoshop
When in Photoshop, be sure to set your unit of measure to the pixel so that it is easy to work out the dimensions of the site. Additionally be sure to use the sRGB colorspace. CMYK does not work on the web. If the site ends up needing translated from CMYK some colors may be slightly different than you originally intended. Additionally, if you are ever saving an image for the web, a CMYK image will not display properly on most visitors machines.
Typography for the Web
Web Safe Fonts
Typography on the web is depressing. There is really no way around it. There are some emerging technologies that could make the situation better, but these are the only safe fonts for copy:
- Times / Times New Roman
- Georgia
- Palatino Linotype
- Andale Mono
- Arial
- Arial Black
- Impact
- Trebuchet MS
- Verdana
- Comic Sans MS
- Courier New
So what does "web-safe" mean? It means you can expect them to be installed on a visitor's computer and that it will render as you expect. If you use a font that a visitor doesn't have, the results cannot necessarily be anticipated and a replacement font will be selected. To try out some of these fonts on the fly, the following tool is great:
Using Non-Web-Safe Fonts
Other fonts can also be used sparingly by using a number of techniques. The thing to remember, however, is that any of these techniques have downsides. They either cause the page to render more slowly, increase the file-size of the site, or make text impossible to copy and paste. Many of the best "web-medium" designs stick to web-safe fonts as much as possible
Replacement Techniques:
- Basic Image Replacement - This is just a rasterizaton of the text to a static jpg, gif or png. This makes it impossible to update the text with a CMS and also can have some SEO downsides. This is the best technique for logos or other major design elements.
- Cufon - This uses javascript to draw the text in a font as vector shapes. It is reasonably lightweight and it is easy to change text since it is done dynamically. As a downside, the text cannot be selected and it can have a delay prior to rendering.
- sIFR - This method is like cufon except it uses flash to render the text. This makes it a little more heavy-weight, but its text can be selected.
Designing for more than Lorem Ipsum
If you are designing a site with client or user generated text, you'll need to consider more than just paragraph text. A good web-style guide will be ready for:
- Headings 1-6
- Paragraph Text
- Ordered Lists
- Unordered Lists
- Blockquotes
Building this out will ensure that the site design will continue to look good even as content is added.
Backgrounds
Since visitors have different monitor sizes, they will see a different amount of the site background. This should be considered when designing the background. In most cases, a repeating background will be used, so it won't matter how large a monitor is. That is how this site works:
A background image must also account for the fact that each page will be a different height. In the case of our site, we repeat the background image horizontally over a white background. The same can be done with a vertical gradient, but it will need to ultimately fade to a static color, so that a webpage can extend down indefinately.
If an image is used as the background, it will need to consider extra wide monitors. It should either fade out to a static color, or the image should be 1920px wide to accomodate 24" monitors. It will also have the issue of vertical expansion to consider.
Organization
As mentioned early on in this guide, it is important to set up Photoshop to be ready to work with web colors and pixel based dimensions. To do this, set your color profile to sRGB and your units to pixels. This will get you off to a great start.
From there, it is important to keep your photoshop file well organized as it will serve as a reference for the website design for the life of the site. There is a great guide on Web Design Depot on how to do this. The key points are:
- Make sure every layer is labeled and organized in a folder.
- Nest Folders into a logical design heirarchy.
- Make sure to include hover and click states
This concludes the guide. We have tried to make it as comprehensive as possible while still remaining brief. If you have any suggestions on additional tips to include or bad advice to remove be sure to let us know in the comments.
- Successful Web Layouts
Subscribe to RSS
Subscribe to email updates
Our development blog has moved to GetHifi.com, a website dedicated
to our new HiFi web platform.
Visit GetHifi.com »
Network with Us