Here is a look at the different screen presentations for lower level pages on tablet and mobile devices. As noted in previous posts, we are undertaking a responsive design approach for the homepage and lower level pages on the new site. The content on the site stays the same across desktop, tablet, and mobile devices, but the layout of the pages adjusts to the screen size of a given device.
Tablet Design View
This is a view of a three-column webpage layout that has responded to a smaller tablet screen size and changed to present the page in a two-column layout. The top navigation area of the page (area in red) has change to a narrower presentation where “Admission & Financial Aid,” “Student Life,” and Offices & Departments” now wrap to a second line. All of the right column callouts (shown in gold, red, and brown) have automatically adjusted and moved to be displayed under the social media area in the middle of the page. For optimal display on a tablet, all of the text links in the super footer at the bottom of the page are displayed in drop-down menus.
In the mobile view—what you might see on an iPhone or Android phone—the original three columns on the page have been automatically combined into a single column and presented in a narrower view. The site navigation has changed to be optimized for a mobile device and is also repeated at the bottom of the page so visitors don’t need to repeatedly scroll up the page to access pages within a given section of the site.