60 Questions to Consider When Designing a Website
设计网页时要考虑的60个问题
We spend a lot of time asking ourselves, our clients and other people questions. Whether it’s choosing the perfect shade of green for our latest web layout or figuring out how to implement a complex typographical solution, the ability to ask the right questions is among the most critical of skills for a web designer. In this article, we’ll go over 60 specific questions that web professionals should ask before taking their website public.
我们花费许多时间问自己、问客户、问其他人问题。类似于,是否要为我们最新的网页选择绿色阴影?如何选择复杂的排版解决方案?对于一个网页设计者来说,正确提问是一项非常重要的能力。在本文中,我们列出了60个典型问题——这些问题是网页设计专家在完成作品前必问的60题。
Why Asking Yourself Questions Is Important
为什么向自己发问很重要?
Many professionals work with the aid of checklists, while others routinely check for certain issues as the design evolves. While there isn’t a sure-fire way to avoid the embarrassment of forgetting something post-launch, the habit of continually questioning your work as you develop a website is critical. Sometimes it can be as simple as "Does this work?"; in other cases, more technical questions need to be asked (and answered).
许多专家靠备忘录辅助工作,而其他人并非如此。但世上没有万无一失的办法来规避因为遗漏东西而带来的窘迫感,所以当你在设计一个网页的时候,不断地向自己发问是非常好的办法。有时候,这些问题甚至可以简单到如、我这是在工作吗?”,而通常情况下,需要问自己一些更富专业性和技术性的问题,当然,别忘了回答。
It doesn’t make the job any easier to second-guess yourself into a state of neurosis (something perfectionists do quite often) or to make blind decisions. There’s no perfect method for gauging a project’s needs or the decisions we make, but asking difficult questions during the process helps us avoid issues later on.
如果你总像完美主义者般那样神经质地猜疑你自己,或者相反地瞎做决定,这恐怕不会让你的工作变得轻松。虽然没有什么办法能够估量我们做出的决定是否正确,但在工作过程中不断向自己发问至少能够避免这些烦人的错误。
15 Questions for Project Management
有关项目管理的15个问题
One of the central tasks of web design is project management. Building a new website is like setting the foundation for a house. With so many details to deal with, planning ahead and managing the ongoing tasks is essential.
项目管理是网页设计工作的重心环节之一。制作一个新的网页就好比搭建一座新的房子。考虑到有许多细节需要斟酌,在开始工作前计划一下是非常有效的。
1 Has the client signed the contract? Working without a contract is extremely risky.
1、我的客户签好合同了吗?”——如果你不与客户签合同就开始工作的话,是非差有风险的。
2 Do you know what the final product should look like? Having a solid plan of action, including a few diagrams, wireframes, prototypes or mock-ups, can enhance clarity.
2、我清楚最后的成品是什么样子了吗?”——对你自己要做的工作必须有个清晰的计划,包括图表,线框,模型等,务必把这些搞清楚。
3 Has all of the content been written? A website without content is like a painting without a canvas; ideally, a website should be built around the content, not vice versa.
3、所有内容都已经写下了吗?”——一个没有内容的网页就像一幅没有帆布的油画,最理想的情况是,一个网页必须根据内容而建,反之则不可行。
4 Does the website require any pre-built solutions? Life can be made easier with tools such as content management systems (e.g. WordPress) and scripts, so determine what you need before you start coding.
4、这个网页需要提前准备什么吗?”——诸如Wordpress之类的工具能使生活更美好,所以在你写代码前要想好你要什么工具。
5 Do you know what the competition offers? Your rivals are often the best source of ideas, and knowing what they offer can help you meet visitors’ expectations.
5、我的竞争对手可能给客户提供些什么呢?”——你的对手往往是好主意的来源,知道他们在干些什么能帮助你更好地迎合顾客的需求。
6 Have you set appropriate deadlines? Setting realistic deadlines and tracking your progress towards those deadlines is always important.
6、我有准确的最后期限吗?”——设定一个现实的最后期限,并督促你自己按着期限来追赶你的工作速度是非常重要的。
7 Will you need to factor in additional costs? Websites are relatively inexpensive, and you can build a good one using free software, but still, you must be on top of any expenses you might incur.
7、我需要追加一些投入吗?”——网页设计一般不需花费很多,你可以靠一些非常便宜的软件就搞定它,但是,你必须有准备为这些工作花更多的资金。
8 Do you have the necessary skills? Some websites are more complex than others; consider which technologies you will need to work with and whether your knowledge of them is current.
8、我具有必要的技能了吗?”——有些网页设计要比其他的复杂得多,仔细想想你都需要哪些技能去完成它,而且要知道你所拥有的知识是不是最新的。
9 Have you thought about marketing? A website without visitors is useless. Look into your options for social networking, SEO, advertising and more.
9、我考虑过营销推广吗?”——一个网页如果没有访客,那真是太糟糕了。检查一下你为营销推广所做的准备,比如社会化媒体,SEO还有广告。
10 Will the website actually be useful (or even necessary)? There is no point wasting your energy on a project that will have no value for end users, so start by weeding out bad ideas.
10、我做的这个网页有用吗?”——将时间精力浪费在一个没有价值的项目上是很糟糕的事情,所以务必在一开始就把这些坏可能给去除。
11 Is a target audience mapped out? Knowing what kind of people you hope will visit the website will help you not only write appropriate content but design effectively, too.
11、我对于目标人群的定位清楚吗?”——了解你想要吸引的目标客户将会帮助你更好地设计网页内容。
12 Do you have a checklist or criteria? Even a set of basic criteria to maintain quality control or a checklist for larger projects would help.
12、我有备忘录或者准则吗?”——哪怕是最基本的准则和备忘录都能对你的工作起很大的帮助。
13 Can your host cope with the demand? Getting the right type of hosting is important; there’s no point in having shared hosting if you’re going to be streaming gigabyte-heavy video.
13、我的主机能招架住这些流量需求吗?”——找到合适正确的优秀的主机很重要,如果放映几GB的视频想要顺利的话,合租主机不是个好办法。
14 Have you got the media? Some websites require video, audio and special file types such as PDF documents. Accounting for assets early on lessens the risk of launch delays.
14、需要播放的媒体素材都准备好了吗?”——有些网页需要播放视频、音频或者PDF这样格式的媒体文件。好好想一下是否都准备好以免耽误。
15 What features do you hope to include? Perhaps you need to accept payment, or maybe you want a photo gallery. Whatever you need, plan ahead prior to designing the layout.
15、我还希望在这个项目里包含什么元素?”——也许你需要接受这笔款项,或者你可能需要加一个相册。将你需要的东西提前安排与计划好。
15 Questions for Code-Authoring
15个有关代码的问题
Next up are questions to ask regarding writing code. If you design or develop websites, you’ll find yourself working with HTML, CSS, and JavaScript. Every language has a range of best practices and guidelines to follow, which is great if you want to standardize your end-product. However, there are a lot of other things to consider besides being standards-compliant.
接下来的问题是有关代码编写的。如果你需要设计一个网页,那你将会与HTML,CSS还有JavaScript打交道。每一种语言都有书写规则和适用范围给你参照,这些将帮助你最终完成的作品看起来非常专业和标准化。然而,除此之外还是有许多需要你考虑的问题。
The impact of source code on the effectiveness of your content is often overlooked yet very real.
源代码对你设计的内容所带来的影响非常大
16 Does the code validate? While validation isn’t a complete testament to code quality, it does help to make sure that your code follows recommended standards and can show you errors in your markup, CSS, and JavaScript.
16、这些代码能生效吗?”——有效性并不是代码质量的全部测量标准,但它能保证你的代码按照标准写,也能帮助你发现在书写过程中的错误。
17 Have you considered using CSS3 and HTML5? Though many users still don’t use browsers that have CSS3/HTML5 support, if implemented with progressive enhancement in mind, taking advantage of these future W3C recommended standards gives your products added value and improves the craftsmanship of your web designs.
17、我是不是要考虑适用CSS3或者HTML5?”——虽然许多用户不使用支持CSS3和HTML5代码的浏览器,但如果你能合理适用这些代码的优势,那它将会帮助你的产品拥有更多的价值和含金量,让你的网页设计作品看起来完美极了。
18 How semantic is the code? Using the right tag for the job is essential, and search engines love semantic code. Usefor paragraphs, for listed items that have no ranking, for items that have a sequential relationship, for hyperlinks andfor clickable UI components that perform an action/user task.
18、这些代码写得对吗?”——在工作中适用正确的标签能帮助你提高效率,而且搜索引擎偏好有意义的代码。用代表图表,用显示无序的列表,用显示互相有联系的列表,用代表超链接,用代表可点击的用户界面按钮,等等。
19 Are you taking advantage of optional files and site add-ons? Whether in the form of using the Sitemaps XML protocol or including a favicon, these optional files can enhance your website. See five files that can improve your website.
19、我充分利用插件了吗?”——考虑一下是否要使用XML协议或者域名边上的小图标,这些可变量能帮助你加强网页可看性。
20 Do you need an RSS feed? If your website is content-heavy and is updated frequently (e.g. a blog or news site), having an RSS feed will be a necessary site feature for keeping your users up-to-date with fresh content. If you don’t use a CMS with this feature built-in, check out SimplePie, a PHP class for building your own RSS feed.
20、我需要提供RSS订阅吗?”——如果你的网页内容很多,而且更新非常快(比如:博客或者新闻网站),提供RSS订阅将保证你的读者能第一时间收到你更新的消息和内容。如果你不使用CMS内容管理系统的话,考虑一下使用SimplePie来构建你的RSS订阅功能。
21 Will the code degrade gracefully? Graceful degradation (also known as fault-tolerance) — the notion that a system (in this case, a website) will still function under sub-optimal situations — is essential for flexible and web accessible site builds. Learn how to pragmatically apply graceful degradation when using CSS3.
21、我写的这些代码已经是最简化最精致了的吗?”——系统的容错能力非常重要,学习一下如何能精简你的代码使其更完美更简洁。
22 Have you considered SEO? While search engine optimization should not dictate your design decisions, it wouldn’t hurt to consider how your website could be more visible in search engine results. Read some SEO tips to remember when building your site and ways to improve the SEO of your web designs.
22、我考虑过SEO了吗?”——搜索引擎不会主动来照顾你的网页,它不会自动就让你的网页让更多人看到。所以你需要学习更多的SEO的相关内容,来使你的网页更多地被搜索引擎收录,提高点击率。
23 Do you provide a printer-friendly style sheet? Designing a print CSS file is worth the time investment as many users still do print out web pages.
23、我设计的页面排版方便打印吗?”——设计一个适合打印的CSS文件是非常有必要的,因为有许多人习惯将看到的网页直接打印出来。
24 Is any of your code deprecated or non-standard? Using "dead code" such as the tag that was deprecated in W3C HTML 4 specifications as well as non-standard code such as the tag is frowned upon and won’t allow your work to validate against W3C web standards recommendations. Double-check that you’re not using any by taking advantage of free validation tools such as the W3C Markup Validation Service.
24、我的代码写得标准吗?”——写了死代码真是非常不好。诸如在W3C,HTML4里使用,或者。这样的话你的工作质量会打折扣。所以反复核查你所写的代码,确保你没有写出这些无效的代码。
25 Do you need to use conditional comments? IE6 isn’t going to go away completely, and if your project requires you to support IE and to use browser-specific code, use conditional comments to serve IE-specific stylesheets instead of using hacks. This does two things: It gives you the ability to get your code to validate under W3C standards, and when you decide to stop using browser-specific code, you only need to remove the conditional comments in your site template. Leveraging JavaScript techniques for fixing IE6 and projects such as HTML5 Boilerplate to solve deprecated-browser rendering issues could be another option, but you’ll be stuck in scenarios where the user uses an old browser with JavaScript disabled — a scenario that is not as uncommon as you might think.
25、我需要加入条件式注解吗?”——IE6 还没有完全退出历史,如果你的网页需要你支持IE浏览器的话,你需要使用条件式注解来满足IE的独特需求。这能使你的代码在W3C标准下有效,如果你一旦不想使用它了,你只需移除你页面上的注解即可。利用JavaScript技术来满足IE6和HTML5代码支持的网页就是另外一回事了,但是你需要考虑一下万一用户使用旧版浏览器,Java代码不能支持的时候,该如何解决。
26 Are structure (HTML), presentation (CSS), and behavior (JavaScript) separated? This is important not only because it’s best practice, but also leads to more manageable and maintainable code.
26、我分清HTML, CSS, JavaScript了吗?”——这一点相当重要,关系到你的页面到底能提供多好的体验。
27 Is your site navigation laid out in a practical way? The navigation menu is the most important part of your website. Getting it right is an integral part of an effective site information architecture.
27、我的页面导航实用吗?”——导航菜单是页面最重要的部分。要好好地做对它。
28 Have you checked for unnecessary HTML elements and redundant CSS style rules? Code bloats easily, so strip away any non-essential and repeated bits of code for more maintainable and leaner (and thus, higher performance) website builds. For HTML/CSS optimizing purposes, check out HTML Tidy and CSSTidy.
28、我检查过冗余的HTML和CSS了吗?”——代码写着写着就容易冗长,多余,所以多检查一下,看看有什么地方还能简化。
29 Is the code organized and maintainable? Put care and attention into your code. Lay it out so that it’s easy to read, update and manage.
29、代码便于组织和维护吗?”——好好核查你的代码,保证它日后能被修改和升级。
30 Would a framework enhance the site? These days, open source Ajax/web development frameworks such as jQuery and MooTools can speed up code-authoring and ensure fewer headaches due to cross-browser issues. If you suspect these frameworks might help, why not investigate and learn about them?
30、使用框架能加强网页效果吗?”——最近,类似jquery和mootools开源框架能加快代码的读取速度,并保证低错误绿。如果你觉得这样的工具有助于你,为什么不赶紧学习使用它们?
15 Questions for Web Designing
15个有关网页设计的问题
The process of creating a layout is full of questions related to color, typography and even distinctiveness. While your project management style may be superb and your coding technique beyond measure, design comes with its own set of questions. Web design calls for endless decisions, and that’s what these following questions are supposed to help you resolve.
网页设计的过程往往充满了有关色彩、字体等相关问题。当你对管理和代码问题都能应对自如后,网页设计的问题自然就会浮现出来。网页设计需要你不断地做决定,这些就是你对于问题的回答。
31 Have you optimized your media? Images, videos and audio take up more bandwidth and space than anything else. Consider compressing and optimizing them with tools such as Smush.it.
31、我的媒体优化得到位了吗?”——图像、视频、音频将占用很大的带宽和空间。仔细考虑如何使他们运行得更流畅。
32 Is the user interface overcrowded? If there’s one thing no one likes, it’s a stuffy and bloated design. Determine whether reductionism can help you design better websites.
32、用户界面是不是太复杂了?”——一个复杂又凌乱拥挤的页面是不会受欢迎的。想一下可以缩减哪些东西让界面更简洁。
33 Is the design distinctive and unique? With site templates in abundance, having a layout that’s fresh and eye-catching is a must. Breaking the mould may improve your brand’s identity.
33、我的设计是与众不同的吗?”——让你的页面更夺人眼球,做出前所未有富有新意的东西能迅速提高你的品牌形象。
34 When should I redesign? Are you able to produce something totally different or enhance what you have?
34、什么时候需要重新设计?”——你能在目前的基础上做出更大的进步吗?
35 Does the layout make sense? Whether you pick one column or three, a lot of scrolling or none, decisions on your pages’ visual hierarchy will directly affect readability.
35、这个网页合格吗?”——不管你使用一栏还是三栏,多么多的链接,你页面的视觉感将会极大地影响到它的可读性。
36 Do the colors give off the right feeling? Color is closely linked to emotion; a palette can be the difference between a fun-looking website and professional-looking one.
36、我选的色彩看起来舒服吗?”——色彩常影响人的感觉,同一块调色板可以调出让你的页面看起来很专业的颜色,也可以看起来很肤浅。你要好好选择。
37 What typography is best? As with color, typography affects the feel of the website. Build your font stacks wisely and attentively and take time to craft a masterful typography design.
37、哪种字体最好?”——除了颜色,就是字体最影响视觉感了。要谨慎选择你的页面字体。
38 How visible are links? Links have no purpose if they cannot be seen. Make sure you take the time to design your hyperlinks well.
38、内页链接都够显眼吗?”——如果链接让人难以发现,那等于白做。确定你做的超文本连接都能被看到。
39 Are you using enough white space? Too many websites squeeze everything too close together. If you add some breathing room, the result could be improved readability.
39、你留了足够的空白了吗?”——许多网页把大量的内容挤在一起,看起来非常不舒服。如果你能留一些空白,留一些余地,那可读性将大大增强。
40 Have you considered content on-demand? With the rise of Ajax and fast content switching techniques, packing more data onto the page is easy. Consider doing this with very long web pages.
40、你确定页面内容是符合读者口味的吗?”——随着Ajax技术的迅速发展,在页面上加载更多的信息成为可能。考虑在长页面上使用这样的技术。
41 Is the design aesthetically pleasing? While this process is subjective, it’s still a good idea to get feedback from your friends, co-workers and perhaps a stranger or two to determine whether your work is visually appealing or not.
41、我的设计能让人感到愉悦吗?”——虽然有些俗,但是你还是要向你的朋友,同事,甚至是陌生人那里征询意见,看看他们对你的页面的建议。
42 Is the content readable? Nothing is more important than content; if it’s legible and coherent, then your site users will be happy.
42、网页的内容可读性强吗?”——没什么比内容更重要了。如果这点能做好,那你的读者将感到非常愉悦。
43 Does the design scale at various resolutions? Displays are getting bigger (bigger desktop monitors) and smaller (mobile devices) at the same time; make sure your work renders in all web-enabled devices. For mobile devices, take advantage of free tools for testing designs in mobile devices.
43、我的设计能适应各种各样的显示分辨率吗?”——你无法预计你的读者使用什么样的显示器看你的页面,所以你尽量要做到通吃,多利用免费工具来测试你的页面适合度。
44 Are important site features emphasized? Some things are more important than others; consider the various ways that relevant content can be highlighted so that visitors can easily find it.
44、页面里重点的部位得到强调了吗?”——总有些东西是你想强调的,所以考虑一下如何让它们更显眼以便读者发现。
45 Does the website feel complete? This is probably among the most important yet difficult questions to answer. Recognizing when it’s ready requires a lot of care and thought.
45、我的页面看起来完整吗?”——这是最难的一个问题,但是是最重要的。需要你认真地反复地考虑。
15 Questions for the User Experience
15个有关用户体验的问题
The user experience is perhaps the most important factor for determining the success of a website. Here are questions related to UX, usability, and accessibility.
用户体验是一个网页成功与否的决定性因素。这里有一些有关它的问题。
46 Does the website work equally well across different browsers? There are plenty of browsers out there — make sure your website works well in the major ones. You can use a web service like Browsershots to preview your work in various operating systems and web browsers.
46、网页在不同的浏览器下运行如一吗?”——市面上有许多品牌的浏览器,要确保你设计的网页能在主流浏览器上运行,你可以使用Browsershots服务来预览你的网页在各种浏览器上的效果。
47 Is the website mobile-friendly? While desktop browsers are pretty straightforward (with the exception of IE), mobile devices require an extra bit of care and attention; read about best practices for the mobile web design.
47、这个网页能在移动设备上运行自如吗?”——在桌面浏览器上浏览网页相对较方便,但是移动设备上并非如此,它可能需要调整一些东西才能很好地显示。
48 Have you tested the website in a screen reader? Unfortunately, even with free screen readers out there like Fire Vox, a screen-reading add-on for Firefox, few web designers consider testing their designs for screen-reader web accessibility. You might want to.
48、你在屏幕阅读器上测试过网页了吗?”——事实较让人失望,包括firefox在内的一些免费屏幕阅读器常不太能很好地适合设计出来的网页。所以你必须测试一下。
49 What happens when JavaScript is turned off? Not every experience is the same and we can’t control the visitor’s browsing environment, so try to make sure your website gracefully degrades when JS is turned off.
49、关闭JavaScript效果会怎样?”——每个人的体验不相同,我们也无法控制每个浏览者的阅读环境,所以尽量确保你的网页在任何情况下都能良好运行。
50 Do you offer alternatives to Flash content? Following on the previous point, if your website is particularly Flash-dependent, you might want to make sure that your use of Flash is accessible.
50、Flash文件可以用不同的方式播放吗?”——紧接上一点,如果你的网页依赖Flash的话,你最好保证这些都能顺利做到。
51 Did you remember alt attributes? One of the simplest accessibility aids to implement is using descriptive and useful alt attribute for images.
51、你注意‘图片显示’相关的内容了吗?”——一个最简单的辅助办法就是使用描述性且有效的图片显示工具。
52 Have you evaluated your website against Web Content Accessibility Guidelines? Complying with web accessibility best practices is important for users who have disabilities that affect their capability to browse the web. Fulfilling the recommendations in the W3C Web Content Accessibility Guidelines (WCAG) is the perfect place to start.
52、你依据‘WEB内容可访问性指南’来评估这个网页了吗?”——遵循访问性指南是非常重要的,记得使你做的网页都能符合WCAG。
53 Has the website been tested by other people? Usability testing is quite easy and expensive to carry out nowadays. Performing tests could give you ideas for improvements. Check out web services such as Concept Feedback and Feedback Army.
53、这个页面被其他人测试过了吗?”——可用性测试非常简单,不过有点贵。这个测试能帮助你完善作品。
54 Do your URLs make sense? URLs that are easy to read will give potential visitors the chance to predict where they’re headed (and is good for CEO to boot). Using pretty URLs (example.com/about-us) instead of system URLs (example.com/?p=655) can enhance the experience of visitors. If you’re using a content management system or a custom-built app, learn about rewrite engines.
54、页面链接都有效吗?”——链接能够带来潜在读者,一个简洁、便于记忆的链接名称将大大提升用户体验。如果你还在使用系统默认的链接方式的话,不如尝试更改一下。
55 How quickly does your site load? Speed is an important factor of usability. Consider how your website will affect visitors, particularly ones on slow connections.
55、你的页面载入速度如何?”——速度是实用性指标之一,试想一下:载入速度很慢的页面将多么影响你的用户体验。
56 Is the search functionality easy to use? Most websites need a search box to help visitors locate the information they need. Ensure that yours is easy to use and that the results are accurate.
56、页面的搜索功能使用起来方便吗?”——大多数网页都需要一个搜索框,来帮助浏览者定位他所需要的信息。要确保你的页面搜索框设置正确,且搜索结果正确。
57 Will there be any potentially obnoxious behavior? Whether it’s pop-ups and modal windows that won’t close, or scripts that cripple right-clicking, make sure your site doesn’t have behavior that annoys users.
57、你的页面存在潜在的令人厌恶的元素吗?”——弹窗之类的东西将让用户体验变得糟糕,要确保你的网页上没有这些东西。
58 Are your web forms usable? If you’re asking for too much information or your forms are too hard to complete, people will enter fake details or simply refuse to submit the data.
58、页面表单易填写吗?”——如果你的页面表单问题太多而且回答起来很麻烦,那用户可能就此流失。
59 Can the site owner be contacted without difficulty? While you might get spammed in the process, allowing visitors to send you an email or to initiate a Skype call could be a great way to connect with them.
59、用户能很容易地联系上网站主人吗?”——尽量设置一些联络方式,这样你能很方便地和读者交流。
60 Have you checked for broken links? Root out dead links in every nook and cranny. Tools such as Xenu’s Link Sleuth can automate the process; learn how to discover broken links in your website.
60、你检查过无效链接了吗?”——无效链接会让你的读者体验降低。使用Xenu的工具能帮助你检查无效链接,并且要弄明白这些链接是如何变得无效的。
Conclusion
总结
As we learn and grow, our competency increases, which changes our perspective and workflow. Designers and developers who regularly question their methods and ideas are usually the ones who get the job done right and are the ones who consistently improve their processes and products.
我们在学习的过程中变得更富竞争力,而这些东西终将改变我们的视野和技能。设计师和开发人员如果能常常向自己发问,则能将工作完成得更出色,也能不断地进步,不断地有新的产品问世