See how the Boston Globe uses HTML5 to implement responsive design.

Note:Some fundamental breakthroughs must be made before HTML5 truly changes the development models of various platforms. One major breakthrough this year is the development of "responsive design. Basically, responsive design requires that the content be adapted to any screen size. BostonGlobe.com was launched in Boston Globe, the most striking response design case this year. This article describes the conversation between ReadWriteWeb and the BostonGlobe Development Team Fliament, which details some issues encountered during development. I hope this article will bring some experiences and experiences to developers.

On Monday, bosonglobe.com, a paid website for mobile phones, was released. Do not confuse it with official free flagship site Boston.com. This is not that interesting. However, the HTML5 development community appreciates BostonGlobe.com and praises the adjustment of website content based on the screen size as an innovation. This innovation is called a responsive design.

The responsive design allows the Globe content to be re-adjusted based on the available size of the screen. this is a victory in the contest against the display of mobile devices, screen sizes, and content on mobile devices. The following is an in-depth discussion with the founder of Globe responsive design.

The Filament team took a big step towards html5.

The Boston Globe received support from the Fliament team. The Fliament team is affiliated with a design development company in Boston, which is dedicated to developing auxiliary functions. The following is the full text of the conversation between ReadWriteMobile and the designers and partners of the three Fliament teams. These three have made great contributions in the Development of responsive design. Mat Marquis is the main player in Globe development. ToddParker and ScottJehl are his partners. EthanMarcotte, father of responsive design, cannot comment at this time.

The following video shows how the response designer of BostonGlobe.com works. (Note: The video cannot be played. I guess the website has an IP address limit .)

How is this project started?

ToddParker: I think we should officially start implementing this project in November. The preparation of the Interface Template continued to deal with designers until the end of April. Then we made some overall preparations until the end of the summer, and then the project entered the formal implementation stage.

Technical challenges

I think this technology only appears in similar applications such as blogs and folders. They are all scattered fragments and do not have a complete system. I think a user can say that this function is very important to them. This technology takes more time and testing than general web development, while general web development only needs to put several parts together.

Therefore, when it comes to technical difficulties, I think it should be media queries. Media queries are required for many things, but the IE version downloaded currently does not support this. Therefore, the first thing we need to do is to write a piece of code to perform media queries. Although there are other ways to implement the same function, it is too slow for our needs, So we created a response to JS, this is the first step that we must solve to implement this project. We have spent a lot of time on it.

Another major challenge is that we are solving the problem of responding to images. All the work we have done so far has taken the move-first approach. If you visit the Globe site, you will find that the layout of the article has a width of 1000 pixels, they are very large and rich in color, like a large film. We need to reference small images in HTML. Here we use a small trick. If you use a tablet or desktop and support download response mode, you can access high-resolution images; if you use a mobile phone, you can access low-resolution images. If you use a browser or tablet, you can access high-resolution images. Therefore, sending images to corresponding devices is another technical difficulty we need to solve. It takes us a lot to implement this function in the CMS environment.

Challenges brought by advertising

Marquis:I think one of the real challenges is that I don't know what kind of challenges I will encounter. These challenges may be problems I have never encountered before. Therefore, this requires a new solution, but there is no answer now. This is an arduous task.

Parker:I think we have done a good job in solving these problems with authority. Advertisement is still a tough issue. Using JavaScript to implement the advertisement function adds a lot of problems to the page. Putting the content in the sandbox without making a mess of the entire page is indeed a very tricky problem.

Marquis:Now we have a better solution. The general principle is that from the user's perspective, the more prominent we are, the more successful we are. We didn't leave too many blank spaces or occupy advertisements on the whole page. We only have two box advertisements and two hanging boxes. These operations are very simple. We can put these in the sandbox to avoid these advertisements damaging other content on the web page.

Parker:In addition to the technical aspects of advertising, the challenges brought by advertising also need to ensure that advertisements can run well according to our solutions, which is indeed very tricky. Another problem is that the way advertisement is sold is not implemented according to our solution. They sell the blank parts to advertisers. We have covered such a large scope and there is no way to differentiate them. Is this suitable for an Android tablet of 7 inch? Is it suitable for Kindle? Therefore, we only add one advertisement and use CSS on the page to make it look unique. You see, this is a single advertising model.

Problems caused by device identification and adaptation to screen size

Marquis:So far, we have determined what content to display and what features to provide based on the screen size. So there is no such situation. "OK, if the user is using the android client, they get XYZ. If the user is using the iPad, they get other content ." If you are using a touch device, you need to add Javascript to implement specific functions and intentions. Therefore, we only provide specific functions for specific users. We don't mean that iPad users use this layout, but what kind of layout a device of a certain size will use.

Parker:We have never performed user agent detection. This is a big taboo. Therefore, the website is completely open. We focus on performance and compatibility, and we detect devices to dynamically load content as needed. This is why the downloaded content of each device has a very simple experience. This tablet may support touch events, but not the other one. Because of the different resolutions, the obtained layout will be different.

Marquis:Obviously, our plan does not include the ability of anyone to open it with a game host in all circumstances, but it did do a great job recently when someone did.

Parker:I think the biggest advantage is that we are taking an unknown approach, rather than focusing on the needs of specific users. Our method fully focuses on compatibility, so that when we use jQuery, we get the test device (we get these devices continuously ), when testing these devices we have never seen before, Globe looks great and we don't need to worry about compatibility issues. As devices are continuously available, this is a compatible method and can be used on old devices because we are doing incremental enhancement. Soon afterwards, you will be able to read Globe on either Newtons or older Palms or similar devices.

Why is this function implemented now?

Parker:I think, maybe it should be implemented a year and a half ago. This is just a problem of combining some technical fragments.

Marquis:In my opinion, some aspects should be implemented before. I mean, HTML5 provides more available interfaces for the target function, for example, checking whether the device provides touch screen support. Technically, this is achieved through HTML5, although not implemented using HTML5 tags. However, there is no doubt that HTML5 provides support for specific downloads. Speaking of the tag itself, HTML5 provides us with many features through other semantics. Using HTML4, these functions can also be implemented, but the markup is not so rich in semantics.

Parker:For us, we are always concerned about universal access. We spent most of our energy on this, and it has been 10 years, especially me. I think most people are just one step slower when they are working on these technical fragments. Now we have core tools and we need to make them available. For example, we wrote a book about incremental enhancement a year ago. That is the basis for creating Globe. Add a concise HTML language in CSS and JavaScript in a concise and inconspicuous way. Now we have made more differences, so we can provide more compatibility to give users a better experience. To put it bluntly, what we do all depends on the user's screen size. Next, we will turn the target to the layout.

Marquis:I think my favorite example is the text-filling game we plan to play. It looks like a small part on the website, we started to use tags generated by the server with rich semantics. Therefore, no matter how compatible your device is, you can get this riddle game, just like filling in the answer in a smooth newspaper. There is no difference. In the future, if your browser supports local storage, that is, the browser can store data, we can add a button to allow users to save unfinished games and play them next time.

What is the next step in response design?

Paker:We have done a lot of application design or similar content for the enterprise. In my opinion, doing more practical things will be a challenge. The global report proves that some cool things can be made in the content layout. However, if you have an application that has a wide array of visual guis, or you are using table data similar to a business application. I think this is the next thing we need to prove. I am confident that this is only a matter of time. We are doing similar projects for customers in this field. So this is an interesting moment.

Other challenges

Marquis:Third-party services are one of the greatest challenges we face. We have to work with them to find the tag and script they provide by default.

Paker:One thing to consider during the design process is the wide scope of the target device. From smartphones to wide-screen desktops, from 1200 pixels to larger pixels. Therefore, when designing these web pages, we think about what kind of products we will get together with these designs.

There is a very close relationship between Globe and Upstatement. There are still many things to be done about the screen size. I think it will definitely change the design process, because no one will stick to the same form.

Marquis:There is no process of transition between them. When you hand it over to the next team, they just run it. They need regular conversations. Frequent communication is required between teams.

Scott Jehl, responsible for UI in Filament Group, joined our conversation to discuss the tools they used in development.

What tools are you using?

Scott Jehl:Most of our websites use jQuery. We use jQuery Mobile in several places, such as photo and touch interaction. In my opinion, before loading jQuery, we create a custom framework for the code to handle the dynamic loading of JavaScript. Therefore, we only need to load a small part of the content, and then dynamically load the remaining part. This content makes it very fast. It is a good behavior.

Of course, it mainly uses jQuery, and then the plug-ins on it not only make the layout visually corresponding, but also act. Changing the behavior of all components, adapting to touch, and different interactions and conditions will make the Emotion not in any other aspect of the determined content.

In many ways, we use jQuery in the same way as other sites. JQuery does nothing. As a framework, it will provide you with tools that can be used, and we will develop on this basis. I think the main difference is that this is not a unique feature for Globe. We find that if we dynamically load jQuery, it will be better on the old version of the device. For example, the old version of Blackberry, 4.5 or 5 does not run jQuery. Because the website creation method may be delayed in the game, and the basic functions provided by such devices can always be better.

This article is compiled from Lisober, the original address.

Source: webapptrend.com