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
  • Services Offered
  • @msuweb

New Content Management System Coming Soon

March 3, 2021 by Web Strategy and Development

A staff member works no their laptop.

The Web Strategy and Development team recently led the process to acquire a new content management system (CMS) for university websites. This means that all Web Press sites will have an entirely new and improved editor experience. The name of product is Omni CMS, offered by Modern Campus (formerly OmniUpdate). The Omni CMS platform was developed specifically for Higher Education and has many features that we will utilize.

Some of the many advantages this new system will bring, are:

  • Regular online training for editors and administrators.
  • Online knowledge base and other resources.
  • More seamless editing with a deep link feature allowing you to login directly from the live website page you want to edit.
  • WYSIWYG editor with drag and drop functionality.
  • A pre-publish accessibility checker within the system.
  • A cloud hosted platform.
  • A cost effective solution.

We are planning for website migration to take place in April and May of this year. When we are ready to migrate your site, we will reach out to editors and work together to complete site migration to the new Omni platform. Prior to that, we will be connecting with various departments and units to help ensure websites are up-to-date. Old and outdated content will need to be removed and cleaned up. This will result in a much smoother process and a more pristine website after migration.

We look forward to collaborating with our colleagues to usher all of our websites into this new platform. You’ll be hearing from us in April or May, but please don’t hesitate to reach out with any questions at web@missouristate.edu.

 

 

Filed Under: Technical, Training, Web Press, web strategy and development

Learn best practices for accessibility

April 11, 2019 by Brian Heaton

Web Accessibility Summit

Join us for the 2019 Web Accessibility Summit, a conference about all things website accessibility for professionals in higher education and beyond, hosted this year by Missouri State University.

Details

When: May 29, 8 a.m. to 5 p.m.
Where: Missouri State University, Glass Hall
Cost: $40

Workshops and track sessions will focus on how to make your web presence more accessible with technical and non-technical solutions. Networking opportunities will encourage sharing of information and resources with colleagues from around the state.

Missouri State faculty and staff should register through My Learning Connection. You may use your noncredit fee waiver to cover conference registration costs.

Non-MSU faculty and staff can register now.

Seating is limited so don’t delay.

Organizers

Several Missouri higher education institutions are organizing this event:

University of Missouri logo.
St. Louis Community College logo.
Missouri State University logo.
Missouri State University - West Plains logo.
Truman State University logo.
Missouri University of Science and Technology logo.
A.T. Still University logo.
University of Missouri-Kansas City logo.

Filed Under: Accessibility, News, Technical, Training, Web Press, web strategy and development Tagged With: a11ysummit, Accessibility, conference

3 simple tips for improving your headlines

September 18, 2018 by Kai Raymer

Strong headlines are vital. They’re the billboards for your content.

Consider the classic 80-20 rule. For every 10 people who find your headline, eight will read the headline but only two will read the content.

Strong headlines entice your audience to keep reading.

You write headlines for many things: websites, articles and blogs, emails, social media and more.

Here are three basic tips for headline writing.

Know your audience, purpose and platform

Who are you writing for? What’s important to them? Why would your content interest them? Nick Usborne asks these questions, and others, as a starting basis in his Udemy course for headline writing.

If you know these answers, it’s easier to connect your audience with your content.

Audience/purpose: Your audience wants to know what’s in it for them. What will they get from reading your content?

Quality headlines suggest a benefit or gain.

Take the title of this blog post, for example. A very small time commitment (reading three simple tips) for a valuable outcome (improving your headlines).

Platform: Adjust your tone and style for the platform. Writing for alumni on Facebook is different than writing for current students on Twitter or Instagram.

Give direction or request action, but be brief

Guide your audience.

When we write headlines for the university homepage, we’re trying to get you to do something. We aren’t just making announcements or posting news releases.

Homepage of missouristate.edu showing featurette examples

These headlines typically begin with a verb or one of the five Ws: who, what, when, where and why, along with how. We want to give you an action to take, or help you learn about something.

Favor brevity and know your platform. Verbs are your friend. Long headlines with complex words are not.

Practice, practice, practice

Your first version of a headline won’t be your best headline. Try again. And again. And then maybe a few more times.

Upworthy writes 25 versions of a headline for each article. Try it.

Short on time? Even if you only write a dozen potential options, you’ll come up with a more effective headline than that first version.

In summary

There are many more tips for good headline writing not mentioned here.

Google “Tips for better headline writing” and you’ll have an endless amount of insight.

But these three tips should give you a start for improving your headlines.

Filed Under: Social media, Technical, web strategy and development, WordPress blogs Tagged With: content, headlines, writing

Scalable vector graphics: everything old is new again

December 5, 2016 by

Screenshot of infographics from the legislative guide website

With the proliferation of articles on scalable vector graphics (SVG) from the web community within recent years, you would think this image format is some bleeding edge web technology. However, SVGs were first developed by the World Wide Web Consortium (W3C) in 1999 and released as an official recommendation in 2001. So how can a web technology that is nearly eighteen years old be the hot topic in today’s web circles? To answer that question, let’s first look at what a SVG actually is.

What’s your vector, Victor?

SVG images are an XML-based vector image format. As opposed to raster, or pixel-based, images such as JPG, GIF and PNG formats, SVG images use coordinates and mathematical calculations to create resolution-independent lines and shapes. Simply put, SVG images are fully scalable without any loss of quality. And since SVGs are human-readable code, they can be edited and versioned as with any other piece of code, readily manipulated by standard web languages such as CSS and Javascript and compressed to extremely small sizes.

One format to rule them all?

So SVG is the One Ring of web graphics, right? Not quite. While SVG images have a litany of benefits, their wheelhouse is relatively flat graphics and shapes. Photographic images and overly complex illustrations will still perform better and more reliably as familiar raster formats such as JPG. However, that opens up a tremendous opportunity for SVGs to shine. The following examples showcase how SVG images outperform comparable raster graphics.

Icon sprites

Icon sprites are a common way to implement and deliver a large volume of user interface icons and graphics with fewer server requests, thus decreasing page load time. This is done by pre-compiling individual graphics into one large graphic “sheet” that can then be repositioned and cropped via CSS to show only the applicable icon. The down side to traditional icon sprites is that they are cumbersome to maintain and implement. With the advent of high-density displays, they can also quickly grow in file size as different resolutions are accommodated.

sprite-2x
Traditional PNG icon sprite
Filesize: 30kb (24-bit transparent PNG)

Similar to their raster counterparts, a SVG sprite combines multiple icons and graphics into one file. Unlike a PNG sprite, though, a SVG sprite has to only have one iteration of each icon or symbol since CSS can control the scale as needed. Styles can also be applied to create custom themes for icons. Do you need to change the default black icon to Missouri State maroon? Simply write a new style to target that class and it’s done. Additionally, new symbols can be added by simply cutting and pasting the new symbol code directly into the SVG sprite file. Gone are the days when you have to run countless individual graphics through a sprite generator and do frustrating CSS math to get them to display correctly. SVG sprites offer an impressive level of flexibility without compromising file size.

See the Pen SVG Icon Sprites by Chris Austin (@chrisaustin) on CodePen.

SVG icon sprite
Filesize: 5kb uncompressed, 1kb compressed (gzip)
Hover styles have been set to show how the same icon set can be “themed” through the use of CSS.

Responsive and adaptive logos

Another challenge introduced with multiple resolutions and device widths is getting relatively detailed graphics such as logos to work at various breakpoints. A logo that is readable and properly scaled at desktop dimensions may become muddled once it is viewed on a phone. One solution has been to use CSS to swap out the graphic designed for desktop with one that is thoughtfully designed for mobile. Again, this creates multiple assets that have to be managed and extra load time to display higher-resolution graphics.

Similar to how specific symbols can be referenced in an SVG sprite, you can use several symbols to make up a larger graphic such as a logo and then utilize CSS to turn on or off these symbols at different breakpoints. For example, the Missouri State University logo that includes the Carrington icon and wordmark may look great on a desktop view, but become indiscernible at tablet scale. CSS and media queries can hide the icon and allow the wordmark to scale up to a more appropriate size. As we go down to phone scale even the wordmark may be too much, so we can show just the icon and hide the wordmark making better use of the space. All of this can be accomplished with one SVG logo and thoughtful use of CSS and media queries.

See the Pen SVG Responsive Logos by Chris Austin (@chrisaustin) on CodePen.

This sample SVG logo is designed to show and hide certain elements at specific breakpoints and is fully responsive in between each breakpoint.

Charts and infographics

Charts and infographics add another level of visual interest to a site and can help communicate overly technical data. A beautifully illustrated infographic designed for print does not usually translate well to the web, though. The common fix is to slice up the infographic into a series of JPGs or PNGs. This rather heavy-handed approach requires lengthy alternative text or supplementary content to make this data accessible to visually impaired users and can negatively impact a page’s load time.

Remember how SVG images are simply XML documents? That means they can contain tagged text that is accessible to humans, assistive technologies and search engines. Additionally, it can be copied and pasted as well as printed at full resolution. Add to that the ability to be animated and styled by CSS and you have a robust and efficient way to present compelling data.

See the Pen SVG Charts and Infographics by Chris Austin (@chrisaustin) on CodePen.

Sample SVG infographic
SVG infographics contain fully accessible content that can be readily selected for copying and pasting into other documents.

Back to the future

Now that we are chomping at the bit to fill our websites with SVGs, we pause and ask ourselves, “Why aren’t SVG images more prevalent?” Two words: Internet Explorer. The behemoth that is IE did not support the SVG standard until IE 9. That means up until 2011 a huge chunk of the browser market was unable to utilize even basic implementation of SVG images. But there are promising days ahead. Virtually everyone can now reliably view SVGs on the web in all major browsers and enjoy the many benefits they offer. Even better, the web development community is rallying behind the merits of SVG and educating about best practices and techniques that take a seemingly archaic and almost-forgotten web technology and catapult it into one of the most relevant ones of modern web design.

Case study

So where does this meet Missouri State University’s web development efforts? We are always looking for innovative and appropriate ways to accurately and efficiently deliver web content to all of our audiences. With some of our primary goals including mobile-friendly delivery and content that meets accessibility standards, SVG images have been on our radar for a while. And now that browser support is much broader, we are able to readily implement SVGs within our sites.

Our first effort was the recent update to the president’s legislative guide website. This site is a companion to a print piece that is delivered to Missouri legislator’s updating them on how Missouri State has met various goals over the previous year. The website is often referenced throughout the year from a variety of devices and by a variety of audiences and is laden with charts and graphs. This combination made the legislative guide website a perfect opportunity to implement SVG images.

Screenshot of infographics from the legislative guide website

Result

Being our first foray into SVGs, the preparation and optimization efforts took a bit longer than if we had used traditional PNGs. But the payoff was huge: we saved about 50 kb on the page titled “The Value Option” and another 170 kb on the about page with graphics looking crisp at any size.

Additionally, the data within each infographic is accessible to assistive technologies and can readily be copied and pasted by legislators and administrators for annual reporting and other documentation making it a more useful reference source.

Filed Under: Redesign, Technical

Missouri State seeks full stack developer/engineer

June 24, 2016 by

Missouri State Career Opportunity
Apply now

Missouri State University is accepting applications for a full stack developer/engineer.

Responsibilities

  • Serves as technical lead to guide web applications through the full stack of development
  • Manages projects, develops web and mobile applications
  • Integrates and configures external platforms
  • Maintains the core web template architecture
  • Oversees the student programmer team

Select projects

Website views
Web performance, build tools, source control and continuous deployment
Search website
Top-level applications including Missouri State homepage, search, map and master calendar
MSU Mobile
Mobile applications and websites
Welcome Center panels
Special projects

Application instructions

Starting salary range: $61,574-80,399 annually. Pay grade: 36.

Reimbursement for out of the area relocation expenses is negotiable.

Group health insurance, life insurance, retirement, tuition waivers, wellness programs and professional development opportunities. Learn more about benefits.

Visit the complete job posting

Desired skills and experience

Education

A bachelor’s degree or an equivalent combination of education and experience as described in the Job Family 3 Knowledge Equivalencies Chart is required; a bachelor’s degree in an information technology field is preferred.

Experience

  • At least two years of technology project management experience is required.
  • At least three years of experience programming websites is required with fluency exhibited in at least one Web application framework (ASP.NET MVC, Rails, Grails) and one object-oriented programming language (ASP.NET C#, Ruby, Groovy).
  • Proficiency in modern Web languages, including Javascript Application Development, HTML and CSS is required.
  • Experience in the design and programming of applications in a team-oriented environment is required.
  • Experience working with mobile development tools (iOS, Android, etc.) is required.
  • Work experience in higher education is preferred.

Skills

  • The ability to effectively manage multiple, complex web-based projects concurrently is required.
  • Effective interpersonal and organizational skills are required.
  • Strong verbal and written communication skills are required.
  • Strong and current application design and architecture skills, including an understanding of web security principles, are required.
  • An understanding of accessibility issues related to users with disabilities is preferred.
  • The ability to maintain confidentiality in regard to information processed, stored, or accessed by the systems is required.
  • The ability to develop knowledge of, respect for, and skills to engage with those of other cultures or backgrounds is required.

Effort

Extended periods of time working at a computer workstation are required.

Other

The twenty-four hour scope of university operations requires this position to be available evenings, nights, and weekends to respond to calls regarding questions or problems with the university’s website.

Successful candidates must be committed to working with diverse student and community populations. Employment will require a criminal background check at university expense.

EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity EMPLOYER AND INSTITUTION

Filed Under: News, Technical, web strategy and development Tagged With: jobs, mobile, programming

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
  • 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: June 28, 2016
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information