Missouri State University
Web and New Media Blog

Top 5 reasons to add an event to master calendar

Are you looking to share your university event and need help getting the word out? Just add the event to the master calendar. It’s a quick and easy way to ensure that it’s available to the biggest audience possible. Not convinced? Consider this:

community members listen to a public affairs lecture

  • You can share the link on social media. That way, people can still find it even if they don’t have access to the original post.
  • Adding your event to the calendar means a broader audience sees it, including people who weren’t aware of your organization.
  • The calendar is the best way to make Marketing and Communications aware of your event so that MarCom can promote it.
  • Adding the event to the calendar is more reliable than sending reminders to email addresses, which may be outdated. The event invite might also be marked as spam, meaning some people won’t get the message.
  • It’s easy! Here is an example. Note the short, clear sentences.

Getting the word out

view of crowd and tents at Bearfest Village

  1. Submit the event as far in advance as possible.
  1. Upload a photo that relates to the event. Resize images to 700 pixels wide and 394 pixels tall for highest quality. Here’s how to Save for Web on Photoshop.
  1. List time, date and venue in appropriate sections. You don’t need to include date in the event description.
  1. Double-check details for accuracy, as only a calendar administrator can edit an event once it has been submitted and approved.
  1. Check off the boxes in event inclusion if they apply.

Select the appropriate boxes in event inclusion

Need more help?

We wrote this in collaboration with public relations specialist Emily Yeap. Please contact her if you have questions.

Posted in Web and New Media | Tagged , , , | Leave a comment

Web Press open lab relocated for winter break 2016-17

The Web Press open lab held every Friday has been relocated to the office of web and new media in Meyer Alumni Center suite 601 through Friday, January 13, 2017.

The regularly scheduled time of 2:00 – 4:00 PM remains in effect.

Please contact the Web Help Desk at 417-836-5271 or webpress@missouristate.edu if you have any questions

Posted in Training, Web and New Media, Web Press | Tagged , | Comments Off on Web Press open lab relocated for winter break 2016-17

Web Press training schedule for January-May, 2017 announced

The Web Press training schedule for January through May 2017 is now available.

Sessions will be held at the following times:

  • Thursday, January 12, 2017 – 2:00 – 4:00, Cheek 100
  • Tuesday, January 24, 2017 – 2:00 – 4:00, Cheek 100
  • Thursday, February 9, 2017 – 2:00 – 4:00, Cheek 100

Advance registration is required.

Self-guided training modules are available at any time. In-person assistance is available during weekly open lab sessions held every Friday 2:00 – 4:00. Telephone and email support is available weekday afternoons 1:00 – 5:00 at 417-836-5271 and webpress@missouristate.edu, respectively.

Posted in News, Training, Web and New Media, Web Press | Tagged , | Comments Off on Web Press training schedule for January-May, 2017 announced

Scalable vector graphics: everything old is new again

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.

Posted in Redesign, Technical | 1 Comment

Blogging inspiration: share an event

In this series we inspire you to create fun, insightful blog posts, which help convey an inviting, communicative atmosphere to current and prospective students.

A post we loved

Haven’t posted for a while? Don’t worry. We found inspiration in a recent post from the College of Arts and Letters  about an art professor’s work, which was on display at the Nerman Museum of Contemporary Art. The post included details about the pieces on display and a link to a slideshow.

We liked that this post provided a snapshot of a current event and included images that bring readers to the scene — even if they are unable to travel to the exhibit.

Blogging tip

Want to keep your readers in the loop without renovating your website? Be sure to integrate your blog into your website. This enables readers to see excerpts of your latest posts without leaving your site. You can add blog feed to your site by following these instructions. Need help? Contact the help desk or visit an open lab.

Posted in Web and New Media, WordPress Blogs | Tagged , , , , | 1 Comment

Share the Fall 2016 #BearGrads experience

Missouri State University’s fall 2016 commencement ceremonies will take place Friday, Dec. 16, 2016 at JQH Arena.

Key details

Share your story

Help us celebrate our #BearGrads by sharing your experience on social media. If you are graduating or attending graduation to celebrate with someone, we want to hear about it. You may even see yourself featured on Missouri State’s social media channels.

We encourage you to join the conversation before and during commencement by posting about it on Facebook, Twitter and Instagram and tagging your posts with the official hashtag: #BearGrads.

Make your posts social media savvy

  • Tag your posts with the official commencement hashtag: #BearGrads
  • Share your experience with us by tagging Missouri State University or @missouristate
  • Tag your posts with the Springfield, Missouri hashtag: #SGF
  • If you would like to provide a link for more information on the event, please link to http://www.missouristate.edu/commencement/fall-2016-commencement.htm
  • When you post to Facebook, boost your status update by sharing with a photo or video.
  • Nothing beats a first-hand perspective. If you attend commencement, share photos from or quotes about your experience.

Visual assets

Snapchat

Look for our #BearGrads geofilter on Snapchat Dec. 16 in Hammons Student Center and JQH Arena.

YouTube Live Video

Video

Facebook cover photos

Commencement Facebook cover photo Commencement Facebook cover photo Commencement Facebook cover photo Commencement Facebook cover photo

Twitter cover photos

Commencement Twitter cover photo Commencement Twitter cover photo Commencement Twitter cover photo Commencement Twitter cover photo

Instagram photos

Commencement Instagram photo Commencement Instagram photo

GIFs

BearGrads GIF BearGrads GIF BearGrads GIF BearGrads GIF BearGrads GIF BearGrads GIF

Digital wallpapers

Add #BearGrads digital wallpaper to your desktop or phone screen.

Sample social media posts

  • Congratulations to our #BearGrads! We’re proud of you!
  • Can’t make it to commencement? Watch the ceremonies live online at YouTube #BearGrads
  • #BearGrads has a new member, and it’s my (son, daughter, friend, etc.) (@TagThePerson).
  • What’s your favorite college memory? Share using #BearGrads.
  • Graduating on Friday? Share your photos from the day using #BearGrads.
  • See what our #BearGrads have to say about commencement day: http://bit.ly/1Hlgn1C. Join the conversation with #BearGrads
Posted in Social Media, Social Media Kit, Web and New Media | Tagged , , , , | 1 Comment