News

Coming Soon – WordPress Upgrade to v3.9.1

On Tuesday, July 1st, web.unc.edu will be performing a WordPress Core update to version 3.9.1. This is a relatively minor release although you may notice an improved widget interface and visual editor.  Learn more:

WordPress 3.9 “Smith”
What You Need To Know About WordPress 3.9

When:

Tuesday, July 1 between 6:00AM and 8:00AM. There will be a brief outage of websites (both web.unc.edu and sites.unc.edu sites) including front-end and back-end.

Testing:

Web.unc.edu support staff test key enterprise sites, representative sites on web.unc.edu, and stock plugins interoperability. As there are a vast number of web.unc.edu configurations (themes/plugin combinations, etc.), site administrators are encouraged to test their sites in the testing environments we have setup for this purpose. A few things to consider first:

  • The test site (your site domain with a ‘webdev.unc.edu’ address… websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu). ) is not a production site.  Any and all changes made on webdev.unc.edu will be deleted on or before the beginning of the next upgrade cycle. In addition, site content may not be current since this is a testing environment.
  • If you are off campus you will need to use VPN to access the test site.
  • Content on test sites is approximately 3 weeks old.
  • When viewing your Dev site through SSL (https), you may see a message stating that:
    • “This connection is untrusted.” (Firefox)
    • “The site’s security certificate is not trusted.” (Chrome).
    • “There is a problem with this website’s security certificate.” (Internet Explorer)
Chrome Untrusted Connection

In Chrome – Click “Proceed Anyway”

In Firefox - Click "Add Exception"

In Firefox – Click “Add Exception”

Internet Explorer Untrusted Connection

In Internet Explorer – Click “Continue to this website”

Since this is a testing environment and not open to visitors outside of UNC, it is okay to proceed to the site. Steps to sign-in and test your test site:

  1. If your website is http://sitename.web.unc.edu, then you can test by going to http://sitename.webdev.unc.edu (Note: websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu).  All you have to do is add the ‘dev’ into the URL to get to your site.
  2. After signing-in, perform common tasks such as adding and editing posts, pages, menus, and media.
  3. View changes on the front-end of the website.

Feedback and Help:

If you have any other questions, please contact the Web.UNC group at webdotunc[at]groups.unc.edu. You should also feel free to post issues you come across on the Web.UNC support forums.  It is likely if you are seeing something that we’ve missed in our testing then others might be experiencing the same thing.

BeSafe.unc.edu

“Anne, Billy, and the rest of ITS were truly the MVPs of putting this website together. What impressed me most was the pace at which they worked. We were on a deadline to get the website completed by April, so when I met was them in early March, I was very concerned we wouldn’t make it, but they worked so fast to get a site designed and put the content up. They were also fantastic about translating our ideas for the site into reality. Finally, they showed a true commitment to ensuring the future success of the site. Anne sat down with me and taught me how to work with Word Press so that I could continue to improve the site”.-South Moore

The Executive Branch of Student Government Public Safety Committee approached us in early March about creating and launching the Be Safe site as a one stop source for safety information at UNC-Chapel Hill and the surrounding community. Anne McCarthy, our Web Support Specialist, led the effort for the development of the site by working with South Moore of Student Government. With a focus on easy accessibility, the responsiveness of the site was a high priority! To learn more about how we made sure the site was mobile friendly, read our step by step post about the Responsive Design Development.  Through trainings, lots of emails, and even more edits the site was ready to go live by the goal date of April 1st. Click on the image of their site featured below in the Student Union to explore their helpful resources!

besafeunion

BeSafe.unc.edu Responsive Design Development

Be-Safe-logo

BeSafe.unc.edu is a new site that is centered on providing a “comprehensive source for safety information at Carolina”. Using our Avada theme, the site is automatically responsive. However, it is responsive without being specific to the content on the site itself which leaves room for improvement.  To start, what does “responsive” mean?

“Responsive Web Design or RWD as it is commonly referred to, implies the formatting of Website design in a way that it most optimal for viewing and navigation across a wide range of devices, including traditional PCs, smartphones and tablet devices.” Read more…

 

Difference in Mobile vs Desktop Views

Try pulling up BeSafe.unc.edu on a computer.  View the image below to see what the first part of the site would look like on your computer. Click the image to expand the image.

Desktop View

Desktop View

 

Now try pulling up BeSafe.unc.edu on your phone! View the image below to see what the first part of the site would look like on your phone. Click the image to expand the image.

Mobile View

Mobile View

 

Just from these images you can see how drastically different the two views are. Avada did the “heavy lifting” to make this site responsive but there are still tweaks that can be done to bring the site to a new level in terms of user experience. Seeing as the site is meant for students and students tend to access sites via their phones, the mobile view of this site was critically important.

 

Before and After CSS Tweaks

To show what the site looked like on an iPhone 5 before and after any custom CSS edits were made via the Improved Simpler CSS plugin, view the following images and take note of the accompanying descriptions to understand what decisions were made and why.

Before: Blue Border               After: Green Border

before-after 1 color

Pay attention to the differences in the size of the logo. Decreasing the logo size on mobile/tablet allows the user to begin looking at content that matters to them instead of a logo that is too large.

 

Before-after color 2

Already at this point there is more information being shown on the “After” view than “Before” which saves both time and space.

 

before-after color 3

The focus on decreasing excess space may seem minor when viewing a site on a computer but on a mobile/tablet space is a valuable commodity. Treat it as such and make sure to view your site on a tablet/mobile to see what users are seeing.

 

before-after color 4

Notice that the paragraph text seen on the Before version is removed on the After version. The decision to do this was based on the fact that having a smaller screen size makes the content posted even more important. This content was playing an introductory role and is not necessary enough to warrant making space for it on the mobile/tablet view.

 

before-after color 5

CSS was in place on the site to force the footer widgets to stay at a certain height so that they were uniform on the site. Because of this, the Before mobile version shows the same which causes a lot of extra white space to show that makes for extra scrolling for the person viewing the site. Adding in a media query specifically for the mobile and tablet versions of the site allows those version to render widgets that have a height that corresponds to the amount of content. This decreases extra scrolling and white space which leads to a better mobile user experience!

 

before-before color 6

At this point, the “After” view is done. These final two images show the extra space that users would have had to scroll if CSS tweaks hadn’t been added to optimize the experience.

 

With just a few customization, the site is now much more user friendly and in line with the goal of giving members of the UNC community the resources they need to be safe!

Resources

Lynda.comSign in with your Onyen and password and watch tutorials on Responsive Web Design!

Responsive.is and Responsinator: Two wonderful websites that show what your site looks like on different devices in both portrait and layout view. As you are building your site, this is an easy way to see what your users will be seeing when they access your site on different devices. It also allows you to view your site on devices that you may not have!

How ConnectCarolina Uses MailPoet

ConnectCarolina uses the MailPoet plugin Wysija Newsletters to send Newsletters on a biweekly basis. Their personalized template shown below is one they made by using the drag and drop feature to add onto one of the 50 themes in place.

connectcarolina mailpoet

January 16th, 2014 Newsletter

 

Wysija Newsletters is web.unc.edu’s Newsletter plugin that allows users to send Newsletters to people while on the WordPress dashboard.

  • Drag and drop interface with the option to choose from over 50 different themes.
  • Automatically send a notification email to subscribers when a new post is published
  • Tracks how users interact with the Newsletters/emails that are sent (bounce, clicks, % opened, etc.).
  • Newsletters display properly on over 30 different email clients including Outlook, Gmail, Yahoo, iPhone, etc.

 

 

 

Note: To activate this plugin, see this Support Document.

Executive Branch of Student Government

“ITS helped us from beginning to end, we showed them what we wanted and they helped us make it happen! Thank you to Marcus and everyone at ITS for the tireless assistance.”
-Hannah Fussell

The Executive Branch of Student Government came to us in the Fall of 2013 wanting to create a brand new, responsive site. We had recently added a new theme called Avada that proved to be perfect for the job! Marcus Thompson, our WordPress Specialist, took the lead and worked with Hannah and Brent, two students on the Executive Branch, to create and customize their new site to meet their needs and goal of increased transparency. Click on the image of their site below to explore how they used Avada!

exec branch

How to Create a Pullquote

Overview

Skill level: Advanced- need knowledge of HTML and CSS
Plugins: Improved Simpler CSS

For this post, you will need to activate the Improved Simpler CSS Plugin. If you do not know how to activate a plugin, please follow these instructions.

Screen Shot 2014-03-10 at 12.35.28 PM

Example of a pullquote

For this example, we are going to create a pullquote like the one featured above on the Department of Philosophy site. To do this, activate the Improved Simpler Plugin then navigate to Appearance > Custom CSS. Once there, add the following CSS and select “Save”:

.pullquote {
 width: 170px;
 display:block;
border-left: 3px solid #56A0D3;
font-size: 1.15em;
font-style:italic;
padding: 0 1em 0 1em;
margin: 0 0 1em 1em;
font-weight: bold;
float: right;
width: 35%;
clear: right;
background-color: white;
}

After you have added this Custom CSS, you can then go into the Text Editor and add div with a class “pullquote”. For the example above, this looks like the following:

pullquote

 

Click “Publish” or “Update” if it is an already published page.

Coming Soon – WordPress Upgrade to v3.8.1

WordPress Version 3.8.1 Admin Area

WordPress v3.8.1 – New Post Screen

On Thursday, March 13th, web.unc.edu will be performing a WordPress Core update to version 3.8.1. This update features a significant style change to the WordPress Admin interface; as well as the addition of a new magazine style theme – Twenty Fourteen. For more information on these updates, check out the links below: http://www.sitepoint.com/whats-new-wordpress-3-8/ http://wordpress.org/news/2013/12/parker/

When:

WordPress Version 3.8.1 Responsive Mobile View

v3.8.1 Responsive Mobile View

Thursday, March 13 between 6:00AM and 8:00AM. There will be a brief outage of websites (both web.unc.edu and sites.unc.edu sites) including front-end and back-end.

Testing:

Web.unc.edu support staff test key enterprise sites, representative sites on web.unc.edu, and stock plugins interoperability. As there are a vast number of web.unc.edu configurations (themes/plugin combinations, etc.), site administrators are encouraged to test their sites in the testing environments we have setup for this purpose. A few things to consider first:

  • The test site (your site domain with a ‘webdev.unc.edu’ address… websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu). ) is not a production site.  Any and all changes made on webdev.unc.edu will be deleted on or before the beginning of the next upgrade cycle. In addition, site content may not be current since this is a testing environment.
  • If you are off campus you will need to use VPN to access the test site.
  • Content on test sites is approximately 3 weeks old.
  • When viewing your Dev site through SSL (https), you may see a message stating that:
    • “This connection is untrusted.” (Firefox)
    • “The site’s security certificate is not trusted.” (Chrome).
    • “There is a problem with this website’s security certificate.” (Internet Explorer)
Chrome Untrusted Connection

In Chrome – Click “Proceed Anyway”

In Firefox - Click "Add Exception"

In Firefox – Click “Add Exception”

Internet Explorer Untrusted Connection

In Internet Explorer – Click “Continue to this website”

Since this is a testing environment and not open to visitors outside of UNC, it is okay to proceed to the site. Steps to sign-in and test your test site:

  1. If your website is http://sitename.web.unc.edu, then you can test by going to http://sitename.webdev.unc.edu (Note: websites on sites.unc.edu should go to http://sitename.sitesdev.unc.edu).  All you have to do is add the ‘dev’ into the URL to get to your site.
  2. After signing-in, perform common tasks such as adding and editing posts, pages, menus, and media.
  3. View changes on the front-end of the website.

Feedback and Help:

If you have any other questions, please contact the Web.UNC group at webdotunc[at]groups.unc.edu. You should also feel free to post issues you come across on the Web.UNC support forums.  It is likely if you are seeing something that we’ve missed in our testing then others might be experiencing the same thing.

Custom Favicon

You can now create and upload custom favicons for your site. After creating a favicon, site administrators can upload it to their site in Settings > Custom Favicon. Simply upload the image, insert it into the post, and it will then appear in the URL bar, browser tabs, and other places to help give your site a unique identity.

New for 2014! Avada Theme

Web.unc.edu is pleased to announce the addition of Avada (pronounced like Nevada without the “n”); a powerful, highly flexible and customizable WordPress theme that gives the user control over many style and layout options. Its modern design includes a responsive layout, Retina ready graphics and five different sliders.

Some of Avada’s features include:

  • 100% fully responsive (theme and sliders)
  • High resolution graphics
  • Advanced admin panel that allows for customization of layouts, styles and colors
  • Shortcode generator
  • 2D/3D Layer Slider
  • Revolution Slider
  • Flex Slider
  • Elastic Slider
  • Theme Fusion Slider
  • Boxed and wide layout possibilities
  • Font Awesome icon integration
  • Advanced blog and portfolio options
  • Advanced font options
  • Unlimited sidebars
  • Many custom widgets

Avada acts, in many ways, as blank canvas of design layouts without the need for any coding knowledge. Check out some web.unc.edu sites using Avada:

The Executive Branch of Student Government

The John Curtis Student Enrichment Fund

Global Gap Year Fellowship

Additional custom styling was these sites was achieved utilizing the Improved Simpler CSS plugin and are not part of the Avada theme.

Latest News in the Dashboard

Now you can find the latest web.unc.edu news and info right in the dashboard. After signing-in to WordPress, you’ll notice these posts on the main Dashboard screen:

web-news

Introducing the P2 WordPress Theme – Real-Time Communication and Collaboration

The P2 WordPress theme is specially designed to transform a standard WordPress site into a Twitter-like microblogging platform complete with a posting form on the homepage for logged in users. It’s also combined with threaded inline comments that display under each post on the homepage.  The best part is, you never have to refresh your site and you rarely need to visit the Admin area.

The P2 theme is perfect for group, class or team projects or for any collaboration when face-to-face meetings are impractical or logistically impossible.

Check out the video below to learn more about the P2 theme.

Lynda.com Training Library

Lynda.com offers a vast collection of online courses and tutorials on topics such as video production, photography, computer software, business applications, leadership, and much more. The University is now providing Lynda.com training resources available — free — to all faculty and staff. There are many videos available on WordPress site configuration, themes, and so on which can be helpful for learning more about the web.unc.edu site publishing system, which runs on WordPress. In addition, there are many other related videos on content strategy, user experience, information architecture, design, etc. which may aid in planning and building your web.unc.edu website.

Faculty or staff member? Get started with Lynda.com. (Note that some WordPress videos may not be applicable to the configuration of the campus WordPress service.)

WordPress Upgrade (Updated)

12/17 Update  - WordPress version upgrade to 3.7.1 completed.

WordPress is scheduled to be updated Tuesday, December 17th, 2013. Here are important things to know:

WordPress will be updated to version  3.7.1. Most of the changes are “under the hood” (security, bug fixes, architecture) and will be unnoticed by administrators and content editors though there are minor changes in how menus are organized in the administrator (i.e – menus are selected via a dropdown instead of horizontal tabs).

(more…)