Features

Responsive Designs & Images

A web page can appear in devices of many different screen sizes: Desktop, Laptop, Tablet or Mobile. You want to build your page once and then style itself automatically for different views. There are 3 parts to this process: responsive design, view manager and responsive images.

Responsive Design

Responsive design is done with CSS media queries. You can define custom media queries in WebDigital easily for all CSS objects you create. You can type it as text or enter it via the managed CSS rules UI. All media objects come standard with 4 medias: Desktop (all), Tablet (990px - 1440px), Mobile Landscape (480px - 990px) and Mobile Portrait (320px - 480px). You can create other medias as you wish. In the media designer, you can create rules and animations, specific to that media.

View Manager

Once you develop the responsive design using your media queries, you can test it out easily in the workspace. Menu has quick access to 5 views: free hand mode basically makes it possible for you to quickly adjusty to any given width. Other views are: Desktop, Tablet, Mobile Landscape and Mobile Portait, just the same as the medias. You can create custom views from the view manager. You can adjust the width, height and scale on the fly or save them as custom views and pin them on the menu. This allows you to be able to completely customize the view/media combinations as you wish. You can even check out how it would look like on a device resolution bigger than the one you are working with by adjusting the scale of the view. You can also customize it for mobile-first development if you wish.

Responsive Images

A major problem with responsive design is the images. If you use the same resolution image for all devices, mobile users may end up downloading large image files that are mostly meant for desktop. The solution is to use responsive images. The idea is to use a different version of the image for each media you setup. WebDigital makes this super easy. All images are automatically responsive: foreground and background both. This is controlled by image breakpoints and they correspond to the default media sizes but it is possible to customize. Note that SSR of responsive background images is impossible at this time but we will develop it as soon as it is available. This is called art directing your image.