Monthly Archive for: ‘August, 2012’

Lower Level Tablet and Mobile Designs

Davidson Three Column Tablet Design

Tablet View

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.

Mobile View

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.

Lower Level Page Desktop Designs

Lower Level Department Homepage (View 2 - 3 column)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.

Masthead

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

Three-Column Layout

  • 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)

Two-Column Layout

  • 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

 Design Gallery

Inside Davidson Upgrade

Inside Davidson Homepage

Inside Davidson Homepage

Over the summer Information Technology Services and College Communications have been working on an upgrade and design refresh of Inside Davidson, the college’s intranet site.

It will feature:

  • A refreshed look and feel for faculty/staff and student gateways
  • My Links customization feature
  • Clickable event links
  • The Ribbon feature that is critical to edit in SharePoint
  • Streamlined committee access
  • A major upgrade to the system software from SharePoint 2007 to SharePoint 2010

The new version is scheduled to go live on Monday, Sept. 24.

Branding

The biggest change for most campus users will be the look and feel of Inside Davidson. The look has been refreshed to align Inside Davidson with the branding standards of the college. The color palette has changed to bolder usage to highlight site sections more clearly.

Navigation

Many of the links on the left and right of the page have been moved to top level navigation drop-down menus to open up the page and make it easier on the eye to peruse. Campus Resources and Academic Resources drop down menus contain the majority of the links that previously appeared on the right and left hand side of the page.

My Links

The My Links section is a new feature in SharePoint that allows individual users to determine what links matter to them the most, and place them on their page in a prominent location. This section replaces the prior Popular Links section from the current Inside Davidson site. Instead of being told what is popular, you determine what’s popular for your needs. It is recommended this section is used to create quick access to campus resources of importance to your day-to-day college functions, but links to external sites, such as CNN, can be added here as well.

Clickable Events

The event listings pulled into Inside Davidson from the Master Calendar EMS system will now be clickable from Inside Davidson to see more information. With this new feature, it is important that contributors to the Master Calendar add a description to their events.

The Ribbon

The ribbon feature is new to SharePoint 2010. The ribbon functions similarly to the ribbon feature found on all other Microsoft Office products including Word, Excel, and PowerPoint. If you have editing privileges in SharePoint, this feature will be very important to your day-to-day interaction with SharePoint.

Committees

The Committees section will list only committees in which you are a member.

Software Upgrade

The software upgrade is a significant change from the current Inside Davidson Web site. It requires the migrating of content from the current site to an entirely new Web site hosted on a new server. The majority of the changes you see in Inside Davidson are due to the changes in software. It is important that the college remain up-to-date on the latest technology provided by our software vendors for support purposes as well as feature purposes.

Alerts

If you have alerts set up to notify you whenever content has been added, changed or deleted, you will need to reset them after the new site is live. Alerts only notify about content. If you subscribe to documents under Reports, these are unchanged. Reports will remain in SharePoint version 2007.

Bookmarks

If you have bookmarked or favorited pages in your browsers, those links will be broken as the upgrade to SharePoint changed all the links within the Web site.

Breadcrumbs

Breadcrumbs are located under the folder icon at the top of every Inside Davidson page. Clicking this icon will allow to go back one or more pages depending on how deep into the site you navigate.

Informational Sessions

On Friday, Sept. 21 and Friday, Sept. 28, there will be a series of informational sessions to show faculty and staff the new Inside Davidson Web site and the features listed above. The sessions are scheduled to last one hour each.

  • September 21 sessions
    900 Room
    9 a.m., 10:30 a.m. and 2 p.m.
  • September 28 sessions
    Sprinkle Room
    9 a.m., 10:30 a.m. and 2 p.m.