D TE GH RI PY CO RI TE MA AL 1
Future-Proof Survival Techniques Tools for tomorrow’s Web
10 FUTURE-PROOF WEB DESIGN WEB DESIGN PROJECTS contain four essential components. First, you must know your environment. Then you need to plan ahead, learn to adapt, and finish the process by resolving compatibility issues as they arise. Meeting these objectives is challenging, but the work is necessary if you are to successfully future-proof your site.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 11 Ubiquitous and future-friendly layouts cannot be obtained by jumping onboard with every new technique or technology as it arrives (as AJAX shows). No matter how popular these buzzwords become, the name of the technique is never important; what matters is the problem that the technology aims to solve and whether it, in fact, solves it. A great example of this is the Web 1.0 to 3.0 movement.
12 FUTURE-PROOF WEB DESIGN and situations and build real-world solutions that are flexible and durable enough to accommodate every environment, whether it’s a handheld device with a touch screen attached or a desktop computer with a large display, mouse, and keyboard. Mythology and folklore in design In the following sections, I confront a few common myths in web design.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 13 Myth #2: Designs can be considered “complete” I’m a big believer in continued improvement, and because standards and use of sites will always be changing, based in large part on users’ activities and preferences, sticking with one layout and declaring to the world “I’m finished” is . . . well, surely said in jest.
14 FUTURE-PROOF WEB DESIGN successfully forever, across new devices and emerging platforms, all while maintaining compatibility with previous browsers and devices. In this book, I do my best to help you head toward that goal, but as much as I’d like to guarantee that goal, I can’t, because the Web is far too unpredictable. By considering the variables in this book, you can better address the concerns that designers of today’s sites deal with.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 15 unnecessary; or they add too much information, media, or imagery to their pages thinking that substance in great quantity encourages more interaction. Of course, keeping your design and content updated is necessary; just be rational about when and how to do so. Note Be sure to remove clutter from your interfaces.
16 FUTURE-PROOF WEB DESIGN The differences among the environments where your site must function can be substantial — for example, whether Flash or JavaScript are supported. The differences among users are important, too. Some users may encounter accessibility issues, and others may simply be more selective in the features they’ve enabled. Designing for ubiquity requires looking beyond stereotypes; instead, you need to be open and adaptable in terms of your audience.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 17 A better approach is to examine the symptoms, make a diagnosis, and find suitable solutions to treat the condition. It isn’t the brand or model that makes a device; the components make the device. The inside of an iPhone and the code it supports (such as HTML) differ significantly from what you find in a Nokia 6610i (which supports only WML, as shown in Figure 1-4). The issue boils down to two independently built renderers doing what they can.
18 FUTURE-PROOF WEB DESIGN Planning for a Successful Website Understanding the environment you’re designing for is critical when building a site, and knowing the needs of your audience is critical to a successful design. After all, recognizing potential situations beforehand allows you to make more informed, practical choices.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 19 reader, and you’ll understand how your site can be interpreted by a machine, not a human being; any errors affecting it will certainly reflect in the output. Here are some features that make for happy robots: > Search engines may struggle with proprietary code. > Social networks require meaningful, contextual data. > Browsers demand well-formed code to render pages.
20 FUTURE-PROOF WEB DESIGN a final showdown with the “big bad.” In the show, overcoming each challenge on the path to winning the war wasn’t a matter of luck or charging in blindly; it involved careful planning and research. Because each user and situation is different depending on the type of site being built, you must carefully consider any implementation that enhances or degrades a user’s experience. You need to establish primary goals to ensure that decisions are made for the right reasons.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 21 Figure 1-5: Certain situations may require you to consider how data-heavy your sites and pages are. Dodging some of the major pitfalls in design can be tricky, especially if you’ve become comfortable that what you have “works.” Ultimately, for any plan involving the longevity of a site, you need to observe changes in patterns of use, determine methods for improvement, and identify potential causes of concern.
22 Note FUTURE-PROOF WEB DESIGN Treating how users will access and use your site as an afterthought is very risky. Every site relies on content and functionality; nevertheless, the basic design of the layout should always make users the top priority. Ideally, the process of determining site-specific goals begins with competitor analysis and user testing. Next, you use wireframes, prototypes, mockups, concept sketches, and other tools to discover the specific needs of the project.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 23 Learning to Adapt or Evolve You know what’s going on, and you have a clever plan to provide a service that will be the envy of your competitors. Fantastic! Next on the agenda is deciding how to adapt your best-laid plans to particular environments. If you get dropped into a jungle, you don’t act like you landed in Siberia. Likewise, online, you’ll need a box of tricks to cope with the many different requirements a site may throw at you.
24 FUTURE-PROOF WEB DESIGN Figure 1-7: There’s no shame in providing Internet Explorer 6 users with a very usable and satisfying experience. As the use of tablets increased in popularity, web designers on the cutting edge began to investigate how this unique input method could affect interactions on sites. At first, it seemed strange that people might not be using a mouse or keyboard. Continued study is the best route to understanding any device or design variable.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 25 Sometimes cutting edge or bleeding edge is used in reference to designers or developers who use tools that aren’t yet supported by the mainstream.
26 FUTURE-PROOF WEB DESIGN understanding the needs of your audience can tell you a lot about their specific requirements or about non-issues that may influence decisions to build or postpone the implementation (see Figure 1-9). Figure 1-9: If a site primarily attracts users of desktop browsers, you could postpone the flexible upgrade.
CHAPTER ONE Reference FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 27 An article I have written shows how the formats of layouts are changing. Not too long ago, you had only fixed, fluid, and elastic to contend with. Today, you have no less than ten choices! They range from units aimed at print or default preferences to complex mathematically instigated alternatives. For details on how each could affect a design’s flexibility, visit this site: http://sixrevisions.
28 FUTURE-PROOF WEB DESIGN Static sites have little going on under the hood. What you see is really what you get. The benefits of this traditional form of layout are that once you’ve ensured the content scales appropriately, little else beyond the visual arrangement can go wrong. With dynamic sites, you may find that if scripting becomes unavailable or interaction requires additional user involvement, trouble can occur.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 29 Consideration #5: Redesign versus realign If you choose to accommodate various browsing environments, such as the use of specific devices or products by creating separate layouts, you must determine whether to build a new layout entirely from scratch or to realign an existing site’s design (if one exists) to consider the more diverse uses being asked of it.
30 FUTURE-PROOF WEB DESIGN iOS). In my opinion, however, beyond those exceptions, web apps are the better option: You ensure that users have the most recent version, you can build for every platform equally, and in most cases, web apps can be made to perform offline.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 31 Also, you must consider the increased time it could take to build such a scalable site. If a site was originally built with flexibility in mind, updating it with newer variables probably will not take as much time as it would to bring an older, less flexible site up to modern standards.
32 FUTURE-PROOF WEB DESIGN Resolving Issues of Compatibility There is one final, essential survival skill that all designers must have if they want to overcome the challenges of achieving compatibility. By understanding an environment, you can identify the core issues you need to address; by planning ahead, you can reduce the chances for errors; and by remaining open to adaptation, you can implement satisfactory outcomes.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 33 In the past, bugs in browsers have caused a number of problems for designers. However, because of the limited array of devices and circumstances in which sites were regularly viewed, issues related to a damaged experience had a minimal impact (you could fix a problem by throwing hacks at it, often resolving early browser bugs).
34 FUTURE-PROOF WEB DESIGN Uncovering problems can involve as much investigation as any detective novel does. Throwing a site into all sorts of unique situations can also help you understand what users may be seeing on their screens and in the case of really old technology, that view can turn a classic detective novel into a horror franchise. Methods of testing vary among developers, and you probably have your own style.
CHAPTER ONE FU TUR E-PRO OF S URVI VA L T E C HNIQ UE S 35 Don’t be afraid to ask a community for help in testing your work or letting you know what things they’d like to see in future versions of your site. Feedback of a negative nature may seem like a miserable way to spend a day of inbox catching-up, but it’s often the less-flattering stuff that has the biggest impact.
36 FUTURE-PROOF WEB DESIGN Figure 1-15: Devices contain input and output hardware, and your layout must work with both. Design based on the experiences of users is an expanding area of interest, particularly with the new ideas that are pushing us toward a more sociable and useful Web. Survival isn’t just a matter of ensuring that your site looks great via Internet Explorer, Firefox, Chrome, Safari, and Opera.
