Category Archive for: ‘Responsive Design’

New Social Media Hub

The redesigned website will feature a new social media hub (aka social media mash up) located at social.davidson.edu. The social media hub offers a single page view of Davidson’s institutional social media streams, including Facebook, Twitter, Flickr, Instagram, Pinterest, and YouTube, and provides an easy way for visitors to interact with the college and share social media content.

Previously prospective and current students, parents, alumni, and the campus community had to visit each social media site individually to interact with us. The new social media hub presents content all in one place and allows the college to present a more dynamic and engaging view of campus life and the great things that are happening at Davidson.

Davidson Social Media Hub

Like the rest of new Davidson website, social.davidson.edu utilizes a responsive design to adjust its layout for different device screen sizes. Here is a view of the site on an iPhone.

View of social.davidson.edu on iPhone

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.

Tablet and Mobile Homepage Designs

Tablet ViewAs 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.

 

Page 1 of 212»