12.1.2 About Responsive Design and the Universal Theme

About Responsive Design

Responsive design enables you to design web pages so that the layout fits the available space regardless of the device on which page displays (for example, a desktop computer, laptop computer, tablet, or smartphone).

By implementing a responsive design, the user gets the same full experience as they would on larger screens. On smart phones and tablets, the layout can adjusts to the size of the specific device. During this resizing process, elements shift position, re-size, or become hidden. The goal of responsive design is to present all essential content in a user friendly way for all possible screen sizes. Keep in mind, that responsive design is not just a matter of picking the correct set of templates. As the application developer, you are responsible for using the templates and the available components to design a page that is truly responsive. The Universal Theme is an example of a responsive user interface theme.

About the Universal Theme

When you create a new application, the Create Application Wizard uses the Universal Theme.

Key advantages of the Universal Theme include:

• Responsive Design - Designed to work just as well on small screen devices (such as smartphones and tablets) as it does on larger screen devices (including laptops and desktops). The UI components in Universal Theme work across varying screen resolutions while maintaining the same or similar functionality. In addition, Universal Theme takes full advantage of ultra high screen resolutions by utilizing vector graphics where possible, and relying upon CSS3 features for UI styling.

• Versatile User Interface - Provides all the components and building blocks necessary to build practically any type of business application user interface. To browse all of the components provided with Universal Theme go to the Universal Theme application at https://apex.oracle.com/ut and select Components.

• Easy Customization - Effortlessly customize and fully control the look and feel of your applications without becoming an expert in UI design, HTML, CSS, or JavaScript. Using Theme Roller and Template Options, you can easily customize your application to fit your company's brand and customize the look and feel of various components using Template Options. 

The Universal Theme includes support for theme styles. A theme style is a CSS style sheet that is added to the base CSS. Developers can change the appearance of an application by altering the theme style using the Theme Roller utility.

About Migrating Existing Mobile Applications to the Universal Theme

jQuery Mobile and the jQuery Mobile User Interface used in previous releases have been desupported. If you have an existing mobile application that uses the jQuery Mobile User Interface, you should migrate your existing application to the Universal Theme.