As noted in previous posts, the new Web site will feature a responsive design where visitors who access the site on a tablet or mobile phone are served a slightly different design optimized for the screen size of each device.
For example, when viewed horizontally on an iPad, visitors might see the desktop homepage view but when the iPad is flipped to a vertical view the site would automatically adjust to accommodate the smaller screen size.
On an iPhone or Android phone, visitors would see a narrower view of the site with content optimized for display on a mobile phone. Navigation would be presented in drop-down menus and as buttons rather than long text-based lists.
The same site content will be seen across all devices — desktop computer, tablet, or mobile phone.
We recently approved homepage designs for tablet and mobile views. Included below is a gallery of the designs. Click on a thumbnail image to see a larger view of each design.
At last, we have a new homepage design! BarkleyREI presented us with four design concepts, which we quickly narrowed to two concepts that were selected for further modification.
The designs were tested with three focus groups: (1) current students, (2) alumni, and (3) faculty and staff. The chosen design was the near unanimous favorite of our student and alumni focus groups.
Features of New Homepage Design
- Clean, traditional design that utilizes the Davidson red and black colors
- Large, very visual featured content area focused on key themes and messaging
- News and events area shown “above the fold” so will be easily viewable on smaller monitors
- Callout area for important college initiatives. In the example, the callout area is represented by “The Arts” and “The Davidson Trust”
- A social media streaming scroll, which pulls content from the college’s social media sites
- Super footer with commonly accessed links
- Drop-down navigation with an optional featured content area within the navigation area
- Internal college audiences have been combined under a single Inside Davidson link, which is noted with a “lock” noting authentication is required
Responsive Design for Tablet and Mobile Devices
Home Page Design Gallery
Before any work begins on developing design concepts, wireframes are created for the homepage and all lower level page templates. Wireframes are basic illustrations of the structure of pages and they help clarify the various elements that will go on every Web page — navigational elements, page functionality, content blocks, and page display scenarios. During the wireframe process you begin to see months of work on research, strategy, information architecture and user experience come together.
Since we are undertaking a responsive design for our project we need to create wireframes for desktop, tablet and mobile views as shown below. Click on each image to view a larger slideshow.