Below a set page width (sometimes called the ‘breakpoint’) it switches to the mobile variant. You can see this in action by adjusting the width of the browser for this page. Fluid resize: The new version of Xara Designer supports fluid scaling within variants, to ensure your web page resizes for the best fit possible for any browser width, mobile, tablet or desktop. So this text is identical on both the mobile and wide screen variant - editing the text in one variant updates it in the other. Xara Designer allows you to create different layouts for different devices, and yet share the content. Secondly desktop screens have enough width to support photos or other media being placed beside the main text (like on this page), whereas with mobile screens this content should be arranged differently - typically in one narrow column. This example document has a Normal text style (at 100% scale) that is 15px for desktop and 20px for mobile devices. So a font size, say 13px, which might be perfectly readable on a desktop, is too small for a mobile screen. Mobile and Wide-screen variants Modern websites have to be optimized for mobile screens which are physically smaller and at higher resolution. Some of these features are described below. Color Scheme based on the color of the banner photo.Mobile specific text styles (larger fonts).Packed photo grid with pop-up photo gallery.Various animation effects on mouse-over, click or reveal.Stretchy banner photo and top nav bar.
Automatic responsive graphics and photos for hi- res screens.Two responsive variants, one for narrow mobile screens, one for wider screens.Fluid resizing of the page to best-fit any width screen, with a max-size limit.This page is an example that demonstrates many of the features required to create a modern, mobile-friendly website, incorporating animation effects, automatic Retina (HiDPI) photos and graphics, wide-screen and narrow screen variants, mobile friendly navigation and, mobile specific text styles and more. The latest Xara Web Designer and Xara Designer Pro include enhanced support for Responsive Web Design.
0 kommentar(er)
