Marywood University’s responsive redesign is more user-centered and visually dynamic. It also offers more flexibility in layout options throughout the website.
Before & After
In addition to the dynamic layout, the homepage was also redesigned.
Header – Yellow Bar
The yellow bar contains links for our main audiences. This homepage-only menu bar will take you quickly to the resources that are targeted just for you. This menu disappears once you leave the homepage, allowing more screen space for the content you want to see.
New in this set of links is a page for adult learners. Here you will find links to professional, continuing education and senior learning opportunities, as well as degree programs and services for students of all ages.
Header – Green Bar
The green bar is the new header for the entire site. It is more compact and focuses on information that is most important for prospective students. There are two new links: Campus Life and Faith & Service. These pages will be used to showcase aspects of Marywood life that are not focused on any one particular division of the University. Campus Life will focus on the activities and services that are a part of the overall Marywood experience. Faith & Service will highlight Marywood’s Catholic identity and the various ways we live out our mission and core values.
Header – Emergency Alert
In the event of weather or other emergencies, a prominent alert will appear just below the header.
Landing Page “Blocks” Template Design
The body of the new home page & landing pages is designed for high visual appeal and flexibility.
Watch for the content of this page to change regularly and for the content to have a variety of configurations. The number of “story rows” will change and the size and number of stories in a row will change. We no longer limited to the same layout and number of story blocks.
The last row in this section (homepage only) replaces our traditional announcements block.
The blocks template is a unique page template that allows you to easily change the style of your page with a few simple clicks. Instead of the entire page being designed as a whole unit, your information is chunked into individual blocks of content that can be moved to create new layouts.
Within these layout variations, new content can be added quickly and easily, and the items on the page can be arranged and rearranged:
- moved up, down, left, right
- moved to a “more featured” size or position
- moved to a “less featured” size or position
Moving content from a large feature to a smaller entry is quick, easy, and gives the page a fresh, new look even during slower news periods. In addition, this database of information displayed on the page will also be readily available to use on the other landing pages (like Campus Life, Faith & Service, Academics, etc.) with a simple click.
The blocks template is set up so that you can add multiple pieces of content to each “row” in order to form different layouts and styles for your page. Depending on the selections you choose and the number of items in the row, the formatting will change. Click the “Show Caption” checkbox on the first item in the row to get the alternate layout (Showing caption gives you more space for text, where the default layout is much more image-based). Here are the options:
Other Block Options
A few advanced options are built into the blocks structure.
This allows a piece of content from another page to be placed in a row. Contentlets let the Web Team create custom content for your page. If a Block is using this contentlet field, it needs to be the only item in the row. Contact the Web Team if you would like to use this feature.
This advanced option allows you to put in the url to the folder where you have images stored. A random image will be selected from that particular folder to display on the page. Each time the page is refreshed, a different image from that gallery may be displayed.
This option allows you to put in the path to your YouTube video and the video will display and play right on the landing page inside the block. The video will also resize responsively according to the device you are viewing it on.
The second footer in grey is the “sticky footer.” It sticks to the bottom of the screen as you move about the website and contains links important to current students, faculty and staff. The two links on the right-hand side will take you to the Student Services and the Faculty, Staff, Administration landing pages.
Interested in a project like this?
Please contact me if you’d like to talk about simplifying or redesigning your own reports!