负责任的回应：开发Greenbelt网站

编程知识更新时间:2023-04-30 00:35:18

As of December 2013, we handed over the Greenbelt website to Greenbelt Festivals and are not now involved with the project.

截至2013年12月，我们已将Greenbelt网站移交给了Greenbelt Festivals，并且目前尚未参与该项目。

Earlier this week edgeofmyseat (that is to say Drew and I) launched the all-new Greenbelt website. The site was designed by Wilf Whitty of Ratiotype, and brings the strong visual identity that he has developed for Greenbelt printed material to the website.

本周初edgeofmyseat （也就是Drew和我）启动了全新的Greenbelt网站。该网站是由Ratiotype的Wilf Whitty设计的，并将他为Greenbelt印刷材料开发的强烈视觉识别带入网站。

This is a really special project for us. Our company has a long working relationship with Greenbelt Festivals, we have for many years looked after their box office and customer database. We are also however Greenbelters and Greenbelt volunteers, onsite Drew volunteers with the official photography team and I volunteer as a floor manager in the GTV Studio. We love the festival, so it was always going to be a labour of love as well as an interesting client project.

对我们来说，这是一个非常特别的项目。我们公司与Greenbelt Festivals有长期的合作关系，多年来我们一直在照顾他们的票房和客户数据库。但是，我们还是Greenbelters和Greenbelt的志愿者，还是官方摄影队的现场Drew志愿者，而我也是GTV Studio的地板经理。我们热爱这个节日，所以它总是充满爱心，也是一个有趣的客户项目。

Greenbelt placed a lot of trust in us to design the architecture of the site, and what we tried to do from the outset was provide them with an infrastructure not just for the main site, but for other projects in the future. In doing so we’ve met a lot of interesting challenges and both Drew and myself will be writing about these in the coming weeks.

Greenbelt非常信任我们设计站点的体系结构，而我们从一开始就试图为他们提供不仅用于主站点的基础架构，而且还为将来的其他项目提供基础架构。为此，我们遇到了许多有趣的挑战，Drew和我自己将在未来几周内就这些挑战进行写作。

My role in this project was mostly on the front-end, and so this post is to outline some of the decisions that went into the front-end of the site. All of these points probably deserve their own post, and I’ll expand more in future weeks rather than create an epic Friday afternoon essay.

我在这个项目中的角色主要是在前端，所以这篇文章是概述一些进入网站前端的决策。所有这些观点可能都应该写自己的文章，在以后的几周中，我将进一步扩大工作范围，而不是撰写史诗般的星期五下午的论文。

响应式设计 (A responsive design)

From the outset we knew we wanted to provide the site with a responsive design. It makes absolute sense for Greenbelt, the festival has always embraced new technology and mobile – there are iPhone and Android apps developed for the festival guide. We know there are a lot of people onsite at the festival using mobile devices and also who use them at home.

从一开始我们就知道我们想为该网站提供一个快速响应的设计。这对Greenbelt绝对有意义，音乐节一直采用新技术和移动技术-为音乐节指南开发了iPhone和Android应用程序。我们知道音乐节现场有很多人使用移动设备，而且他们在家中使用它们。

That said, I wanted to built the site in a responsive way but without creating a reliance on JavaScript or bloating the front-end. I wanted to be able to take a sane approach to responsive design that wouldn’t store up a whole bunch of technical debt for me to wade through every time I needed to make a change. I also wanted to support old browsers in line with what I knew from looking at the statistics for the existing site – but in a way that made it easy for me to drop the extra stylesheets when they started to disappear from the stats.

就是说，我想以一种可响应的方式构建该网站，但又不依赖JavaScript或膨胀前端。我希望能够采用一种明智的方法来进行响应式设计，这样就不会积a很多技术债务，而我每次需要进行更改时都可以避免。我还想支持旧浏览器，这与我从查看现有网站的统计信息时了解到的情况一致，但是当我的多余样式表开始从统计信息中消失时，我可以轻松地删除这些样式表。

I’m not into cleverness for it’s own sake, so if we were doing responsive design it was going to be a responsible responsive design, progressively enhanced to support as many users and devices as possible.

我并不是出于自己的聪明才智，所以如果我们进行响应式设计，它将是一个负责任的响应式设计，并逐步增强以支持尽可能多的用户和设备。

拥抱一个网 (Embracing the one web)

I was very keen that we didn’t offer a cutdown version of the site to people on mobile devices. I wanted someone on a phone to be able to access all of the content and the phone and tablet versions of the layout to be understandable in the context of the desktop layout. My aim was that the content was the same no matter what you used to access it – embracing a one web approach.

我非常希望我们不向移动设备上的用户提供该网站的精简版。我希望电话中的某人能够访问所有内容，并且在桌面布局的上下文中可以理解该布局的电话和平板电脑版本。我的目标是无论您使用什么内容访问内容都是相同的-拥抱一种Web方法。

I am using a mobile first approach, with media queries loading in the layout and changed navigation for larger screen widths. This means that mobile devices and those browsers that do not support media queries get the basic stylesheet. This contains all the text formatting that will make the site readable. The exception to this being the older versions of Internet Explorer that made a significant appearance in our server statistics – and I explain my approach there below.

我正在使用移动优先方法，在布局中加载媒体查询，并为更大的屏幕宽度更改导航。这意味着移动设备和不支持媒体查询的浏览器将获得基本样式表。它包含使站点可读的所有文本格式。 Internet Explorer的较旧版本是一个例外，它在我们的服务器统计信息中占有重要位置-我在下面解释我的方法。

它必须超级快-每个人 (It had to be super fast – for everyone)

As Bruce Lawson pointed out in a post yesterday, speed is important. Even if a user has a large screen, it doesn’t mean that they are actually on fast broadband. In our case it was highly likely they are using mobile broadband or slow wifi while at the festival. Therefore instead of worrying especially about load times for mobile devices, we worried about load times for everyone. From a front-end perspective that meant compiling together CSS where appropriate, not writing bloated CSS and mark-up, ensuring images were optimised as much as possible and served quickly. While optimising the front-end was important – serving these assets quickly turned out to be the most important thing. Read Drew’s post on How to Make Your Website Fast.

正如布鲁斯·劳森（Bruce Lawson）昨天在一篇文章中指出的那样，速度很重要。即使用户有大屏幕，也并不意味着他们实际上在快速宽带上。在我们的案例中，他们很可能在节日期间正在使用移动宽带或慢速wifi。因此，我们不必担心移动设备的加载时间，而是担心每个人的加载时间。从前端的角度来看，这意味着在适当的情况下将CSS编译在一起，而不是编写ated肿的CSS和标记，以确保尽可能优化图像并快速提供服务。尽管优化前端很重要-Swift为这些资产提供服务是最重要的。阅读Drew的文章“ 如何使您的网站快速运行” 。

What we ultimately didn’t do was attempt to serve different images at different breakpoints, instead preferring to try and optimise all images and serve them quickly. As already mentioned many users may be at standard desktop size yet using mobile data connections and a small images for small screens approach wouldn’t help them. I am following with interest the responsive images debates and this may well be something we revisit. All assets are served via a media server built as part of the project so recreating assets for a future responsive images strategy is a possibility.

我们最终没有做的是尝试在不同的断点处提供不同的映像，而是更喜欢尝试优化所有映像并快速提供它们。如前所述，许多用户可能处于标准桌面大小，但使用移动数据连接和用于小屏幕的小图像方法对他们没有帮助。我感兴趣的是响应式图像辩论，这很可能是我们重新审视的事情。所有资产都通过作为项目一部分构建的媒体服务器提供服务，因此有可能为未来的响应式图像策略重新创建资产。

维护和提供旧浏览器 (Care and feeding of old browsers)

When I was in the final stages of browser testing the site, I was making silly comments about IE6 on Twitter and was surprised at the number of people who acted with some incredulity that we would “support IE6”. Not supporting IE6 was never an issue, it’s a browser people use, it shows up in the logs. It may well just be people in offices who still use IE6 checking the festival date to fill in a holiday form, but I am going to support them.

当我处于浏览器测试站点的最后阶段时，我在Twitter上对IE6做出了愚蠢的评论，并对我们会“支持IE6”的某些人采取令人怀疑的态度感到惊讶。不支持IE6从来不是问题，它是人们使用的浏览器，它显示在日志中。可能只有办公室里的人仍在使用IE6检查节日日期以填写假期表，但我将为他们提供支持。

That said, I will not reduce the experience for the majority in order to support legacy browsers. Support does not equal “looks the same” I am also very against solving problems before I have them with a starting point of a mass of polyfill JavaScript as some kind of “boilerplate”.

就是说，我不会减少大多数人对旧版浏览器的支持经验。支持并不等于“看起来相同”，我也非常反对解决问题，然后再以大量的polyfill JavaScript作为某种“样板”作为起点。

Looking at the stats our Internet Explorer users were split mostly between IE9 and IE8. The site worked beautifully on IE9, the problem we had with IE8 was that our media queries – used to deliver the mobile first design – are not supported. I could have used respond.js to polyfill media query support for Internet Explorer 8 and below but I don’t see what the benefit of doing so really is. IE8 users are on a desktop and a fixed width layout is appropriate, so as part of the compilation process for the CSS we compiled together all of the layout CSS and served that to IE8 in a conditional comment with an additional stylesheet to fix the width at 940 pixels. With a few lines of JavaScript to polyfill some selectors we were done. As IE8 is using the main CSS any changes will be compiled into the CSS for IE8 and I don’t have the overhead of maintaining different stylesheets for browsers that are going away.

查看统计信息，我们的Internet Explorer用户主要分布在IE9和IE8之间。该网站在IE9上运行良好，而IE8的问题在于，不支持用于提供移动优先设计的媒体查询。我本可以使用response.js为Internet Explorer 8及更低版本提供polyfill媒体查询支持，但我看不出这样做的真正好处是什么。 IE8用户在桌面上，并且固定宽度的布局是合适的，因此，作为CSS编译过程的一部分，我们将所有布局CSS一起编译，并在条件注释中将其提供给IE8，并附加了样式表以将宽度固定为940像素。用几行JavaScript来填充一些选择器，我们就完成了。 IE8使用主要CSS时，所有更改都将被编译到IE8的CSS中，而我不必为即将淘汰的浏览器维护不同的样式表。

As you can imagine IE6 and 7 needed a little more shoehorning to get them to behave but they also are served the old IE CSS along with additional CSS to prod difficult elements into place. It turned out to be pretty trivial to serve most of the layout to IE6 and 7 and the number of IE7 users we have in particular warranted that extra work. In the future we may just serve IE6 the basic styles as usage drops off.

您可以想象IE6和7需要更多的努力来使它们发挥作用，但是它们也可以与旧的IE CSS以及附加的CSS一起使用，以将困难的元素放置到位。事实证明，将大多数布局提供给IE6和7都是非常琐碎的，我们特别保证了IE7用户的数量，因此需要额外的工作。将来，随着使用率的下降，我们可能只为IE6提供基本样式。

HTML5 (HTML5)

If you look at the source the site has an HTML5 doctype however we are not, at this point, using HTML5 semantic elements. The reason for this being that I wanted to be able to support old browsers without the use of JavaScript or adding redundant mark-up. That said it probably would take no more than a day to switch the site to using HTML5 elements in the mark-up once we get to a point with those old browsers that we feel happy just serving them the mobile stylesheet. All of the mark-up is templated rather than being mixed into the PHP. I also tried to avoid clarifying selectors with an element extensively in the CSS – meaning that .wrapper for example could select div.wrapper now and section.wrapper in the future.

如果您查看源代码，则该站点具有HTML5文档类型，但目前我们还没有使用HTML5语义元素。原因是我希望能够不使用JavaScript或添加冗余标记就能支持旧的浏览器。这就是说，一旦我们了解到那些很高兴为他们提供移动样式表的旧浏览器，那么将网站切换为在标记中使用HTML5元素可能只需要一天的时间。所有标记都是模板化的，而不是混入PHP中。我还尝试避免在CSS中广泛使用元素来阐明选择器–例如，.wrapper可以现在选择div.wrapper，将来再选择section.wrapper。

The big use of HTML5 on this site is in the media section. All of the video and audio content is served as HTML5 with Flash for fallback. We are currently using encoding to encode the various formats for video.

该站点上HTML5的主要用途是在媒体部分。所有视频和音频内容均作为带有FlashHTML5提供，以供后备。我们目前正在使用encoding对视频的各种格式进行编码。

导航 (Navigation)

The hardest part of the front-end build was the navigation. There is an awful lot of it and some of it is fairly complicated – for example the facets in the contributors section. I’m pretty pleased with the end result that Wilf, Drew and I came up with, I’m sure it can be refined as we see how people use it and navigate in practice.

前端构建中最困难的部分是导航。其中有很多，而且有些相当复杂–例如，“ 贡献者”部分中的各个方面。我对Wilf，Drew和我想出的最终结果感到非常满意，我敢肯定，随着我们看到人们如何使用它并在实践中导航，它可以得到完善。

…放松 (… and relax)

I can’t remember the last time I was so nervous when a site went live. We really wanted to produce something that would bring the festival to people all year round, that Greenbelters would love. Hearing good reactions from other people who love the festival was worth a lot. Greenbelt produce a huge amount of content, which previously was spread over various sites such as Flickr and YouTube. Being able to centralise and make use of that content really has been one of the big challenges of the project, and it is lovely to see people enjoying the effort that has been put in by so many people over the years.

我不记得上一次网站上线时我如此紧张。我们真的很想制作某种东西，让格林贝尔特人很喜欢全年都会把这个节日带给人们。听到热爱节日的其他人的良好React非常值得。 Greenbelt产生了大量的内容，这些内容以前分布在Flickr和YouTube等各种网站上。能够集中并利用该内容确实是该项目的一大挑战，很高兴看到人们喜欢这么多年来许多人付出的努力。

It doesn’t end here, we’re very happy that we have a continued involvement in the site as well as the festival and I’m really looking forward to helping Greenbelt share all the fantastic stuff they are doing at the festival and throughout the year.

事情还没有结束，我们很高兴能继续参与该网站以及音乐节，我真的很期待能够帮助Greenbelt分享他们在音乐节以及整个音乐节中所做的一切奇妙的事情。年。