summaryrefslogtreecommitdiff
blob: ddcb3f3fac615758f11f8b76783d54c831ebd968 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"POT-Creation-Date: 2010-10-22 00:23+0600\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(guide:link):5
msgid "/doc/en/articles/l-redesign-3.xml"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):6
msgid "The gentoo.org redesign, Part 3: A site reborn"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(author:title):8
msgid "Author"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(mail:link):9
msgid "drobbins@gentoo.org"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(mail):9
msgid "Daniel Robbins"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(abstract):12
msgid "Have you ever woken up one morning and suddenly realized that your cute little personal development Web site isn't really that great? If so, you're in good company. In this series, Daniel Robbins shares his experiences as he redesigns the www.gentoo.org Web site using technologies like XML, XSLT, and Python. Along the way, you may find some excellent approaches to use for your next Web site redesign. In this installment, Daniel creates a new look for the site as a whole."
msgstr ""

#. The original version of this article was first published on IBM
#. developerWorks, and is property of Westtech Information Services. This
#. document is an updated version of the original article, and contains
#. various improvements made by the Gentoo Linux Documentation team
#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(version):27
msgid "1.0"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(date):28
msgid "2005-10-10"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):31
msgid "The new main pages"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):33
msgid "The site so far"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):36
msgid "So far, www.gentoo.org is showing marked improvement. In the <uri link=\"/doc/en/articles/l-redesign-2.xml\">last article</uri>, I designed a new documentation system using XML and XSLT, so all our site documentation is looking great and is serving the needs of our visitors. However, the look of the site as a whole hasn't changed; that's because I haven't really touched the HTML that users see when they initially visit our site. Our main page still looks the same as it did before."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):46
msgid "Well, it's time for that to change. As I mentioned in the <uri link=\"/doc/en/articles/l-redesign-1.xml\">first article</uri>, our main page is getting too congested and we have no room for expansion. As you can see, I've packed quite a bit of content into <uri link=\"/images/docs/l-redesign-13.gif\">the page</uri>."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):54
msgid "I can't continue piling important links and paragraphs onto the main page -- there isn't any room! Fortunately for us, real estate on the Web is absolutely free."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):60
msgid "So, to solve this problem, I'll split our single main page (index.html) into several subject-specific category pages (index-about.html, index-download.html, etc.) and create a menu system that will allow the user to easily move from one category page to another. The default page that loads when a user visits <b>http://www.gentoo.org</b> will be the \"About Gentoo Linux\" category page. This is an excellent choice because it provides general information about the project that will be of interest to first-time visitors."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):73
msgid "Site goals"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):76
msgid "Now, I'm going to outline the goals of this new \"category page\" system, as well as some general design goals that you can apply to your own projects. Then, we'll take a look at how the category page redesign meets these goals."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):85
msgid "Modularity"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):88
msgid "The new category page system needs to be modular. What does this mean, exactly? Well, at the moment I have \"About Gentoo Linux\" and \"Download/Install\" categories in mind, but in the future I may need to add \"About the Team\" or \"Support\" categories as well. Having the ability to easily add new categories in the future requires that accommodations be put in place during the design stage. I'll have to make sure that there's room for additional category links on my navigation menu, and that the layout of the page is general-purpose enough so that it can be used to present many different kinds of information. Then, adding new categories will be relatively easy and I'll be able to avoid completely redesigning the site, if in a few months I once again find that things don't fit."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):102
msgid "There is a very important second step to modular design -- the use of XML and XSLT to separate presentation from content. If you've read part 2 of this series, then you're at least familiar with this type of design. Once I have the proper XSL template created, I can generate as many category pages as I like by simply providing the proper XML. And unlike the HTML, my XML will contain no display-related information; it's pure content. We'll take a look at the XML/XSLT implementation of the category pages in the fourth and final installment in this series."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):116
msgid "General style guidelines"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):119
msgid "It's also very important that the new category layout be visually appealing. Remember, when a user types in http://www.gentoo.org, the \"About Gentoo Linux\" category page will appear first, so I want this to be an attractive page. Now, the word \"attractive\" means different things to different people, but this article presents a few good general guidelines that I am using during the design of the new category page that should apply to almost any Web site."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):131
msgid "That boxy look"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):134
msgid "For general page layout, simple is best. If you're going to organize a bunch of complicated information, why not use a master table to split the page into various regions? This will also help to ensure that various parts of the page line up, which makes for a clean, attractive design. For example, this particular type of page layout is generally not very appealing:"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:link):143
msgid "/images/docs/l-redesign-03.gif"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:caption):143
msgid "A sub-optimal page layout"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):145
msgid "However, if the same information is presented using a common master grid, the site starts looking a lot cleaner:"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:link):151
msgid "/images/docs/l-redesign-04.gif"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:caption):151
msgid "Aligned to a grid, things become less confusing"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):153
msgid "And remember, the simpler your layout, the more information you'll be able to pack into the page without annoying your visitors"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):161
msgid "Text and background color"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):164
msgid "Next, we come to color choice. I have to admit that I happen to find bright green text on a dark blue background very appealing. But let's face it -- no matter how exotic and nifty they may look, dark backgrounds are a poor choice for text regions on a Web site. People expect to see dark text on a light background, and I for one think we should give them what they want."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):172
msgid "Well, I should clarify my position. Using light text on a dark background is a horrible choice for presenting paragraphs of information, but can be quite attractive and functional for your menu bar, or a small list of links. In other words, inverted text can be a great accent, but go with a traditional color scheme for your main text content areas; you'll thank me later. This will also help to ensure that your site looks good on paper."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):184
msgid "Contrast"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):187
msgid "Besides the dark text/light background issue, there aren't many hard rules when it comes to Web site design. If you like dark colors, it's perfectly fine to make the top part of the page dark blue, for example. Now, hear me correctly: If you make the entire page dark blue, you've done a bad thing. If you make a portion of the page (preferably a portion of the page that doesn't have much text in it) dark blue, you might actually be doing a very good thing, because that dark blue will contrast nicely with your white text area and add some additional drama to your new site. In fact, a large portion of your page can contain saturated or dark colors; again, just make sure that your main text content is presented in a traditional fashion."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):203
msgid "Functional layout"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):206
msgid "I also want to ensure that the Web page is neither too cluttered nor too sparse. I suppose that all of us struggle with this challenge; some of us have a tendency to pack so much information into a page that it becomes totally unintelligible, while others include so many large margins and useless empty spaces that users are forced to scroll down several pages to find the information they need. For the new category pages, I want to use minimal margins -- just enough to keep things readable would be good, I figure. I'll only use empty spaces on the page if things are truly getting too cluttered. After all, the whole purpose of these category pages is to solve a space problem, and it would be good to concentrate as much information into as small a space as possible, as long as readability isn't compromised in the process."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):220
msgid "A high information density has another advantage: Users are less likely to need to scroll down to find the information they need. This makes the page significantly more pleasant to use. (If you don't believe me, design a couple of mock-up pages and see for yourself.)"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):230
msgid "Content supercedes art"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):233
msgid "In working on the site layout, I have quickly learned that a Web page redesign should primarily be used as an opportunity to present content (actual information that's useful to my visitors) in a readable and meaningful way, rather than just another occasion to make an artistic statement or to exude large quantities of -- er -- corporate identity. Not that artistic statements are necessarily forbidden, but if by making one I hurt the presentation of my content, then I'm not doing my visitors a favor."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):243
msgid "Once in a while, it's a good idea to step back and acknowledge that the people who are visiting our site are primarily looking for information rather than zany new approaches to Web design. If this is something you struggle with, be comforted: I, too, am tempted to focus on artsy stuff and leave all other priorities at the wayside."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):254
msgid "The result"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):257
msgid "Now that we've covered some of my redesign goals, let's take a look at the new gentoo.org category pages. Here's the new page that you're greeted with when you visit <b>http://www.gentoo.org</b>:"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:link):264
msgid "/images/docs/l-redesign-05.gif"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:caption):264
msgid "The new www.gentoo.org main page"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):266
msgid "I have to say that I'm really pleased with the redesign, and I really like the look of the new site. Notice how tables are used to break the page into four regions: the top left logo area, the black menu area, the gray infobar area, and the white main content area. Also notice that the clean alignment of these four regions makes the design simple yet attractive."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):274
msgid "Now, look at the colors. As I mentioned earlier, I'm a big fan of extremely dark Web sites. However, because a very dark site is a bad thing, I reached a compromise: Dark parts were limited to the top regions, and inverted text was used only in the menu region, the logo and the title for the floating \"Gentoo Linux Features\" box. Because these parts of the page aren't used to present large quantities of text, I'm not going to annoy my visitors. Instead, they serve as nice accents to the main (white) text content area. Here's a snapshot of the \"Download/Install\" category page:"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:link):286
msgid "/images/docs/l-redesign-06.gif"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(figure:caption):286
msgid "The www.gentoo.org download/install page"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):288
msgid "Another thing worth commenting on: You have probably noticed that the blue \"flying saucer guy\" and the red \"gentoo\" logo are from my original site. I decided to integrate these graphics into the new design so that the new main index.html page still looks familiar to my regular visitors. However, I omitted the \"flying saucer guy\" on every other page besides the main page so that more information could fit on the screen. The red \"gentoo\" logo was kept on every page because it helps to make the white content area more visually appealing and draws attention to the category title."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):302
msgid "The nav-menu and title"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):305
msgid "As you can see, the name of the current page is highlighted in bright green in the navigation menu, thanks to cascading style sheets (or CSS), and the current page name is repeated immediately below the red \"gentoo\" logo in the main content area. While I initially thought that this wasn't necessary, I found that simply highlighting the current page's navigation menu entry in green wasn't enough to provide users with an indication of what page they were on."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):314
msgid "Despite the clean look of the new site, I am cramming quite a bit of information into the page. One advantage to this is that under most display resolutions, a visitor will only need to scroll down to finish reading the main text. However, all hyperlinks should be immediately visible and accessible, requiring no vertical scrolling by the user. This makes the site as a whole easier to navigate -- a big win for usability."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):326
msgid "Lost in Xara"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):329
msgid "Just looking at the site doesn't really give you an idea of what the redesign process was like. I actually made a number of major logistical mistakes from the onset of the redesign. My greatest error was to immediately fire up Xara in an attempt to develop the new look for the category pages."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):336
msgid "Once in Xara, I wasted a lot of time focusing almost exclusively on eye candy rather than on page layout. By doing so, I put the cart before the horse and ended up creating around 20 design prototypes that I eventually had to throw away. In the end, these prototypes were of no use to me because they did not deal with how to present the content."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):344
msgid "Finally, I regained my senses, exited Xara, fired up a text editor, and wrotes the raw text that would appear on the page. Once the content was written, I developed a general page layout to present this text to the user -- no color schemes or eye candy just yet. Then, and only then, did I return to Xara and finalize the new look for the site, developing a color scheme and enhancing our logo. This time, the graphical design process went smoothly and relatively quickly because I had an existing framework (the text and layout) to direct my steps. Without this structure, I could have spent the rest of my life playing around in Xara, developing thousands of what-if design possibilities for the new site."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):357
msgid "When you redesign your site, remember that content comes first, layout second, and graphical embellishments a distant third. By taking this approach, you'll end up saving yourself a lot of time."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):366
msgid "User-centric IRC"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):369
msgid "So, I did make a few mistakes during the design process, but I also did a couple of things right, and one of them was to allow the Gentoo Linux developers to review and comment on my work as it progressed. As you may recall from my first article, my action plan identified developers as my highest-priority target audience, so getting our existing developers involved in the design was clearly a wise choice."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):378
msgid "Doing this was easy. I just kept an IRC client running and connected to our IRC channel as I normally do, and then whenever I made any significant progress, I'd generate a .png snapshot of the current site and post it to our Web server. Then, everyone in the channel could take a look and comment on my work in real-time."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):386
msgid "These developers acted as my barometer, letting me know what designs and colors were the most popular, and what types of layouts worked best. If the site design became too crowded or complicated, someone would let me know and I'd adjust the HTML accordingly. When the category page design became more finalized, I started creating tarballs of the site HTML/images so that developers could play with the code and make any necessary fixes. Thus, the IRC channel allowed the HTML to be developed in a truly user-centric way. Last, but not least, the Gentoo Linux developers really helped me to debug the HTML code so that it was rendered optimally in a variety of modern browsers."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):401
msgid "Next time"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(p):404
msgid "Well, that's it for now. Join me in my <uri link=\"/doc/en/articles/l-redesign-4.xml\">next article</uri> when I finally convert the entire site to a fully-modular XML/XSLT-based system. That should provide some excitement as well as an opportunity to look at a lot of juicy behind-the-scenes XML development details!"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(title):417
msgid "Resources"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):426
msgid "In <uri link=\"/doc/en/articles/l-redesign-1.xml\">Part 1</uri>, the author creates a user-centric action plan and introduces pytext, an embedded Python interpreter (March 2001)."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):431
msgid "In <uri link=\"/doc/en/articles/l-redesign-2.xml\">Part 2</uri>, Daniel shows off the new documentation system and sets up a daily CVS-log mailing list (May 2001)."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):436
msgid "In <uri link=\"/doc/en/articles/l-redesign-4.xml\">Part 4</uri>, Daniel completes the conversion to XML/XSLT, fixes a host of Netscape 4.x browser compatibility bugs, and adds an auto-generated XML Changelog to the site (Aug 2001)."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):422
msgid "Read the other articles in this developerWorks series about the redesign of the www.gentoo.org Web site using technologies like XML, XSLT, and Python: <placeholder-1/>"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):444
msgid "Learn more about cascading style sheets (CSS) by visiting the <uri link=\"http://www.w3.org/Style/CSS/\">CSS page</uri> at the World Wide Web Consortium, or W3C."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):449
msgid "Check out <uri link=\"http://www.xara.com/\">Xara.com</uri>, the home of Xara X -- an excellent vector drawing package for Windows. With virtually no bloat, and blazing speed, it has my personal recommendation."
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):454
msgid "Learn more about XSLT at <uri>http://www.xslt.com</uri>"
msgstr ""

#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(li):455
msgid "When you wake up, check out Sablotron, a nice, fast XSLT processor available from <uri link=\"http://www.gingerall.com/\">Ginger Alliance</uri>"
msgstr ""

#. Place here names of translator, one per line. Format should be NAME; ROLE; E-MAIL
#: ../../gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml(None):0
msgid "translator-credits"
msgstr ""