Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). — from Wikipedia
As people view web content on an ever growing number of devices including mobile phones, tablets, and computers, it becomes important to display that content in a way that makes it easy read and navigate independent of the device. In fact, starting in April 2015, Google changed their algorithm to favor sites that are “mobile friendly”.
To make your site more mobile friendly consider using a theme using Responsive Web Design. We have a few Responsive themes available to make it easy for you to display your content well on a variety of screen sizes.
If you need help in changing your theme, look at the Choosing a Theme page.
- 1 Current Responsive Themes on Sites@UCI (as of April 2016)
- 1.1 Genesis UCI Theme
- 1.2 Beautiful Pro – Live Demo
- 1.3 Education Pro – Live Demo
- 1.4 eleven40 Pro Theme – Live Demo
- 1.5 Esplanade Theme
- 1.6 Legacy
- 1.7 Lifestyle Pro – Live Demo
- 1.8 Parallax Pro Theme – Live Demo
- 1.9 Pinboard Theme
- 1.10 Prose
- 1.11 Spacious
- 1.12 Twenty Eleven
- 1.13 Twenty Twelve
- 1.14 Twenty Thirteen
- 1.15 Twenty Fourteen
- 1.16 Whitespace Pro Theme – Live Demo
Test Your Site For Mobile Viewing
If you want to test how your site will look on various devices, try one of these online tools.
If you want to see if you pass Google’s Mobile-Friendly test, use this tool.
Current Responsive Themes on Sites@UCI (as of April 2016)
Genesis UCI Theme
Default Theme: UCI branded theme. Includes layout options, SEO settings, breadcrumbs, responsive layout, custom logo, two menus, and custom widgets for Social Media and Contact Info.
Beautiful Pro – Live Demo
Custom header, custom menus, fixed width, HTML 5 markup, landing page, mobile responsive, theme options, layout options
Education Pro – Live Demo
6 color styles, 6 layout options, custom background, custom menus, featured images, fixed width, HTML 5, mobile responsive, theme options, and layout options
eleven40 Pro Theme – Live Demo
4 color styles, 6 layout options, featured images, HTML 5 markup, mobile responsive, threaded comments, and layout options
In addition to being Responsive, Esplanade also has some extra display options giving you greater control over what your site looks like. You can select color themes, choose fonts, and if you are experienced in CSS, you can even add some custom styles.
Legacy is a premium theme from StudioPress (Genesis). It has 7 color styles, 6 layout options, custom background, custom header, featured images, and a widgetized home page. It is also responsive and will look good on mobile devices. We use it as our theme for Sites@UCI.
Lifestyle Pro – Live Demo
6 color styles, 6 layout options, custom background, custom header, featured images, footer widgets, mobile responsive, and layout options
Parallax Pro Theme – Live Demo
5 color styles, custom background, custom header, footer widgets, HTML 5 markup, landing page, mobile responsive, parallax scrolling, theme options, and layout options
A crafty and elegant theme powered by an advanced theme framework and grid system. With virtually unlimited layout options and styles, ideal for showcasing your portfolio of works or other multimedia elements like images, photo galleries, videos and podcasts.
Prose is a premium theme from Studio Press. It is highly configurable through point-and-click settings allowing you to customize the theme to suit your needs. It is also responsive.
Spacious is an incredibly spacious multipurpose responsive theme coded & designed with a lot of care and love. You can use it for your business, portfolio, blogging or any type of site. It has 4 page layouts, 2 page templates, 4 blog display types, 13 widgets areas, 5 custom widgets focusing on business template, awesome slider, primary color option to match your logo & website, boxed & wide layout, light & dark color skin, translation ready and many more.
The Twenty Eleven theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background — then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom “Ephemera” widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured “sticky” posts), and special styles for six different post formats.
The Twenty Twelve theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
The Twenty Thirteen theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
The Twenty Fourteen theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content’s layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Whitespace Pro Theme – Live Demo
Color styles, custom background, custom header, HTML 5 markup, landing page, mobile responsive, theme customizer, theme options, and layout options.