Responsive is the latest SharePoint package for the university. It was created by the Development team in Information Services (IS) along with the Development, Content and Design teams in DXA. The developers and designers researched industry standards for mobile responsive design and spent ample time working on what would become the look, feel and overall usability of our Responsive package.
Keeping in mind not only forward-thinking design elements, but also ADA guidelines, the teams carefully selected the fonts, sizing, color options, layouts and functionality for SharePoint Responsive. In order to enforce consistency standards across all new websites, it may seem few choices are given for the default settings for content styling. However, there are many built-in options for styling, such as the Markup Styles menu, and the various web parts for modifying page content. It is important to maintain consistency and a professional look across all of our websites. We also use navigation standards across the colleges and offices -- so that no matter which DePaul site a user visits, they will be able to find what they need easily.
It is important to acknowledge the fact that websites are never "done." They are dynamic information sources, and as the web as a whole makes changes, we will continue to evolve with it. Keeping up with the way our site visitors use our sites was a driving force in our decision to go "mobile-first."
Why Responsive?
Overall mobile Internet usage has overtaken desktop usage in the last several years, and we've seen this with our site visitors. More and more people are viewing DePaul websites on mobile devices such as smartphones and tablets. Responsive Web Design (RWD) is currently the most popular web design philosophy. It is based on the idea that websites should "respond" to the size of the screen they are being viewed on, whether it's a large monitor, a regular desktop, a tablet or a smartphone. Rather than maintaining separate mobile versions of a site, in RWD the content is flexible — it adjusts based on how a user is viewing the site.
Other trends we are drawn to are flat, simplistic designs seen in the most professional modern websites. A clean look allows us to standardize styling and easily maintain branding across entities. This approach makes the experience easy for editors using the system to create and display information, as well as outside viewers to find the information they need.
Our designers and developers created the Responsive package to be standardized and easier to use on the editing side while outputting a sleek, mobile-friendly design for viewers.
What is a Responsive website?
The web design and development community regards responsive as a website with a flexible grid, flexible type, flexible images/video (media) and flexible media queries. Responsive strives to be device agnostic, meaning it's able to adapt to any size screen while content remains accessible and readable. No matter if you're on a smartphone, tablet, desktop or video game system, responsive sites are easy to find, read and interact. We aim for lightweight pages, images, scripts and content that download quickly.
How are Responsive sites designed?
We've designed a framework where nearly every type of page layout and site configuration is already covered. All you need to do is bring your content. From a design standpoint, we have numerous color schemes, page layouts and web parts that function to serve content like events, FAQs, bios and more. Visually, responsive websites are 90 percent typography in order to convey content, and they navigate in a clear and coherent way that is consistent across all sites.
How are Responsive sites developed?
The intent behind our front-end development efforts is to have visually beautiful sites in a CSS framework that can generate any layout we need. The system we use to serve websites is called Microsoft SharePoint. We've done lots of customization to get the SharePoint masterpage to be light and quick, with well crafted markup and fewer HTTP requests.
Typography is a good starting point for responsive, and we are working in a mobile-first fashion starting with highly readable basic typographic styles (see this Guide). Next, we've devised a flexible grid that is infinitely nest-able to build any layout. To apply unique looks to each site, we have a chrome approach that adds our branding yet remains flexible so that it's lightweight and easy to exchange for new skins. For the content and the different ways content is presented, we have a system of flexible objects that are the building blocks for more intricate page layouts and functionalities.