We test the site on game consoles. Part II
The second, final part of the article about testing sites on game consoles. Beginning was published yesterday
Unlike mobile phones, portable consoles have not high, but wide screens, like televisions. This means that many sites show their “big” version, although the design of the mobile version could look more successful.
')
Vita is the newest PS line and the first one including 3G devices. They are equipped with a touchpad, which is located on the back wall and is used for games, but it is not involved in the process of web surfing.
The browser in Vita is the same NetFront developed on WebKit, which for some reason is indicated in the identification string as Silk - the browser used in the Amazon Kindle.
Sites can only be displayed in landscape orientation 960x544 at a resolution of 220 ppi, since most displays are optimized for a wide image. More than eight windows can be opened simultaneously.
Although Vita is also made by Sony, its impressions are not comparable with the PS3: in the Vita browser, everything is done via the touchscreen, and the more convenient buttons are almost not involved.
Browser support
HTML5 test: 58/500
CSS3 test: 32%
The DS line has two screens and a stylus. The bottom screen is resistive, like a display, located in the back of the aircraft seats, and not capacitive, like a smartphone. DSi screens are relatively small (256x192) and low resolution.
DS uses both screens, displaying sites optimized for small screens, and treats them as one long column. Non-optimized sites are reflected on two screens at once: one at a magnification, the other at a decrease. The console does not have a multitouch, and the image can not be stretched or compressed with your fingers, so long lines are inconvenient to read. No bold and italic, and the choice of letter size is small.
Browser support
HTML5 test: 89/500
CSS3 test: failed
This device has a stylus and three cameras: two on the back panel for 3D images and video, and one for the front. Special glasses for viewing 3D are not required, but the device must be at a certain distance and angle. The depth of the effect can also be adjusted using a special slider.
The 3D image is available only in the upper, wider part of the screen, the lower half is a 2D resistive touch screen. The physical size of these screens is larger than in the 3DS model, although the size in pixels remains the same (800x240 upper screen; 320x240 lower screen), so the text looks "square". When the page scrolls to the top of the screen, gaps appear on the side because of the difference in screen sizes.
Older DS models offer Opera as a browser, while newer models already have NetFront installed by default and accessible from the main screen.
Sites are displayed in 2D, but the images use MPO format, which can be viewed in 3D at the top of the screen. MPO images are a combination of two JPEG files, where one of the JPEGs is backup. The problem is that using the browser built into the device, you cannot view MPO images online, they need to be downloaded and opened as files.
D-Pad is used to select links; a stroke appears around the selected elements. The joystick is used to scroll through the pages.
You can scale the icons using the touchscreen, and use the X and Y keys to adjust the page scale. The corner buttons L1 and R1 perform the functions Back and Forward in the browser.
When scaling text automatically adapts to the width of the screen. The browser can also be used in the background during games, for example, to find tutorials on the passage. This feature already appears on other consoles.
During testing, some sites were not fully loaded due to the fact that they were too large and the system did not have enough RAM. This problem also applies to the DSi line.
Browser support
HTML5 test: 98/500
CSS3 test: 42%
Since the release of Nokia N-Gage in 2003, manufacturers are attempting to combine handheld consoles with phones. To date, the most interesting such model is the Sony Ericsson Xperia Play, which looks like a phone, but has a PlayStation style slide.
The screen of this gadget is much higher quality than in PS Vita. Xperia Play works with Android 2.3 (Gingerbread). Each time you open the "game" panel, the screen orientation changes to landscape. In general, the sites look good, and the browser functionality is exactly the same as in any other modern smartphones.
Although Xperia Play is rather a phone than a game console, website developers also need to keep it in mind. Between smartphones and portable consoles, there is increasing competition where their functions overlap, and more and more hybrid devices will appear in the future.
Browser support
HTML5 test: 212/500
CSS3 test: 42%
New devices will pose new challenges for designers and developers. Web surfing on consoles will become more popular, as their manufacturers will release gadgets with better browsers and additional features, such as NFC for micropayments in the next version of Wii U, and voice and gestures control in IE9 for Xbox 360. Some interesting experiments on managing elements of the browser using gestures Kinect and DepthJS has already been carried out.
All three main TV consoles have or are on the way to the second screen. PlayStation 3 is already synchronized with the PS Vita PDA and allows the user to play games on the device directly from the PS3 console (Vita Remote Play). It can also be used as a second controller.
Nintendo comes with a similar offer on the Wii U: an updated console and a portable touchscreen gamepad that can be used as a keyboard. Users can share on the TV screen everything that happens on the console.
Meanwhile, Microsoft announced SmartGlass, which will allow users to connect the smartphone to the Xbox and use it as a second screen. The console syncs with any phone or tablet.
New players are also attracting new devices to the market. One of them is the Razer Switchblade. Partly this is a computer on Windows, and partly a portable console. The image on the keyboard changes depending on what content is viewed. The form it resembles a netbook, has a 4-inch trackpad in the keyboard area, which can also be turned into a second screen. According to rumors, it will work IE7.
Ouya - a gaming TV console that was announced and funded by Kickstarter, will be released in March 2013. It is a regular controller and runs on Android. It is not yet known which browser will be installed, but the device will definitely have access to the Internet.
Console browsers are in an awkward position between browsers on phones and tablets, PCs and TVs. They often act as mobile and desktop browsers, but we interact with them differently.
Jason Grigsby voiced these problems in his speech on The Immobile Web: HD TVs and iMacs have about the same resolution, but we look at the monitor from a short distance, unlike the TV screen. For a TV screen, the LNA design used in mobile devices is more suitable than the design for a large monitor. Here it is necessary to take into account not the screen size, but the distance at which the viewer is located. Even Google’s TV design patterns suggest using a mobile phone as a TV screen model when developing a TV design.
Add to this mix the ability to view the site on TV, interacting with it using the screen of another device, and everything becomes even more complicated.
We cannot predict interaction scenarios with each device, but we can use what we know about browsing the web using the console to get a general idea.
As well as the development of the site based on its mobile version, the design of the site, taking into account how it will work on the console, will make it accessible to more visitors.
Constantly improve the site so that people can access its content even from a device that does not support certain functions. Optimize it for fast download. Arrange the “anchors” in content where appropriate. See how someone will fill out forms using the console, and think about the speech recognition function for fields.
Now experiments with retina-displays look very tempting, but one should not forget about aging screens. People do not change their TVs as often as other devices, so make sure your project is still ?? Works well on poorly tuned, uneven screens with low contrast. Plus, as Cennydd Bowles points out, while the pixel density increases somewhere, it will decrease somewhere - devices with a cheap screen appear more and more.
We have already passed this. As Future Friendly teaches, the number of new devices will grow, and we will inevitably have to design sites to reflect new contexts. If we want our sites to be accessible to all, we must reckon not only with the computer screen and mobile phone. It's time to seriously think about console browsers.
Testing Portable Consoles
Unlike mobile phones, portable consoles have not high, but wide screens, like televisions. This means that many sites show their “big” version, although the design of the mobile version could look more successful.
')
SONY PS VITA
Vita is the newest PS line and the first one including 3G devices. They are equipped with a touchpad, which is located on the back wall and is used for games, but it is not involved in the process of web surfing.
The browser in Vita is the same NetFront developed on WebKit, which for some reason is indicated in the identification string as Silk - the browser used in the Amazon Kindle.
Sites can only be displayed in landscape orientation 960x544 at a resolution of 220 ppi, since most displays are optimized for a wide image. More than eight windows can be opened simultaneously.
Although Vita is also made by Sony, its impressions are not comparable with the PS3: in the Vita browser, everything is done via the touchscreen, and the more convenient buttons are almost not involved.
Browser support
HTML5 test: 58/500
CSS3 test: 32%
NINTENDO DSI
The DS line has two screens and a stylus. The bottom screen is resistive, like a display, located in the back of the aircraft seats, and not capacitive, like a smartphone. DSi screens are relatively small (256x192) and low resolution.
DS uses both screens, displaying sites optimized for small screens, and treats them as one long column. Non-optimized sites are reflected on two screens at once: one at a magnification, the other at a decrease. The console does not have a multitouch, and the image can not be stretched or compressed with your fingers, so long lines are inconvenient to read. No bold and italic, and the choice of letter size is small.
Browser support
HTML5 test: 89/500
CSS3 test: failed
NINTENDO 3DSXL
This device has a stylus and three cameras: two on the back panel for 3D images and video, and one for the front. Special glasses for viewing 3D are not required, but the device must be at a certain distance and angle. The depth of the effect can also be adjusted using a special slider.
The 3D image is available only in the upper, wider part of the screen, the lower half is a 2D resistive touch screen. The physical size of these screens is larger than in the 3DS model, although the size in pixels remains the same (800x240 upper screen; 320x240 lower screen), so the text looks "square". When the page scrolls to the top of the screen, gaps appear on the side because of the difference in screen sizes.
Older DS models offer Opera as a browser, while newer models already have NetFront installed by default and accessible from the main screen.
Sites are displayed in 2D, but the images use MPO format, which can be viewed in 3D at the top of the screen. MPO images are a combination of two JPEG files, where one of the JPEGs is backup. The problem is that using the browser built into the device, you cannot view MPO images online, they need to be downloaded and opened as files.
D-Pad is used to select links; a stroke appears around the selected elements. The joystick is used to scroll through the pages.
You can scale the icons using the touchscreen, and use the X and Y keys to adjust the page scale. The corner buttons L1 and R1 perform the functions Back and Forward in the browser.
When scaling text automatically adapts to the width of the screen. The browser can also be used in the background during games, for example, to find tutorials on the passage. This feature already appears on other consoles.
During testing, some sites were not fully loaded due to the fact that they were too large and the system did not have enough RAM. This problem also applies to the DSi line.
Browser support
HTML5 test: 98/500
CSS3 test: 42%
Testing on console phones
Since the release of Nokia N-Gage in 2003, manufacturers are attempting to combine handheld consoles with phones. To date, the most interesting such model is the Sony Ericsson Xperia Play, which looks like a phone, but has a PlayStation style slide.
The screen of this gadget is much higher quality than in PS Vita. Xperia Play works with Android 2.3 (Gingerbread). Each time you open the "game" panel, the screen orientation changes to landscape. In general, the sites look good, and the browser functionality is exactly the same as in any other modern smartphones.
Although Xperia Play is rather a phone than a game console, website developers also need to keep it in mind. Between smartphones and portable consoles, there is increasing competition where their functions overlap, and more and more hybrid devices will appear in the future.
Browser support
HTML5 test: 212/500
CSS3 test: 42%
On the horizon
New devices will pose new challenges for designers and developers. Web surfing on consoles will become more popular, as their manufacturers will release gadgets with better browsers and additional features, such as NFC for micropayments in the next version of Wii U, and voice and gestures control in IE9 for Xbox 360. Some interesting experiments on managing elements of the browser using gestures Kinect and DepthJS has already been carried out.
Second screen
All three main TV consoles have or are on the way to the second screen. PlayStation 3 is already synchronized with the PS Vita PDA and allows the user to play games on the device directly from the PS3 console (Vita Remote Play). It can also be used as a second controller.
Nintendo comes with a similar offer on the Wii U: an updated console and a portable touchscreen gamepad that can be used as a keyboard. Users can share on the TV screen everything that happens on the console.
Meanwhile, Microsoft announced SmartGlass, which will allow users to connect the smartphone to the Xbox and use it as a second screen. The console syncs with any phone or tablet.
New devices
New players are also attracting new devices to the market. One of them is the Razer Switchblade. Partly this is a computer on Windows, and partly a portable console. The image on the keyboard changes depending on what content is viewed. The form it resembles a netbook, has a 4-inch trackpad in the keyboard area, which can also be turned into a second screen. According to rumors, it will work IE7.
Ouya - a gaming TV console that was announced and funded by Kickstarter, will be released in March 2013. It is a regular controller and runs on Android. It is not yet known which browser will be installed, but the device will definitely have access to the Internet.
Website design with game consoles
Console browsers are in an awkward position between browsers on phones and tablets, PCs and TVs. They often act as mobile and desktop browsers, but we interact with them differently.
Jason Grigsby voiced these problems in his speech on The Immobile Web: HD TVs and iMacs have about the same resolution, but we look at the monitor from a short distance, unlike the TV screen. For a TV screen, the LNA design used in mobile devices is more suitable than the design for a large monitor. Here it is necessary to take into account not the screen size, but the distance at which the viewer is located. Even Google’s TV design patterns suggest using a mobile phone as a TV screen model when developing a TV design.
Add to this mix the ability to view the site on TV, interacting with it using the screen of another device, and everything becomes even more complicated.
What can we do now
We develop designs for mice and keyboards, for T9 keyboards, for portable game controllers, for touch interfaces. In short, we are faced with a greater number of devices, information entry capabilities and browsers than ever before.
Ethan Marcott, “Responsive Web Design”
We cannot predict interaction scenarios with each device, but we can use what we know about browsing the web using the console to get a general idea.
As well as the development of the site based on its mobile version, the design of the site, taking into account how it will work on the console, will make it accessible to more visitors.
Constantly improve the site so that people can access its content even from a device that does not support certain functions. Optimize it for fast download. Arrange the “anchors” in content where appropriate. See how someone will fill out forms using the console, and think about the speech recognition function for fields.
Now experiments with retina-displays look very tempting, but one should not forget about aging screens. People do not change their TVs as often as other devices, so make sure your project is still ?? Works well on poorly tuned, uneven screens with low contrast. Plus, as Cennydd Bowles points out, while the pixel density increases somewhere, it will decrease somewhere - devices with a cheap screen appear more and more.
We have already passed this. As Future Friendly teaches, the number of new devices will grow, and we will inevitably have to design sites to reflect new contexts. If we want our sites to be accessible to all, we must reckon not only with the computer screen and mobile phone. It's time to seriously think about console browsers.
Source: https://habr.com/ru/post/163021/
All Articles