Original in: http://stopdesign.com/log/2004/12/16/small-screens.html
Take care of small screen equipment
16 December 2004
Earlier last week, I made a speech in the Web Design World in Boston. Clearly the Conference Scene is Heating Back Up, As Budgets for Events And Off - Site Training Seem To Be Reappearing. "" Beautiful User Interface with CSS Design "and" Throw the Form Out of Window ") Fun. After my last speech is over, I have to rush to the airport to rush by flight. So I don't have flowing down and listening to the reception or more exchanges with more participants in the next two days.
However, I summed up a few questions raised after a few speeches. These issues have been made very well, but also the problem that many of us will encounter every day. Considering this, I think I should share the problems mentioned after these people, and it is my impromptu answer - some are quite horizontal, and some are not good.
I don't always always answer on the spot, but I will help find questions when I may. Also I want to really understand what my friends ask what will be helpful. Whether it is, these problems trigger a fascinating discussion, they will attract people who can help provide answers or can point you to the right direction.
One of the questions to be discussed in Boston is how to solve portable devices (like handcuffs and PDAs). In particular, [Use my own words] There is a friend feeling frustrated by some devices, such as the Pocket PC, which ignores the style sheet that is linked through the Handheld Media Type, but the style sheet specified as the Screen media type. It makes a part of the CSS, so that some styles designed for larger desktop browsers. If we can hide the style table of the Screen Media Type in the mobile browser as in Netscape 4, he will not complain. However, because Pocket PC has weakened the CSS, plus it on a small window that is also trying to put a design for desktop browsers, so he feels unlikely.
I have also heard similar complaints on the Danger's Hiptop.
First, I consider why advanced mobile device browsers do not support Handheld media types. Then I thought of a temporary emergency solution. (I have to state that these are just my own observations and theories, I am completely foreign man for mobile industries.)
Show of Hands for Handheld Support?
So why is there been supported now? Why is it in the beginning of the norms of the manufacturer of the browser?
We have seen mobile phones and PDAs that support web browsing feature (with certain functions) in the past year. They have been getting better and better. Manufacturers manufacturers who manufacture these browsing software want to use the product's customers to try to browse the webpage as much as possible. If the mobile browser is not using any style as in 1996, it does not use any style. Or generate a blunt drop between the appearance in the PDA. If the mobile browser does not display as much as possible, then some users can disappear. These browsers have tried to display as much styles as possible for each site. This also often causes problems to those developers who know how to provide Handhelp media types.
This is a question of having a first chicken or a first egg. Because - now - There is almost no website to provide a special style for handheld, mobile browser software companies have not provided built-in support for the Handheld media type. However, designers and developers will only wait until there are at least some browsers that can support Handheld style sheets, they will only use this technology and will immediately see the benefits of providing these additional style sheets.
Obviously, the problem of mobile browsers is not unique. It will continue and will only become more popular. We must take into account thousands of tries to browse mobile devices in our site. And, we need to design the site, build it in any place. Including the equipment used by disabled people, there are many of us, we have not seen a variety of browsing tools in the market. We don't want to go back to 1997, then we were forced to build different versions of the site for different browsers entering the market. It is true that in some cases, in order to obtain a better mobile device experience must optimize a site, this may mean a completely different architecture, and separate the HTML structure separately. But if we have the opportunity, we all want to optimize the design or presentation of the content according to the type of display device.
The current situation needs to be changed. It requires the browser manufacturer and the actions of designers and developers who create front sites. Those sites have set an example for other sites. Both are not thinking about it first, they just do it.
Before I continue, I should mention at least one company browser can correctly support the Handheld Media Type. Opera's Small-Screen Rendering technology has taken a considerable step in handling the challenge of the mobile device to display the web page. Since most of the page does not use the Handheld style sheet, Opera will use SSR technology to optimize page display. However, when Opera detects a list of Handheld media types, Opera assumes that the author has optimized the page for small screen devices. It will correctly apply the Handheld style sheet, and disable SSR to prevent the author from being disrupt. . So in Opera, you can display as the author wants to use the side of the author's hopes. But a page without a Handheld style sheet will apply SSR mode, a sensible compatibility plan.
Until that day ...
Although Opera has made a good role model, what should I do now? We don't support Handheld media types? We don't have the same HTML, how to design and create sites with robust style sheets, order no equipment access site When are the websites can still be so attracted and available?
I am an answer to this friend, including using JavaScript to detect the screen size of less than x to force the Handheld style sheet. Some people may not like to detect browser types or window width detection with JavaScript. However, when more browser supports handheld media types, we need some practical compatible measures to be effective for small screen optimization and design.
I first suggested that he joined a backup Handheld media style sheet. Then use JavaScript to detect smaller screen sizes. If it is detected, the media type of the backup style sheet is changed to Screen and Handheld, add (and overwrite) the default Screen Media Type Table. The spare style sheet (designed to mobile browser) may contain the removal of floating objects and absolute positioning rules for page layout, and rules that remove all columns and fixed widths of the container. Ideally, the Handheld style sheet allows the design to become a single column, variable width to automatically adapt to the screen width.
I have the problem of this proposal? Many of these new mobile browsers don't fully support JavaScript, even can't. Others may disable JavaScript by default because of security reasons or "user convenience".呸, brag!
Second curtain
So what will it do?
If we first apply a very simple style sheet for the screen and handheld media type. This basic style sheet contains only rules that specify colors, words, link processing, and simple list style. It does not include complex floating columns or absolute positioning. This style sheet can take care of all devices that support CSS, regardless of whether it does not support Handheld Media Types.
Then, we use JavaScript to detect a wide screen - usually implied a desktop browser. If the browser supports JavaScript, and detects enough width (assuming is 620px or bigger - even 750 if your design can only work at 750 or higher), here we not only assume a desktop browser to use And the browser with sufficient window size can be displayed as the design of multi-column typography. In this case, we join the main style sheet to divide the page area into a standard layout. Browrics that do not support JavaScript (or disabled) or browsers who have not reported enough screen widths can only get basic style sheets.
It seems that it will work. Of course, I only know enough JavaScript to make an existing code, but I still write a copy of myself. So I don't even try to write these or do an example. Other friends, please comment or write some code to see if this idea is feasible. I will say that this is true that the root CAMERON ADAMS is similar, and he has recently proposed an opposite issue: how to provide more content for a wider browser window. (See His Resolution Dependent Layout (not dependent on the resolution layout method), 21 Sep 2004.) In this example, I just suggested that the back is backward on the basis of Cameron. My idea is to set up a simple style sheet for the screen and handheld media to take care of some minimum requirements for CSS devices. The wider window width is detected to apply a more advanced style table to decompose the page into multiple columns. Cameron's idea is to further provide more styles for the ultra-wide screen.
Prevent fouc
If it is feasible above, I have to say a word. I will suggest that if the widescreen is detected, you can set a cookie via JavaScript. When the cookie is set, the server-side code can detect That cookie in the next page, and decide whether to add a main style sheet before the HTML is transferred to the client. In this way, we prevent the FOUC problem that occurred in the page after the first browsing page.
Feedback, Expansions, Modifications, Pitfalls? Code Samples, Examples, or Other Ideas?
Posted at 5:00 PM in CSS, Events, Technology
