Responsive design: The HTML5 response design of bosonglobe.com

Article Description: See how the Boston Globe is designed with the help of HTML5.

Translators Note: before HTML5 truly changes the development model of each platform, certain fundamental breakthroughs need to be made. A major breakthrough this year is the development of "responsive design". In a fundamental sense, responsive design requires that content be adapted to any screen size. The most compelling case for this year's response-style design is to Boston Globe launch of Bostonglobe.com. This article describes the conversation between ReadWriteWeb and Bostonglobe's development team Fliament, which details some of the problems encountered during development. I hope this article can bring some experience and experience to the developers.

In Monday, the Boston Globe released a pay-for-phone website,-bosonglobe.com. Don't confuse it with the official free flagship site Boston.com. This is not so interesting in itself. However, the HTML5 development community praised Bostonglobe.com, praising the content of the site based on the size of the screen is a kind of innovation, this innovation is called the response design.

The responsive design allows globe content to be readjusted according to the available dimensions of the screen, which is a triumph in this contest with mobile devices, screen sizes and content on mobile devices. The following is a deep discussion with the founder of the Globe response design.

The filament team made a big step toward HTML5.

The Boston Globe is supported by the Fliament team, a fliament team affiliated with a design development company in Boston, which is dedicated to developing accessibility features. Here is a transcript of the conversation between Readwritemobile and the three Fliament team's designers and partners, who have made a great contribution to the development of responsive design. Mat Marquis was the main force in Globe's development, and Toddparker and Scottjehl were his partners. Ethanmarcotte, the father of responsive design, is inconvenient to comment at this time.

See how Bostonglobe.com's response designers can achieve this through the video below. (Note: Video can not play, guess is that the site has IP restrictions.) ）

How this project was started

Toddparker: I think we should have officially started this project in November. Interface template preparation, and designers to deal with until the end of April, and then we did some overall preparation until late summer, after the project into the formal implementation phase.

Technical challenges

I think that this technology is currently only in the blog, folders and other similar applications have appeared. are scattered fragments, without a complete system. I think one of the users will be bold enough to say that this feature is important to them. Because this technology takes more time and testing than a typical web development, general Web development just needs to put a few pieces together.

Therefore, when it comes to technical difficulties, I think it should be media inquiries. Many things have to do with media inquiries, but the current version of IE downloaded to this is not supported. So, the first thing we have to do is write a piece of code to implement the media query. Although there are other ways to achieve the same functionality, but it is too slow for our needs, so we create response JS, which is the first step we have to implement this project, we spend a lot of time on it.

Another big challenge is that we are solving the problem of responding to pictures. So far, all the work we've done has taken the form of moving first. If you visit the Globe site, you will find that the article's map is 1000 pixel wide, they are very large and colorful, like a large film. And we need to refer to the smaller picture in the HTML, here's a little trick that you can use if you're using a tablet or a desktop, and you're supporting the download response mode, you'll be able to access high-resolution images, and if you're using a mobile phone, you're accessing low-resolution images, and if you're using a browser or tablet, A high-resolution picture is accessed. Therefore, to the corresponding device to send the corresponding picture is another technical difficulty we need to solve, in the CMS environment to implement this function does take us a lot of effort.

The challenges posed by advertising

Marquis: I think one of the real challenges is not knowing what challenges are going to be, and these challenges may be problems that have not been encountered in the past. Therefore, this requires a new solution, but now there is no answer. This is going to be a difficult task.

Parker: I think we've done a good job of dealing with these issues authoritatively. The problem that is still more tricky is advertising. Using JavaScript to implement AD functionality can add a lot of problems to the page. Putting the content in the sandbox and not messing up the whole page is a tricky problem.

Marquis: Now we have a better solution. The general principle is that the more prominent the user's point of view, the more successful we will be. We didn't leave too much space, we didn't have an entire page of ads, we only had two box ads and two pop-up ads, which were very simple to handle. We can put these in the sandbox so that the ads don't break other content on the page.

Parker: The challenges of advertising in addition to the technical aspects of advertising, we also need to ensure that the ads in accordance with our program can run very well, it is very difficult indeed. Another problem is that the way advertising is sold is not implemented according to our plan. They sold the blank part to the Advertiser. We have covered such a large scale that there is no way to differentiate them. Is this a good fit for a 7-inch Android tablet? Is it right for the Kindle? So we just add an ad and use CSS on the page to make it look unique. You see, this is the pattern of a single ad.

[1] [2] Next page