If you want to serve a higher-resolution image for Retina displays, without penalizing loading times for lower-density displays (like those of iPad 2 and iPad Mini), you can mark up your image element to change the image source when the browser detects a higher pixel density. Note that this is only supported from iOS 7 onward. W3C has specified a new attribute for the element that defines variants of the same image to serve different resolutions for content images: srcset. If you are setting up different viewport sizes, you may also want to serve different images to fit various device resolutions. Read all about them in the W3C Media Queries recommendation. There are additional descriptors and ways of working with media queries. Insert the following markup into your element to tell the device at what scale you want to render the page: W3C recommends that if “the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.”įor better text and image rendering on web apps or pages designed specifically for mobile devices, its recommended that you reset the initial block and zoom factor by using a meta viewport element. There are some complicated reasons for this, but basically a pixel measurement is not the same across devices. In effect, if you try to display what looks good on desktop on a smaller device, your images and text may look blown-up or blurry when viewed on that device. The default zoom and containing block on desktop computers is different than on tablets or smartphones. Adjust the initial containing block and zoom factor To prevent this, and to render page elements in parallel with scripts, place them at the bottom of the page. Browsers won’t start anything else until the script is finished, even if the scripts are on different hostnames. Unlike stylesheets, which should appear toward the top of the page, scripts can prevent parallel and/or progressive loading of page elements. Only in rare cases will you need your JavaScript to execute before anything else on the page. Place scripts at the bottom of the page this is a best practice for web apps and pages designed for mobile devices. Get better performance though script placement Find a visual layout that works well with all aspects of your web app or site and maintain it throughout each page. Setting up the HTML first will quickly provide the user a visual outline of the page, even on slower connections, reassuring the user that a page is going to be served.Ĭonsistency between the static elements of your HTML between pages will take full advantage of the user’s cache and allow your pages to render faster. This is a good visual cue to your users that a page is being rendered. Web apps and sites will begin to render on Opera Coast as soon as the element is recognized. Utilize animations to illustrate transitions and cover up any lags during loading times. Consider showing users interesting loading indicators, instead of spinners. Transitioning from page to page feels out of date on smartphones, tablets, and slates, and can detract from the experience. You should also consider dynamic methods of loading new content. Delivering a mobile-oriented interaction to mobile users will make your pages more attractive to them. It’s tempting to use shared buttons that will work on both mobile and desktop versions of your web app or site, but you should consider swipe, multi-touch, and pinch gestures first. W3C has proposed a recommendation for touch events, which allows you to utilize taps, swipes, pinches, and multiple touches for your web apps. The iPhone and iPad are renowned for their touch gestures, providing a unique experience to using the device. There are a number of tools and APIs you can take advantage of that will make a tablet or smartphone experience more rewarding for your users, paramountly touch events. Ideally, you can serve different sites for different platforms and devices. From there, you can expand or contract your pages to fit other devices. If you want to make the most of the Opera Coast experience, you should design your web apps or sites for mobile browsing first. There are many resources available online for developers to optimize their sites to this end. Opera Coast takes advantage of mobile browsing by supporting and encouraging development for touch-based web design. Web apps are the center of the Opera Coast browsing experience.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |