BlogmyQuery – BMQ

Mobile web design has been around for quite a while. Unfortunately, a lot of mobile design guidelines are out of date and focus on low-resolution, non-touchscreen phones. Despite their popularity, there isn’t a whole lot of information out there for designing websites for the new generation of smartphones (iPhone, Android devices, BlackBerry touchscreens, etc.) — these devices are growing more and more popular in Europe and North America.

Below are some fantastic resources for designing not just mobile websites, but smartphone-friendly sites. We’ve covered everything from basics to tutorials to usability. If there are other resources you’ve found useful, please share them in the comments.

Development Basics

The articles below give a great introduction to designing for mobile devices, plus more in-depth information. There are both basic, theory-driven articles as well as more technical tutorials.

Designing a Mobile Stylesheet for Your Website
This article from Speckyboy Design Magazine goes in-depth into what you need to consider when creating your mobile site design. It covers everything from allowing for fluctuations in your layouts to hiding awkwardly-proportioned content for your mobile visitors.

In Depth: How to Make Your Website Mobile Compatible
This article dives into the specifics of mobile site development, including topics like device detection and testing.

Website Design for Smartphones – Part 1
This 3 part series from Savvytalk covers all the basics for creating a site optimized for smartphones; also why you’d want to develop for smartphones and how to actually do so.

Tutorial: Making Your WordPress Blog Android and iPhone Friendly
This tutorial gives in-depth instructions on how to make your WP blog show up properly on iPhones and Android devices, without using plug-ins.

How to Write Web Pages for the iPhone and Other Wireless Devices
This page from About.com talks about the basics of designing sites for smartphones like the iPhone. It’s a good primer for what you need to consider before you actually start designing.

Effective Design for Multiple Screen Sizes
This article from MobiForge talks about some things to keep in mind when designing mobile websites for multiple devices, with multiple screen resolutions. Considering that smartphone screen sizes can range anywhere from a couple hundred pixels square up to the iPhone’s new retina display; it’s a big concern for designers.

How To: Make Your Mobile Websites Act More Like Native Apps
This Mashable article offers a number of tools for making your mobile website act more like a native application on mobile devices.

Styling Submit Buttons for Mobile Safari
Here’s a brief tutorial from Think Vitamin about how to style your buttons so they appear correctly in Mobile Safari, including code.

Tutorial: Optimizing Your Website for Mobile Devices
This tutorial shows you how to create a smartphone version of your website that’s based on the regular version. It re-uses elements from the original design to create a site that reinforces your branding and create a unique mobile experience that doesn’t look like just another mobile template.

10 Tips for New iPhone Developers
This article gives in-depth information about creating web apps for the iPhone that work like native apps.

Create a Slick iPhone/Mobile Interface from any RSS Feed
This tutorial from CSS-Tricks shows you how to use your site’s RSS feed to create a slick smartphone interface. The end result is highly usable and has extra flair that’s often missing from mobile sites.

How to Make Your Portfolio iPhone Compatible
This tutorial gives complete instructions for how to make an existing portfolio site work on the iPhone. It even includes instructions for creating a webclip icon, so if users make your site a webclip, it won’t just use a generic screenshot as the icon.

Create an iPhone Optimised Website Using jQTouch
Here’s a complete tutorial for creating a smartphone-optimized website using jQuery’s Mobile library. Full code is included.

iPhone Microsites – Tutorials
This site offers a ton of tutorials for creating iPhone optimized and targeted microsites. Tutorials include how to target content specifically to iPhone visitors, tips for using inline images and also how to create a touch-based sliding UI.

Build an iPhone-Optimized Website with iUI
This tutorial from Webmonkey teaches you how to optimize your website for iPhone visitors using Joe Hewitt’s iUI.

Mobile Web Design: Best Practices
This article from Six Revisions is a great primer for what you need to know when designing for mobile devices. It covers everything from the complications that arise due to different delivery methods to the specifics of structure and code for your mobile site.

Web Apps are Becoming the New Legacy Apps
This article talks about the problems many web apps face in regards to being used on smartphones, and what app creators need to do to be more smartphone-friendly.

8 Ways to Make Your Website Mobile Friendly
Design Reviver discusses a variety of ways to make your existing website more friendly to mobile devices. It includes tips about fluid layouts, centered content, short pages, and more.

Rethinking the Mobile Web
Here’s a brilliant slideshow from UX Magazine that talks about how to approach mobile web design so that it’s accessible on the largest number of devices (not just iPhones or Android phones).

Usability

Usability on smartphones is vital. Usability on the full version of your website might not necessarily translate to good smartphone usability. The articles below can help you fill in the gaps.

Usability Tips for Smartphone Websites
Here’s a brief article that covers usability considerations specific to smartphone website design. It talks about things that aren’t considerations with traditional web design, like leveraging native device capabilities.

Mobile Usability
This article from Jakob Nielsen talks about mobile usability, why it stinks, and how designers and developers can start to make it better. It includes data from real-world studies to back up the claims it makes.

7 Usability Guidelines for Websites on Mobile Devices
This article covers seven basic usability guidelines you should keep in mind when developing mobile sites, based on real user research. Covered are things like not repeating navigation on every page and using mobile-friendly page layouts. It’s aimed at general mobile development, but the principles also apply specifically to smartphones.

5 Can’t-Miss Usability Tips for Mobile Website Designs
Here’s another post with some great specific tips on mobile site usability, though this one definitely focuses more on smartphones.

A Three Step Guide to Usability on the Mobile Web
This article includes not only steps for improving usability, but also a download link to a PDF best-practices guide for mobile development.

Mobile Usability Testing
Here’s a slideshow that gives an overview of what goes into usability testing for mobile sites.

Development Kits

When creating mockups, it’s sometimes helpful to see your design as it might actually appear on a smartphone screen. The GUI kits and other tools here will help with that.

Perfect Multi-Column CSS Liquid Layouts – iPhone Compatible
This site provides a number of CSS-based liquid layouts that work with the iPhone’s browser. They use no JavaScript, no CSS hacks, and no images.

iPhone Application Sketch Template v1.3
This printable iPhone template is great for wireframing mobile sites, and includes a grid for accuracy.

RIM BlackBerry PSD
Here’s a free BlackBerry UI template kit PSD file. It has 135 layers included for all aspects of the BlackBerry UI.

Palm Pre GUI PSD
Here’s a PSD file with a variety of Palm Pre UI elements, free from Teehan+Lax.

iPhone 4 GUI PSD (Retina Display)
Now that the iPhone 4 has a higher-resolution retina display, it’s important to use GUI templates that reflect the higher resolution.

Android GUI PSD Vector Kit
Here’s a free Android vector GUI kit with resizeable elements for creating mockups in any size you need.

Testing

You’ll need to test your mobile site to make sure it’s going to appear as you intended. Here are a couple tools to help:

W3C mobileOK Checker
It’s important that your mobile website is W3C compliant, as it makes it more likely to display across a variety of devices and less likely to break as technologies change (just like it is for regular websites).

iPhoney
iPhoney is a free iPhone simulator from Market Circle. It uses Safari and offers pixel-accurate rendering of web pages. The only downside: it still uses the 320 x 480 pixel canvas, rather than the new retina display size.

10 Awesome Design Examples

What would a roundup of awesome smartphone design tools and resources be without some examples to help inspire your own designs? The designs below are all exceptionally well-done and show just how a smartphone-optimized site should look.

Forever 21
Forever 21, a clothing retailer for young women, do a great job of optimizing their site for mobile viewing. Their navigation is simplified, they put promotions on top but don’t fill the entire screen with them, and include a store locator.

Bloomingdale’s
Clothing retailer Bloomingdale’s places their store locator link prominently on the mobile home page.

Tijuana Flats
Tijuana Flats has obviously what mobile visitors are most likely to want to see: the menu and the restaurant locator, and they place links to each front and center.

Babcock Partners
This is a very polished and professional mobile design, with a simplified navigation and strong visual elements.

Plank
Web design firm Plank has a great mobile site that emphasizes what they do and is very usable.

1 Trick Pony
1 Trick Pony removes navigation on sub-pages on their mobile site, instead opting for a simple “Back” button. It’s a great way to unclutter your design but only works well for sites that don’t have deep navigation.

Wolfram Alpha
Wolfram Alpha’s mobile site is a simplified version of their full site, with the search bar right up top.

Alex Buga
Alex Buga has done a fantastic job of echoing their full site while optimizing it for a mobile browser window. Keeping the same graphic style and using elements of the full design works exceptionally well and reinforces brand identity.

Simon & Schuster
Simon & Schuster probably has one of the more complex mobile site designs listed here, yet they still keep it very usable. Featured content is prominently displayed, as are options for finding other content.

Google Finance
Google Finance maintains a very uncluttered, almost minimalist layout that makes information most likely to be of interest to users easily accessible.

Conclusion

Smartphone design is growing more important on what seems like a daily basis. As more and more people switch to smartphones or upgrade to more powerful versions, smartphone optimization for websites is going to be vital to the success of any website or web-based business.
(ik)

It’s nearly impossible to provide an accurate quote to a prospective Web design client without first gathering information about what that particular client needs. Some designers do this in either a face-to-face meeting or over the phone, but more often, they have a questionnaire that prospective clients fill out. This is preferable for a couple of reasons; the most important, is probably that this document then becomes an integral part of the design process and is available to refer back to.

So the question is, whether you should put that questionnaire up on your website or only send it to prospective clients once they’ve contacted you. There are a couple of reasons you may want to make it available online, but the obvious one is that clients are often eager to get started with their projects; providing the questionnaire online eliminates a step in the pre-contract part of the process.

Here, we’ve collected questionnaires and worksheets used by actual Web design companies, including some of the leaders in the industry. Both online and downloadable forms are included, as well as the pros and cons for each format.

Downloadable Questionnaires

While online forms are certainly popular, so are downloadable questionnaires. These are generally either PDFs or DOC format, though some firms also include versions in RTF or for Pages. The downloadable questionnaires are sometimes longer than their online counterparts, and are usually the choice for agencies that only take on longer and more complex projects.

We Are Pixel8

We Are Pixel8 has a planner in PDF format that they ask their prospective clients to download and fill out, and then upload to their website along with their contact form. It’s a great way to gather client information without requiring them to just fill out a Web form, which presumably lets them take more time with their answers. The instructions on the site are very clear as to how the process works.

Great Example Question: Please provide some information about the look and feel you would like for your website. You may also provide examples.

Happy Cog

Happy Cog also offers a downloadable project planner, which includes instructions for submission. It’s a good system, especially since Happy Cog projects are generally large projects with a wider scope than many other design firms handle.

Great Example Question: Are you familiar with the concept of Web standards?

Clearleft Ltd

Clearleft Ltd offers a Client Ideas Sheet that prospects can download and fill out in order to get a quote. It’s a simple RTF document, focused entirely on the content. It’s also quite extensive, with a few dozen questions included.

Great Example Question: What is your measure for success, and what are you hoping to achieve?

Lunamedia

Lunamedia has a client worksheet that includes sections asking about the company requesting the quote—about their customers and competition, and the scope, features, design ideas and requirements of the proposed project. The questionnaire can be downloaded from the Lunamedia website and then sent via e-mail when completed.

Great Example Question: Why do you believe website visitors should do business with you rather than with a competitor?

45royale Inc.

45royale Inc. offers a downloadable project planner that includes questions about the project goals, the look and feel of the proposed website, and general information. It also includes a section specifically for website redesigns.

Great Example Question: What action(s) should the user perform when visiting your website (search for information, sign up for an account, purchase a product/service)?

Erskine Design

Erskine Design has a detailed project sheet that stretches over five, A4-pages. The questions cover the current website; reasons for redesign; audience, perception, content, technology and marketing. A more convenient (and shorter) Web form is available as well.

Great Example Question: How is your company currently perceived offline? Do you want to carry the same kind of message through your website?

DistinctionHQ

DistinctionHQ has one of the shorter project briefs; it clearly states that all answers will be treated with completely confidentiality. The sheet also contains e-mail and phone details of the company and its logo, which can turn out to be useful in case the sheet gets lost in the shuffle.

Great Example Question: Are you providing all text/images for this project, or do you require copywriting and photography services?

Strawberrysoup

Strawberrysoup allows customers to request a callback, but also has a project sheet and a design questionnaire that clients are asked to fill out. The agency gives customers a number of choices: they can send an e-mail, call the agency or submit the documents online.

Great Example Question: If you need a content management system, please describe the features you would like, e.g. updatable news, multiple authors, stock control, user moderation, etc.

Stuff and Nonsense

Andy Clarke’s Stuff and Nonsense provides quite a lengthy work requisition sheet which is available in MS Word and in PDF. The tone of writing is very informal (“Go make a cuppa, read this through again to make sure you’ve covered everything you need, then e-mail it”) but inviting. All questions are broken down into nine categories: apart from general information about the proposed website, the questions cover the current website and its performance, reasons for the project, audience, perception, new content, technical staff and marketing. If the clients aren’t sure about something in the sheet, they are encouraged to call Andy Clarke directly.

Great Example Question: Which areas of your current website work well? Why is that?

Mark Boulton Design

In the project planner on Mark Boulton Design, potential clients are asked 15 questions. Notice the inviting tone and examples mentioned in the sheet; the agency does a good job of explaining why the questions are asked, and what kinds of answers are expected. Apart from general information, questions are asked regarding branding and design, as well as content and website management.

Great Example Question: When we design a brand, or website, it’s often more successful if we can place it within the current market. With that in mind, can you list your competitors? Please provide URL’s, or contact details for us to begin our research.

Duoh!

Duoh!, the design firm of Veerle Pieters and Geert Leyseele, has a downloadable client questionnaire that asks about things like brand, audience, and the look and feel of the website. The questionnaire is available in both English and Dutch, and is one of the better visually designed questionnaires out there.

Great Example Question: How does this website figure into your business model?

Pros and Cons of Downloadable Questionnaires

Pros:

• Often more user-friendly, especially for very large projects or projects where a team is involved.
• The client will have a record of their answers for later reference.
• The client can take their time in filling out the form.

Cons:

• There’s potential that the formatting will be affected by different software versions.
• Clients may skip parts of the form, leaving out vital information.
• It’s adding an extra step, and making it possible that the client won’t ever come back to your website after downloading the form.

Online Questionnaires

A lot of Web design agencies have online questionnaires for prospective clients to fill out. Here are some nice examples of firms that use online forms to gather information about prospective clients and their projects. Be sure to click through, and take a look at what their questionnaires include.

Emtwo

Emtwo has an extensive questionnaire right on their website. What sets it apart is that each section collapses, making the form feel shorter than it actually is. This kind of design helps keep clients from feeling overwhelmed by an overly-long form.

Great Example Question: Why does your target audience need this website?

Studio 7 Designs

Studio 7 Designs has a short questionnaire on their website, including questions about the project timeline; why you want to work with Studio 7 Designs; and what your website competition is. A short form like this is often more likely to be filled out, though it’s also possible that prospective clients won’t take as much time with their responses as they might with a longer or downloadable form.

Great Example Question: Why do you want to work with Studio 7 Designs?

The Lab Studios

The Lab Studios has an interactive project planner on their website, consisting of nine steps—an interesting way of breaking up what would otherwise be a very long Web form.

Great Example Question: The Web can be a lot of things; some you may apply to your industry and requirements, others you may not. Tell us what you want to achieve with this website (increased sales, brand recognition) so we can suggest the best possible solutions.

Brian Hoff

The graphic design worksheet from Brian Hoff is simple and straightforward, and asks only the most pertinent questions—including asking for websites the client likes; what they like about their current website; and information about the target client base.

Great Example Question: What are your top three frustrations with your current website?

You Know Who

You Know Who has a Request for Proposal form directly on the website. The form is quite in-depth, and is necessary for the client to fill out in order to receive a full proposal. The form is then uploaded within the on-site questionnaire Web form. Clients can also upload any other documents they feel would be useful to the agency.

Great Example Question: Do you feel your current website promotes a favorable user experience?

Pros and Cons of Online Questionnaires

Pros:

• Immediacy. Prospects can fill it out right then and there, reducing the risk that they won’t follow through.
• Makes collecting answers easier.
• Allows designers to require answers to certain questions that clients might otherwise leave unanswered (of course, there is no guarantee of the usefulness of those answers).

Cons:

• Can be harder for a team to collaboratively fill out an online questionnaire.
• Long Web forms can be a psychological turn-off to many people.
• Risks that something will go wrong upon submission. Most clients won’t save their answers elsewhere, and may not bother to fill out the form again if anything goes wrong.

Improve Your Worksheet!

Now that you’ve had a look at real world examples of Web design questionnaires, it’s time to take a look at your own questionnaire. Look at the questions other designers are asking, and think about how they might improve your own process.

This doesn’t mean you need to ask all the questions other designers are asking; if you don’t see the point in a question, then you probably won’t find the answer helpful. But looking at these questionnaires will get you thinking in a new direction, and help you serve your clients better.

Further Resources

• 45 Incredibly Useful Web Design Checklists and Questionnaires
  This article offers up a ton of questionnaires and checklists that are useful throughout your project, including pre-contract questionnaires and project planners.
• Web Design Questionnaire: Top 10 Questions to Ask
  This article discusses the top ten questions your questionnaire should include—as well as why they should be included, and what the answers can tell you.
• How to Create an Effective Web Design Questionnaire
  Here’s an excellent guide for creating a questionnaire, that will help you gather the information you actually need from clients.
• How to Extract the Facts with a Web Design Client Questionnaire
  This article from Freelance Switch discusses the questions you should ask, as well as why you should ask them.
• Ultimate List of Web Design Checklists: Get Work Done!
  This roundup of useful checklists includes links to information on project planners and client questionnaires, as well as other useful checklists and questionnaires to use throughout the design process.

(rs)

© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: checklists, doc, PDF, questionnaire, rtf, spreadsheet, useful, worksheet

Update (27.09.2010): this article caused quite a heated debate in the design community. Please read the rebuttal of this article, called I Want To Be A Web Designer When I Grow Up here, at Smashing Magazine.

— Vitaly Friedman, editor-in-chief of Smashing Magazine

It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.

After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.

As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

The Future is Content and Data

Look at your mobile phone. If you’re like most tech-savvy consumers, you’ve likely got a smartphone of the Apple or Android variety (or maybe a Blackberry, especially if you’re working in the corporate world). Most of us use our smartphones on a near-constant basis doing everything from checking email to working on projects to entertaining ourselves. How much of all that do you do in your phone’s browser?

The answer is probably “not much”.

We use an app to check email. We use the Facebook app for status updates. We use Twidroid or TweetDeck or the official Twitter app for tweeting. We use a YouTube app to watch videos. We use the Pandora or Last.fm apps for streaming music.

Mozilla Prism is an application that lets users split web applications out of their browser and run them directly on their desktop. Is this the future of mobile applications?

It’s likely a similar scenario on our desktop or laptop computer. We use apps for a lot of our common Internet-based activities. We even have options to create our own apps with single-site browsers (like Fluid or Prism). And Google’s Chrome OS is just around the corner with devices already planned to use the web-based OS.

Content is king and design is becoming less relevant – we’re already seeing this with mobile themes

Look at how many WordPress sites use one of less than a handful of standard mobile themes. It doesn’t matter what the site looks like in a standard browser; open it up in your mobile browser and you’re often greeted with a page that looks exactly like the last 10 sites you visited.

This is because for most users, design is irrelevant. That’s not to say they don’t appreciate good design. Many of them do (and many of them don’t). But they’re on a website because of the content. They don’t care about visual design, and they don’t care about interaction designer that much, either: as long as the design doesn’t give them a headache or interfere with their ability to find what they want, they don’t really care how exactly it looks like or how exactly it is working. The most widely-used mobile themes offer the content in an optimized format for mobile viewing. That makes users happy.

It is not just apps that reduce the need to visit a website

It’s not just apps that will pull data directly, without the need for an actual website. Devices are making real headway in this manner. We have cars now that can pull information from the Internet for you. Soon devices for Google TV will be out in the marketplace, pulling video content from the Internet without the need to visit a website.

Soon devices for Google TV will be out in the marketplace, pulling video content from the Internet without the need to visit a website.

It’s likely that more devices will add Internet integration in the near future. At some point we’ll probably have refrigerators that automatically generate shopping lists for us (including any available coupons and where the best prices can be found that week): based on previous shopping habits; what we currently have; and our average usage rates for different foods. This is just one example of how online data and content will become infinitely more important than the designs surrounding that content.

Content Will Be Funneled Through a Handful of Sources

It’s impractical to have apps for every website we visit. Most of us visit hundreds or thousands of websites every year. What’s more likely to happen is that most of our content will be delivered through aggregators.

Who will these aggregators be?

Currently, there are three big players on the Internet that are likely to continue to be the primary content delivery platforms. Who are they? Twitter, Facebook and Google. Think about where you spend most of your time online and you’re likely going to find that those are the sites you visit most often. This market share is only going to increase.

Facebook is already trying to be the Internet

Look at how much content is now aggregated through Facebook. They have pages for virtually every topic under the sun (most of which have canned content taken directly from Wikipedia). Post a YouTube video to Facebook and your friends can watch it right there, without ever leaving Facebook. Even third-party applications like Networked Blogs stick pretty closely to the Facebook environment.

Post a YouTube video to Facebook and your friends can watch it right there, without ever leaving Facebook. Even third-party applications like Networked Blogs stick pretty closely to the Facebook environment.

Besides that, look at the gaming environment that’s cropped up on Facebook. I’ve lost track of how many updates in my news feed are directly related to games like Farmville or Mafia Wars. Facebook has grown into such a complete online ecosystem that many users might never find a reason to leave. Facebook shows no signs of slowing down either. They’re expanding their business and their reach – a trend that’s likely to continue for as long as they can sustain it.

Google wants everything to go through them

Google already has its hands in virtually everything online. It has two operating systems (Chrome OS and Android), its own browser, web applications that allow you to do a lot of things that used to be limited to desktop applications and the most-used search engine in the world put it in a pretty solid position to continue to be a major stakeholder in the future Internet.

Google is also one of the more forward thinking and active participants in Internet policy and technology. It has a vested interest in how the Internet shapes up in coming years and will push to shape that Internet in a way that benefits its business model. I can see a future where Google doesn’t just offer a list of search engine results, but actually shows you the content you’re looking for without ever leaving their sites.

If you look at Google’s complete product offering, it’s easy to see that it wants to be the primary online destination for most people (or maybe even all people). Google is firmly positioned in blogging, video, search, business applications, webmaster tools, ecommerce and even phone services – expect its reach to expand even more.

Is there room for other services?

There are always going to be innovative startups online. Most will fall by the wayside soon after they’re started or are absorbed into other established companies. A select few will go on to become major influencers online. It’s unclear at the moment where there’s room for new companies and services online. The idea of more location-based services (going beyond FourSquare, et al) is probably the most promising as well as services that go beyond normal Internet activities and integrate into daily life more.

Function Will Prevail over Form

If everyone is accessing web content through an app rather than a browser, then no one will care what a website looks like. The way it functions and the content it delivers will become the paramount concerns to users. There will be no more balancing of form and function on a website; function will override form.

Form will retain a place in the design of apps. In all likelihood, content will be open to the extent that APIs will be developed that anyone can then use in application development – so the form in which an app displays that data will become what separates the good from the bad, the great from the mediocre.

There are Advantages…

There are some big advantages to this kind of model where apps and a small number of content aggregators deliver and control most of the content online. One issue is bandwidth. If there’s no design being transferred to a device (because the application on the device already includes all the design elements), that saves bandwidth. As more and more activities are done online, we’re going to have to consider infrastructure costs. Lower bandwidth use per site will result in more bandwidth available.

Another advantage is that there’s more potential for user control. Users can define their preferences on their device and see content in the way they want. This especially has positive implications when it comes to accessibility. Those who need special settings because of a disability will no longer have issues with unviewable content.

Technical advantages

Let’s face it: the technologies upon which the Internet is built aren’t the most efficient ones available. Part of this has to do with building upon infrastructure that isn’t as good as it could be. The Internet has to be backwards-compatible over very long periods of time. We can’t just suddenly change things, even if it is to make things work better in the future, if it causes half the sites out there to no longer function.

With a content-based Internet that uses device-side applications for displaying data and performing tasks, we can create more efficient applications. We won’t need to make sure each application can handle a huge variety of content and processes (as browsers currently have to do), because we’ll know exactly the kinds of data that application will need to process.

What Does It Mean for Users?

Practically, users will have a more integrated experience with the content they view and the services they use online. The Internet will become even more a part of everyday life, incorporated to such an extent that it’s seamless. It’s already happening in bits and pieces.

Again, look at your phone. You probably use apps or widgets for things like checking the weather or generating a shopping list. These apps will become more integrated and will work better with the data available online. For example, you could use that shopping list to automatically find the best prices on products, either online or at your local stores. In all likelihood, that data would be aggregated through a service like Google Base.

One profile fits all

An online profile will become even more important for users. Rather than setting up every device or service you have, you’ll simply authorize the device to grab your profile and preference information from the web. Security and privacy experts will have a field day with this, but most consumers will opt to use it anyway if it means the difference between going through a two-hour manual setup process or clicking a button and authorizing it to set everything up automatically.

What Does It Mean for the Web Design Industry?

So what does this all boil down to? If the web becomes app-based and content-based, where do web designers fit in — if at all? The bad news is that if the Internet starts relying much more heavily on access via app rather than browser, there’s going to be a lot less demand for web designers. Companies won’t see the point in hiring someone to create an entirely bespoke website when they can just use a template and then feed all their content to Google and Facebook and Twitter.

Developers, on the other hand, will likely see a boom in business. A lot of money will be exchanging hands for apps that work better than current offerings and apps that might be able to undermine the big players. Of course, all these apps also need design work, but it will be a lot less demand than there is now for website design. It’s likely a lot of designers will need to expand their offerings to cater to content creation rather than just web design.

Websites aren’t going to go away any time soon. It’s likely that there will be a bigger market for templates and themes as companies stop paying for custom designs. And there will be certain kinds of sites (like portfolios or art projects) that will always want to be designed.

Multimedia content will also still have a strong market. Those who can produce high-quality videos and even web-based apps (for things like Chrome OS) will have a strong business for years to come.

Who Wins in All This?

If there’s a definite winner in this possible future Internet, it is the content creators. If the only thing that sets one company or organization apart from their competition, then those who can create high-quality content will be in high demand. The thousands of dollars that a company used to be spent on website design will be funneled into website content instead.

Users will also benefit as they’ll have a more integrated, customized experience. Their version of the Internet will be tailored specifically to them, based on their own wants and needs. They’ll get content in the manner they prefer and find most usable.

Application developers will also likely win in all this. While the APIs and the data available will be pretty standardized, the manner in which it’s displayed will become a battleground of creativity. Innovation here will be key, doing something different and better than what everyone else is doing is the only way an app will stand out.

Update

Update (26.09.2010): We’ve got quite many negative responses for this article, like Web Designers Won’t Die Out, They Will Transition. At Smashing Magazine, we are aiming for strong, high quality articles and after reading the article we do think that it raises some valid points, and now in retrospect we understand why the title and the content may appear to be aggressive. We also can see where the accusation of trying to be sensationalist comes from. But it was never the intention of the article.

We are trying to do our best to provide only relevant and high qualilty content, but apparently sometimes we see our things differently than our readers do. We do appreciate constructive criticism like the above post on Drawar. And we are listening to what you are saying. And we will certainly keep it in mind for our future articles.

Update (27.09.2010): this article caused quite a heated debate in the design community. Please read the rebuttal of this article, called I Want To Be A Web Designer When I Grow Up here, at Smashing Magazine.

— Vitaly Friedman, editor-in-chief of Smashing Magazine

(afb)
Tweet

© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Think of Tumblr as micro-blogging on steroids (technically, it’s called “tumblelogging”). Whereas Twitter and similar services limit posts to 140 characters or less, Tumblr lets you post updates of any length, although it’s best suited to short-format posts. Tumblr bridges the gap between full-blown blog and micro-blog.

Tumblr is also an option for designers and creative people, because it gives you complete control over the look of your tumblelog. It also offers great opportunities for theme designers, especially with the recent launch of premium themes (which range in price from $9 to $49). Read on for your complete guide to using and designing for Tumblr.

[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

Why Use Tumblr?

Quite simply because Tumblr makes setting up a blog very easy. It also makes it very simple for you to follow other tumbleloggers on the website and to share their content. Tumblr tries to combine the best parts of blogging and micro-blogging in one. It handles longer-form and multimedia posts, like regular blogs, while encouraging more interaction between tumbleloggers, like micro-blogs.

Post Formats

The fact that Tumblr has built-in formats for a variety of content types makes it stand out from other blogging and micro-blogging platforms. There are templates for text, photos, videos, audio, quotes, links and chat transcripts. Most themes take advantage of the differences between these post types and implement special formatting for each one. You can also add plain text to most of these post types, and you can add images to your text posts. It’s a quite flexible system.

Because of the unique post formats, Tumblr makes a perfect platform for vlogging and podcasting, as well as for photo blogging. For audio posts, you can even call in a post, requiring nothing more than a phone. You can also email in posts of all types (each type of post has a specific email format).

Tumblr API

The Tumblr API has spawned plenty of third-party apps that let you do all sorts of things with Tumblr. More than a dozen iPhone apps can be used with Tumblr, and at least as many Web services. Desktop and mobile apps are available, as well as widgets and plug-ins that you can use on other websites. You can set up Tumblr to automatically post to your Twitter or Facebook account, too.

For developers, the API opens a world of options for creating apps. The API itself is relatively straightforward and anyone with basic PHP and XML skills will have a short learning curve. While dozens of Tumblr apps are already out there, there’s still plenty of room for further expansion.

Other Unique Features

Like Twitter, Tumblr lets you follow other users and view their posts in your dashboard. Tumblr also gives you the option to reblog or “heart” (the equivalent to a “Like” on Facebook) posts from anyone, whether you follow them or not.

Following other users is simple: just click the “Follow” link in the upper-right corner of their tumblelog. That’s also where you’ll find the links to heart or reblog content.

Blog Options

Tumblr gives you fairly complete control over how you blog. You can set up group blogs with multiple authors. You can also set up numerous blogs under a single account (each with its own custom options), though only one username is able to follow other tumblelogs. Tumblr also lets you keep private Tumblelogs that are password-protected, so you can share them with those you know or keep them completely personal. Just make sure not to post to your public tumblelog by accident!

Getting Started

Starting out with Tumblr is easy. Just sign up on the site, enter your email address and a password and the URL you want to use (something.tumblr.com). You’ll have the option to set up a custom domain name after you’ve signed up. Once your account is set up, you can start posting right away.

Themes and Customization

Hundreds of themes are available for Tumblr, most of them for free. Take some time to go through the theme options when you sign up, either to find one for your tumblelog or to get ideas to create your own theme.

One thing you may notice with Tumblr themes is that a lot of them have very narrow content areas. While wider themes are available, the vast majority are narrower than 800 pixels (and some even narrower than that).

Most Tumblr themes come with some customization options that don’t require any HTML and CSS knowledge (if you plan to create some public themes, you’ll probably want to include some customization options). There’s also an area to enter custom CSS that will override existing styles.

You can customize the HTML in any theme, too. Click on the “Customize” link from your dashboard, and then click on “Theme” and “Custom HTML.” This is also how you would create a theme from scratch. You can link to an external style sheet, too (Tumblr has a static file uploader for uploading theme assets).

Editing an existing theme is a great way to start designing for Tumblr. It also gives you complete control over how your theme looks and works without having to start from scratch.

The Bookmarklet

The Tumblr bookmarklet makes it easy to post content from anywhere on the Web. Just drag it to your bookmarks toolbar and use it when you find something to blog about. Depending on the page’s content, a window will pop up suggesting a particular content format for your post. You can change the post type right there or accept its suggestion.

Most pages will default to the “Link” post format, but if you’re on Flickr, for example, it will default to the “Photo” format. Likewise, if you’re watching a YouTube video, it will default to the “Video” format.

Creating Custom Tumblr Themes

While Tumblr makes it easy to customize the HTML and CSS of almost any theme, you may want to start from scratch. If you’ve ever created a theme for another blogging platform or CMS, creating a Tumblr theme won’t be any more difficult. Even if you haven’t created a theme for another CMS, creating a Tumblr theme isn’t much more difficult than creating a standard HTML template.

Basic Structure

Tumblr themes include the same basic parts as any website. There’s usually a header and main content area, as well as an optional sidebar and footer. Beyond that, Tumblr themes are broken down into blocks. Each block on your tumblelog contains some piece of data. For example, there are blocks for each of the post types (text, photo, audio, video, etc.), as well as blocks for things like your tumblelog’s description and “Previous” and “Next” page links.

The Tumblr loop has a huge number of variables to take advantage of. You’ll need to define blocks for each post type in order to display them properly in your theme. Beyond that, you choose what to include in your theme.

A complete list of Tumblr variables can be found on the Creating a Custom HTML Theme page on Tumblr’s website. The page also includes more information on creating Tumblr themes in general.

More on Tumblr Theme Variables

Variables allow you to do various custom things with your Tumblr themes. There are basic variables for things like the theme title, portrait URLs and favicons. There are unique variables for each of the post formats, too. Some formats (like text posts) have only a handful of variables, while others have over a dozen.

Creating Public Themes

With the addition of premium themes, many designers are becoming more interested in creating their own Tumblr themes. You might want to do a few things to a public theme that you might not bother with for a personal theme, though. One of these is creating some customization options that allow users to change things like font colors and which parts of a page to show and hide. Look around at what other themes allow to be customized, and look at the variables that Tumblr uses.

Public themes do have a few requirements that may not apply to personal themes. These are:

• All the theme’s assets have to be hosted on Tumblr.
• Third-party widgets have to be commented out. This means that you can include the code and instructions on how to enable it, but it must be disabled by default.
• Your theme must support all of the different post types: text, photo, quote, link, chat, audio and video.
• It must support the standard tags (check the variables list to see what they are).
• It must be good-looking and fully functional. Tumblr themes are vetted for quality; unattractive ones won’t make the cut.

At the moment, when you submit a theme to Tumblr, it’s free by default. To be able to sell premium themes through the Tumblr directory, you’ll either need to ask or be invited. Overall, the premium themes program is pretty secretive.

This doesn’t mean that you can’t sell premium Tumblr themes elsewhere. Theme Forest has a number of Tumblr themes for sale. Other theme developers sell them directly through their own websites. Both are options if you want to get into the premium theme market.

Remember to include credit and a link in the footer of your theme, so that visitors can find your other themes and download them. Many users will leave this credit and link as is, giving you potential traffic for your blog.

Tumblr-Specific Memes

You may want to consider joining in on some Tumblr-specific trends, events and memes out there.

Tumblr Tuesdays and Recommended Blogs

Think of Tumblr Tuesdays as sort of like Twitter’s #FollowFriday hash tag. Tumblr has a built-in recommendation engine that feeds the directory listings of blogs that are recommended enough as well as the recommended tumblelogs that show up in your dashboard’s sidebar.

Bacon

I suspect that Tumblr has a higher proportion of bacon-related blogs than on any other blogging or micro-blogging service out there. Just a quick search turns up at least half a dozen tumblelogs focused exclusively on bacon.

Unfollow Friday

Playing on Twitter’s #FollowFriday hash tag, Unfollow Friday encourages you to post annoying or disgusting things to your tumblelog in an effort to get people to unfollow you. The goal is to see how many people you can get to stop following you.

Conclusion

Whether you’re looking for a quick and easy platform to post short-format or multimedia posts or you’re interested in developing custom Tumblr themes to give away or sell, this guide should get you on your way. If you have additional resources or tips to share, please do so in the comments below!

Further Resources

• 34 Amazing Tumblr Themes—Twitter Could Never Look This Good!
• Things to Know About Custom Tumblr Theme Design
• Getting Started With Tumblr and Custom Theme Design
• Theming Tumblr

(al)

© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: tumblr