Category Archive for: ‘Lower Level Pages’
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.
We are currently working on designs for lower level pages below the homepage. This work is still ongoing at this point, but we are far enough along in the process to show you the direction we are heading.
Pages Designed for Flexibility
Based on what we heard during project discovery we are designing pages to be very flexible. We will have the ability to choose a two or three column layout and a variety of masthead options. The main part of the page will allow for the display of news, events, and social media feeds. The right column will allow for several different callout options, including profiles, general highlights, among others. Outlined below is a brief overview of each area of a page.
The masthead is the area of the page located just below the primary navigation (site-wide links area with red background). Several mastheads will be available that will allow us to tell stories, highlight people and programs, and provide a better sense of place by featuring campus photography. The options available in this area are included below.
- Scrolling masthead showing multiple stories with images or videos (stories expand to the left and right to fill the entire browser window)
- Single masthead image with text story area and image or video
- Scrolling photos with captions (photos expand to the left and right to fill the entire browser window)
- Single photo with caption
- Single photo with caption that can expand to fill the browser window from left to right
- Option to feature no masthead
- Left column will feature section navigation, department contact information, and a page share button allowing pages to be e-mailed or shared on Facebook, Twitter, and other social media sites
- Main content area will display department content as well as news, events, and social media feeds in an accordion-tab style
- Right column will feature a variety of callout options, including profiles (in gold), general callouts (in brown), event announcement/registration (in red), or related links (in white)
- Wider page for displaying longer content
- Accordion-style tabs at bottom of page for displaying content like frequently asked questions
- Callout area at the bottom of page