Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb

Mobile-adaptive homepage debuts

January 4, 2015 by

Homepage in different modes

In response to the demand for websites that can be readily consumed via smartphones and tablets, the homepage for MissouriState.edu has transitioned to a mobile-adaptive format. In addition to serving mobile consumption, the new format provides a rich, multimedia experience that includes more photo and video and heightened social media integration.

We encourage you to try out the new homepage on your desktop computer, tablet and phone to see how it adapts to different screens.

Access the homepage

Notable enhancements

  • Athletics now has a presence in the top navigation of the website.
  • The main feature area is more prominent, allowing us to spotlight very high-level content in a variety of ways – including photo and video. Color themes will coordinate with each feature’s theme, photography or selected media.
  • All feature areas can now be rotated according to a fluid timeline, one that’s responsive to important Missouri State news and events.
  • The social media activity stream continues to have prominent placement, providing users with real-time snapshots of the Missouri State community.

While the overall structure of the new homepage is established, incremental changes will continue to occur as we keep Missouri State’s Web presence in line with evolving tech trends and user expectations.

Feedback and questions

We invite your feedback. Please send us your thoughts.

Filed Under: Redesign, Web redesign 2015, web strategy and development Tagged With: design, homepage, Redesign

Mobile homepage launches Jan. 4

December 15, 2014 by

Missouri State homepage preview

New homepageIn response to the demand for websites that can be readily consumed via smartphones and tablets, the homepage for MissouriState.edu is transitioning to a mobile-adaptive format. In addition to serving mobile consumption, the new format provides a rich, multimedia experience that includes more photo and video and heightened social media integration.

Missouri State’s mobile homepage will officially launch on Jan. 4, 2015. You have the opportunity to preview it now. Please note that the website looks different when you access it on your desktop, mobile phone and tablet.

Notable enhancements

This preview version features sample content and is an accurate representation of the new design’s tone, look and functionality.

  • Athletics now has a presence in the top navigation of the website.
  • The main feature area is more prominent, allowing us to spotlight very high-level content in a variety of ways – including photo and video.
  • All feature areas can now be rotated according to a fluid timeline, one that’s responsive to important Missouri State news and events.
  • The social media activity stream continues to have prominent placement, providing users with real-time snapshots of the Missouri State community.

While the overall structure of the new homepage is established, incremental changes will continue to occur as we keep Missouri State’s Web presence in line with evolving tech trends and user expectations.

Feedback and questions

We invite your feedback. Please send us your thoughts.

We look forward to launching on Jan. 4!

Filed Under: Redesign, Web redesign 2015, web strategy and development Tagged With: design, homepage, Redesign

Website masthead updated to touch friendly design

September 15, 2014 by

Template

An increasing number of prospective students are accessing college websites solely through mobile devices.Consider these stats from the 2014 E-Expectations report:

  • Both students and parents overwhelmingly said they used smartphones for their mobile browsing.
  • Nine out of ten seniors and eight out of ten parents have access to a mobile device.
  • 71 percent of seniors and 45 percent of parents have looked at college websites on their mobile devices.

This means that University websites must be optimized for consumption on smartphones and tablets, and we will be transitioning the homepage to a mobile friendly design over the next several months. The new design will have specific layouts for desktops, tablets and phones.

Rather than introduce all of the changes at once as with past redesigns, we plan to slowly change major sections to match the new designs, allowing a more gradual transition where we can adapt to feedback.

Global masthead changes

Today, we updated the website global masthead to a more touch-friendly design. The new masthead is a further modification of the changes we introduced in our initial mobile templates.

Non-touch friendly masthead
OLD: Non-touch friendly masthead
Touch friendly masthead
NEW: Touch friendly masthead

This change will take some time to complete. Web Press sites will see the new masthead very quickly. Other sites will have a much more gradual rollout as we have time to change their templates.

As part of the change, the four major links the homepage has offered within the BearPass login tab will now be in a touch-friendly menu on every page throughout the site.

BearPass login tab on the homepage going away

On Sept. 22, the BearPass login tab will direct people to use the new BearPass menu in the masthead.

On Oct. 6, we plan to completely remove the BearPass login tab on the homepage. While it is the single most popular tab, the design methodology is not compatible with our mobile friendly layouts.

Feedback welcome

As always, we welcome your feedback throughout the process. Please comment on this post, or email web@missouristate.edu.

Filed Under: Redesign, Web redesign 2015, web strategy and development Tagged With: design, homepage, Redesign

Design for the mobile Web

December 3, 2013 by

Web and new media website in new mobile template

The process of developing new mobile templates for the Missouri State website involved re-thinking everything from content to code. A new structure led to the design of a new interface and visual framework for content so it could be conveyed efficiently and effectively across desktops, tablets and smartphones. Our goal from the onset of the project was to ensure the design decisions we made enhanced the content, not distracted from it. Specifically, we had six key objectives regarding our approach to the new mobile design:

  1. Utilize university brand elements to promote Missouri State and aid with inter-site consistency. The Missouri State logo, “follow your passion, find your place” brand statement and maroon color band remain in the new design to give continuity to each site and further reinforce the brand of the university across all unit sites.
  2. Define a hierarchy of brandable site elements to afford the unit a unique presence on the web. Elements are strategically designed within the templates to afford units a chance to introduce visual elements unique to themselves such as logos, color and marketing imagery.
  3. Employ a typographic structure that enhances readability and scannability. Type selection and layout are re-thought to provide a comfortable reading experience across a variety of screen sizes. Headings are sized to allow for versatile content structuring.
  4. Design touch-centric interactive elements. Generous, yet appropriate spacing is given to interactive elements to minimize touch errors.
  5. Develop modular elements that provide flexible layout options. Elements can be placed in countless manners to create layouts specific to the needs of the content and the intended audience.
  6. Create a visual framework that works predictably and efficiently across various platforms and device-types. The base rich text field is the starting point for almost every additional element used across the site. This encourages consistency and user-familiarity as new elements are designed and implemented.

Web and new media website in new mobile template

The hierarchy of brandable site elements is where the new mobile design framework meets the needs of the user. Consider the following elements and the best practices shown in the Web and new media website case study when developing a unit-branded design for the new mobile templates:

  • Navigation. The new Missouri State mobile navigation, typography and other interactive elements have been designed to allow for the average human index finger to comfortably tap without error.
  • Logo. A logo or other primary mark—if available—is one of the first elements visitors will see on the site. The logo is persistent across all pages and devices, and it encourages immediate recognition by adding another level of distinction from other unit sites.
  • Imagery. High-quality, relevant imagery can quickly engage your target audience and set a visual context for your content. A visual hierarchy can be established by coupling photography with headings or calls-to-action. Secondary brand marks or iconography can be incorporated into the imagery to further reinforce the unit’s brand.
  • Color. An appropriate and consistent color palette can powerfully and dynamically reinforce the unit brand across multiple facets of a site. Color can add depth to a page and visually anchor featured elements. Optional colored bars can be utilized above a rich text field to group like content on a page and further aid in the scannability of content.
  • Masthead. The unit masthead creates a bold first impression for the visitor by uniting primary brand elements such as the logo/site title with secondary brand elements including color and texture. The masthead is also a persistent element across all pages and devices.
  • Background. Backgrounds help to add further depth and dimension to your site and can create additional brand extension through appropriate use of color and texture.
  • Layout. A thoughtful layout can immediately enhance the readability and retention of content on a page or drive visitors away. When developing a page layout, strive to create some degree of visual hierarchy through a combination of rich text fields and action blocks, as well as imagery and color. Design to encourage scannability by using short blocks of text, bulleted lists and concise headings. The established flow and structure of the content should guide the layout, not some arbitrary “fold.” Keep in mind that the fold on a smartphone is vastly different than that of a high-resolution desktop monitor. Consider instead adopting a mobile-first—or linear—methodology to help prioritize content and calls-to-action.

The new mobile templates are a paradigm shift for our office and users alike. Understanding how the various elements are designed to work together should help in creating a visually engaging and predictable user experience regardless the device on which the site is viewed.

Filed Under: Mobile, web strategy and development Tagged With: design, marketing, mobile, Redesign

Mind’s Eye research site now online

September 11, 2013 by

Mind's Eye website

Mind's Eye websiteMind’s Eye is a new publication from Missouri State University that looks deeper into a few of the hundreds of research projects taking place on campus each year. A new print version of Mind’s Eye will be released each fall, with the Mind’s Eye website being updated throughout the year.

The goal of the site is to be a digital companion to the print piece as well as an archive of research taking place at Missouri State. The Mind’s Eye website is an expanded version of the print publication as many stories will include additional media such as video and audio.

Repurposing content

University units are encouraged to share stories from Mind’s Eye. The office of university communications is cross-posting Mind’s Eye stories to appropriate departmental blogs as new stories are published, but there are additional ways the content can be shared:

  • Write a post on your academic blog highlighting a Mind’s Eye story
  • Embed YouTube videos from Mind’s Eye on blogs or social media sites
  • Share stories through Facebook or Twitter using the #MindsEye hashtag

Research websiteResearch page updates

The University’s research page has also been updated in conjunction with the release of Mind’s Eye.

The main story on the research homepage will now be one of the featured stories from Mind’s Eye and will be updated monthly.

Filed Under: web strategy and development Tagged With: content, design, media, mind's eye, Redesign, research, stories

Next Page »

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Follow @MSUWeb

My Tweets

Calendar

  • Complete Calendar

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Redesign
    • Academic websites
    • Web redesign 2010
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: September 11, 2013
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information
 

Loading Comments...