News

Introducing “Heelium”

In response to the requests for a modern and responsive UNC-branded theme, we’re excited to announce the university wide release of Heelium! Heelium is powerful, flexible and easy-to-use theme built on a fluid flexible grid that automatically adapts to fit any screen—computers, laptops, tablets or smartphones.

In addition to the new theme, we’ve added a new plugin called “Easy Bootstrap Shortcodes” that works in conjunction with the new theme. This plugin will add options to the visual editor to make adding features like accordions, tabs, toggles and more right in the visual editor!

Heelium will be the default theme for new web.unc.edu sites and we hope that many folks using older themes will transition to it. You can see the Heelium demo site and documentation here.

 

Heelium

Awesome Web Design and Development Resources

Have you searched WebDotUNC’s support articles and forum but still haven’t found what you need to achieve your desired site design? We’ve compiled a list of some of the best resources for web design and development techniques. Not everything on these sites is applicable on WebDotUNC, but they can provide a lot of insight into various web technologies.

Important Notes:

Before we get started, it is important to note a couple of things about the WebDotUNC platform:

You cannot edit the CSS in your WebDotUNC’s theme, but you can take advantage of the Simpler CSS plugin to make a place for yourself to override some of that theme’s CSS. Check out this article for more information on the Simpler CSS plugin.

We will not allow you to edit or add (nor are there any plugins we will allow you to install and activate in order to do so) any PHP or JavaScript code. 

Smashing Magazine

Smashing Magazine provides articles on numerous web topics – its sections are titled

Smashing Magazine Logo

The Smashing Magazine logo – credit goes to them for this image.

“Coding,” “Design,” “Mobile,” “Graphics,” “UX Design,” and “WordPress, including a range of subtopics beneath those. What’s more, they update regularly. If you are looking for general guidance on a random web topic, starting your search at Smashing is a safe bet.

A List Apart

A List Apart may appear simple at first glance, but beneath its clean, newspaper-esque homepage, you will find a large collection of reading-worthy pieces that have inspired and encouraged conversation about many web topics. For instance, Ethan Marcotte’s “Responsive Web Design,” article is noted for coining the titular term.

CSS Tricks

CSS Tricks has a wealth of information. Their Almanac section provides lists of selectors and properties that come in

CSS Tricks Logo

The CSS Tricks Logo – credit goes to CSS-Tricks.

handy; each listing includes an example of how to use the concept in question, plus a nice summary of its functionality. Be sure to check out their snippets section as well for an extensive trove of, well, tricks, especially for CSS. They also list tricks for other languages, though you can’t make use of all of them on the WebDotUNC platform.

Mozilla Developer Network

Another solid resource for many different web concepts is the Mozilla Developer Network site. It offers tutorials about not only coding elements (including HTML, CSS, JavaScript and others), but about Firefox’s inspector tool as well. Trying to figure out why something isn’t working the way it should in Firefox? You might want to try using the inspector.

Stack Overflow

Stack Overflow is a resource that many young coders learn to love quickly. Stack Overflow does not only cover typical web design topics, but covers other non-web topics such as Java and C++ – with its tagging system, you can provide context for whichever topic(s) you are posing your question about. Stack Overflow presents itself in a question-and-answer format; users ask questions about a problem they are having coding and the community attempts to provide guidance and answers as to how to find solutions to their problem. However, in some cases, you may not find an answer to your question….

Wisdom of the Ancients Comic Panel

“Wisdom of the Ancients,” – credit goes to xkcd.

Structure Your Site: Techniques for Information Architecture

Information architecture? Isn’t architecture about buildings? Why would information have to be…built?

“Information architecture,” (or IA for short) refers to the structuring and organizing of information in a system so that its users may find what they need. This is especially important when it comes to websites; users must be able to quickly understand the navigation structure of a site in order find the information they seek.

If you are getting reports that multiple users cannot locate specific resources on your site, you may want to re-examine the navigation structure and information architecture of it. Maybe its organization is confusing for them.

Creating an Information Architecture for a Site

How would you go about creating the IA in the first place? There are a variety of options, and which ones you will depend on the size of your site, whether or not the site is new, how much content you have, time constraints and other factors. IA as a field is intricate; entire books and plenty of articles have been written on the subject. Today we’ll give a brief overview of a few options for taking stock of what content you have and planning out what your site’s navigation ought to look like.

Small and Simple New Site? A small chart may be enough.

This is a quick example I sketched up on one of WebDotUNC’s whiteboards (whiteboards are awesome, especially for wrapping your head around

IA diagram on a whiteboard.

A simple IA diagram, showing hierarchical structure of a hypothetical student organization site.

content). Essentially, you try to chart out the hierarchical structure of a site. In this example, I imagined how a student organization might want to structure a site. The home page would be a the top level; secondary pages – such as an About, Roster, Outreach and Alumni page – would serve as either standalone pages or introductory section pages for pages that would subsequently be categorized beneath them (5K’s and Volunteer, for instance, could be found under the Outreach “overview page”).

If you need more official or polished documentation of what a structure for your site might look like, you can also use programs such as Microsoft Visio, Adobe Illustrator, or even Microsoft PowerPoint to generate charts.

Your site does not have to be brand-new for you to consider sketching out a chart – charts can help you visualize current sites as well, and force you to think about where different pages and content make the most sense.

IA documentation

IA chart documentation for an intranet, made in Adobe Illustrator.

Got your site already? Consider a Content Inventory

Content inventories can be daunting initially, depending on how much content you have. What do you do to perform a content inventory? Essentially, you’ll want to go through each page of the site and document its  title and URL, trying to adhere to the current structure of the site. Spreadsheets (made using

Google Docs’ Spreadsheets or Excel) work well for this. For example, below is a screenshot of the content inventory performed on ITS in January 2014, prior to its re-design. You can see that it included a lot of metadata (data about the files) that was not necessarily crucial.

Content inventory of ITS website

A portion of the content inventory done for the ITS website, prior to its redesign.

Essentially, a content inventory allows you to take stock of what you have on a site and from there, interpret what it may be missing, what you may want to get rid of, and what you may want to re-structure.

Card sorting

The last option we’ll talk about will be card sorting.  Card sorting is especially good for understanding what sort of navigation your users might expect to have on your site.

In card sorting, you’ll be sitting down with a person and asking them to sort items (in this case, probably the titles of all pages of your site) into groups or categories that they think make sense to them. After they have finished sorting the items, you will ask them to give each group a category title. Index cards,

Cardsort

A rough cardsort done with a list printed from a word document.

sticky notes, and even pieces of paper cutouts with the titles printed on them can work well for card sorting. It’s probably a good idea to have your  cardsorting subject come from a group of potential users for your site in order to have more relevant feedback.

More Resources for Information Architecture

If information architecture seems like a pretty cool topic to you, you might be interested in reading about it from some other sources. Smashing Magazine, A List Apart and Boxes and Arrows are solid resources for finding more to read. Information architecture is a vast field, but definitely worth learning about.

Get Responsive with Web.unc.edu!

Responsive web design is a good way to ensure that your site provides a pleasant experience for whoever is using it.

You might be wondering, “What is responsive web design?” (RWD for short)

Responsive web design, in short, means that your website adapts and adjusts how it displays based on what size screen a user is using to view it.

Essentially, someone could be viewing a site on their desktop computer and know their way around it pretty well. However, if they go to view it on their phone later, depending on whether or not a site is responsive, they may have to do a lot of pinching and zooming in order to access the content if the site is still the same as it was in desktop view; a responsive site would respond to the size of the viewer’s phone on mobile, adapting so that it adjusts to the screen size of the phone.

Let’s take a look at a couple of examples to illustrate what is and what is not responsive design:

Case Study: help.unc.edu – Responsive & Non-Responsive Versions

help.unc.edu desktop

The full desktop-size help.unc.edu website.

 

Here, we can see the full desktop view of the help.unc.edu website. Notice that it provides a large search box, icons, and plenty of links for users to find resources about Information Technology here at UNC-Chapel Hill.

help.unc.edu on an iPhone 5

The appearance of help.unc.edu on an iPhone 5.

Now, on the right below, you can see how an iPhone 5 would display the help.unc.edu site. Because the site responds to the size of the screen it is being viewed upon, the website has adapted and rearranged its contents to fit within the screen size the is using. If a student is trying to get help connecting their computer to wifi, they can quickly and easily launch a search from this screen via their phone.

Responsive sites don’t just work between phones and desktops; they also respond to tablets.

Responsive help.unc.edu on a Nexus 10 tablet

View of help.unc.edu on a Nexus 10 tablet.

 

On the left, you can see how help.unc.edu displays on a Nexus 10 tablet. Very similar to the desktop view, but slightly less spaced out, including a view of the footer and other content.

 

Non-Responsive Site Example – the old help.unc.edu

Previously, the help.unc.edu site was not responsive. Previously, its desktop view looked like this:

non-responsive help.unc.edu desktop site

The old version of the help.unc.edu, prior to styling it for responsive-ness.

You can see that the old help.unc.edu site looked a little different stylistically. Look below to the right, and you can see how the old help site would be portrayed on an iPhone 5.

non-responsive help.unc.edu on an iPhone 5.

The old help.unc.edu on an iPhone 5.

It is clear that this view would be slightly less useful than the responsive version, and likely very frustrating for users to work with. One would have to swipe to the right and hope they are able to easily hit the search box on this layout. You might be familiar with the site because of the desktop version, but the mobile experience is still an unpleasant one.

 Responsive WordPress Themes

WebDotUNC offers a number of responsive themes so that you can make your website responsive (without writing any code yourself!). Some of the more widely used ones are the following:

  • Hemingway
  • Avada
  • Responsive (yes, it is really called that)
  • Twenty Twelve
  • Twenty Thirteen
  • Twenty Fourteen

For more technical details behind the CSS (and to read the original article written on responsive design) check out this article by Ethan Marcotte: A List Apart: Responsive Web Design. A List Apart is an excellent resource for web development and design articles in general.

Revolution Slider: Alternative First Slide, Reset Options and Troubleshooting

Today, we will go over the “Alternative First Slide,” “Reset Options,” and “Troubleshooting,” options in Revolution Slider’s Slider Settings.

Alternative First Slide, Reset Options and Troubleshooting Options

Alternative First Slide, Reset Options and Troubleshooting Option Drawers

This is the last post in our series about Revolution Slider’s options. Previously, we have covered the following slider options:

Alternative First Slide

Start With Slide – You can select which slide you want your slider to start with; it does not have to be the default, slide #1.

First Transition Active – Choose whether or not you want to have an active transition for the first slide you display. This only controls the first slide you display, not subsequent slides. It will override any default transitions you may have for the first slide, so only choose this if you want a special transition for the first slide.

First Transition Type – Choose which type of transition the first slide will have. You have a long list of options.

First Transition Duration – Choose how long the first transition is, in milliseconds.

First Transition Slot Amount – The number of “boxes” your slide is divided into with its transition.

Reset Options

Reset Transitions – If you decide that you want to change all set slide transitions back to another kind of transition, you can perform this action here.

Reset Transition Duration – Value, in milliseconds, for the length of each transition.

Troubleshooting

jQuery No Conflict Mode – If you have some strange issues with JavaScript errors, you can try to turn this “No Conflict” mode on and off. By default, this is enabled.

Put JS Includes to Body – May allow you to resolve certain JavaScript issues you are getting, but is not guaranteed. For instance, if you are getting TypeError errors, you may want to click the “True” option and see if this fixes it. By default, however, this is set as False.

Output Filters Protection – Protects against WordPress filters that may introduce HTML into the shortcode output used to display Rev Slider.

Revolution Slider: Thumbnails, Mobile Touch, Mobile Visibility, & Single Slide Options

Thumbnails, Mobile Touch, Mobile Visibility and Single Slide

Thumbnails, Mobile Touch, Mobile Visibility and Single Slide Option Drawers

In this blog post, we’ll focus a bit on the mobile options for Rev Slider (titled “Mobile Touch,” and “Mobile Visibility”), as well as more specific details about using thumbnails and only portraying a single slide (Thumbnails,” and “Single Slide,” respectively). Previously, we discussed Rev Slider’s Position, Appearance, Spinner and Navigation Options, the Main Slider Settings Section, and the General Settings and Google Font Settings. Be sure to check those posts if you want more information about any of those options.

Thumbnails

Thumbnails, (if you recall the Navigation Options for Rev Slider from one of the previous blog posts) are a portion of the navigation for Rev Slider. For an example of what those thumbnails look like, check out the screen cap of our test slider below:

Rev Slider Showing Thumbnails

Our sad Firefox is back, now with some thumbnails to keep him company.

Here are the options you have with thumbnails:

Thumb Width – Controls how wide your thumbnails are.

Thumb Height – Controls the height of your thumbnails.

Thumb Amount – This is a little strange as far as wording goes (especially since it expects the value in pixels), but this is the “amount” of thumbnails visible at the same time a thumbnail is selected.

Mobile Touch

Touch Enabled – Allows you to control whether or not the user can control the slider’s actions when accessing it from a mobile device. Swipe Velocity – Defines how sensitive the slider is on mobile. Ranges from 0.1 – 0.9. Smaller values mean a higher responsiveness to touch.

Swipe Min Touches – The minimum number of fingers needed to trigger a swipe.

Swipe Max Touches – The maximum number of finger touch inputs a swipe can take.

Drag Blog Vertical – Allows you to prevent vertical scrolling when a user is swiping.

Mobile Visibility

Mobile Visibility Settings

Mobile Visibility Settings

Hide Slider Under Width – You can hide the slider if the screen width is under a specified number of pixels.

Hide Defined Layers – Hide specific layers if the screen width is under a specified number of pixels.

Hide All Layers – Hide all layers if the screen width is under a specified number of pixels.

Hide Arrows on Mobile – Hide the arrows used to navigate when the user is on a mobile device

Hide Bullets on Mobile – Hide the bullets in the slider navigation when the user is on a mobile device

Hide Thumbnails on Mobile – Hide the thumbnails in the slider navigation when the user is on a mobile device

Hide Thumbs Under Width – Hide the thumbnails if the screen width is under a specified number of pixels.

Hide Mobile Nav After – Hide the mobile navigation after a specified number of milliseconds

Single Slide The only option in the “Single Slide,” drawer is to loop or not loop the slide – in other words, if you have a single slide, do you want to repeatedly transition through it?

Revolution Slider: Position, Appearance, Spinner & Navigation Options

Position, Spinner and Navigation Drawers for Rev Slider

The Position, Appearance, Spinner and Navigation option drawers for Rev Slider.

We are going to continue detailing the various options for Rev Slider.

Today, we will specifically discuss the “Position,” “Appearance,” “Spinner,” and “Navigation,” slider options.

Previously, we talked about the Main Slider Settings Section and the General Settings and Google Font Settings, so check those posts if you are curious about those sections of the Rev Slider options.

Position

The position settings in Revolution Slider essentially allow you to edit the portion of its CSS (Cascading Style Sheet) that controls how it is positioned on the page. You can choose to align the slider to the left, middle, or right on a page, and are given the option to provide margins for the top, bottom, left and right sides of the slider as well. For more information on CSS and margins, check out this tutorial.

Appearance

Appearance Section

The “Appearance,” section in Rev Slider Options

Appearance covers several features of Revolution Slider that you may find you wish to get rid of or at least alter at first glance.

Shadow Type – As a default, Rev Slider provides a drop shadow beneath its slider. You can change its type here (there are three different options), or you can remove it entirely (“No Shadow”).

Show Timer Line – As a default, Rev Slider will run a line across the length of a slide to illustrate how much time is left before it transitions to a new slide. You can control if this appears on the top or bottom of the slider, or remove it completely.

Padding – Allows you to add padding to the slider itself. Be careful not to set it too high or you may end up with a very strange slider – for example, in the image below, I have set the padding to 50 pixels:

A strange slider.

A strange slider. Credit belongs to Mozilla.org for the adorable Firefox image.

Background Image Options are, as mentioned in on the options screen, best used with transparent slides. If you use slides that are not transparent, you may not see any background colors or image changes, depending on what settings you select.

Background Color – Allows you to input a hexadecimal value for a background color. If you click on the field, it will offer you a color picker so that you do not have to research the hexadecimal value for which color you want.

Dotted Overlay Size – Allows you to provide a texture to your slide. You may wish to experiment with these – see the example below. You can these on imaged slides.

An image overlay.

A slide overlaid with a texture.

Background Image URL – Allows you to provide a URL that links to the image you would like to provide as a background image.

Show Background Image – Allows you to select whether or not you want to show a background image. This must be selected in order to work with the subsequent options in this section.

Background Fit – Allows you to choose from the options of “cover,” “contain,” and “normal,” for your background.

Background Repeat – Allows you to determine whether or not your background repeats.

Background Position – Allows you to select the position of the background.

Spinner

Choose Spinner – You have the option of selecting from six (numbers 0 – 5) different spinners.

Spinner Color – Options 1 – 4 provide a “Spinner Color” option. Like the “background color” option in the previous section, you are provided with a field for a hexadecimal value, and a color picker when you click on the field.

Navigation

Navigation offers a long list of options. The good news is, three of its subsections are essentially the same topic, each for different elements (Positions), so we will condense them down to one listing here in a subsequent paragraph. First though, let’s discuss the initial subsection of Navigation, which is a bit different from the next three.

Stop on Hover – allows the user to stop a slide when they hovers over it.

Keyboard Navigation – allows a user to use the left and right arrow keys on their keyboard to control the slider for an experience where they have more control.

Navigation Type – allows the selection of a specific style of navigation within the slider. Your options are Bullet, Thumb (short for Thumbnail), or None.

Navigation Arrows – Allows you to provide navigation arrows in the slider. Your options are Solo, With Bullets, or None.

Navigation Style – Allows you to determine the style of the navigation. Your options are Round, Navbar, Old Round, Old Square and Old Navbar.

Always Show Navigation – Choose whether or not you always display navigation in the slider.

Hide Navigation After – Allows you to hide the navigation after a certain number of milliseconds. If you selected “Yes,” in the “Always Show Navigation” menu, you won’t be able to edit this field.

Position Sections – These sections list the same options for each element of the slider they focus on; they cover the positions of the following elements: Bullets/Thumbnail, Left Arrow, Right Arrow. Here is a listing of the specific options they have:

Horizontal Align – Allows you determine where you horizontally align the element. Your choices are Left, Center and Right.

Vertical Align – Allows you to determine where you vertically align the element. Your choices are Top, Center and Bottom.

Horizontal Offset – Allows you to offset the element horizontally, in pixels.

Vertical Offset – Allows you to offset the element vertically, in pixels.

Revolution Slider: General Settings & Google Font Settings

Previously, we went over the Main Slider Settings for the Revolution Slider plugin and discussed how Rev slider offers a lot of customization with its long list of options. Today, we’re going to go over two specific subcategories of those options: The “General Settings,” and “Google Font Settings” sections on the New Slider page.

General Settings

General Settings

The General Settings Section

The General Settings section allows you to control features related to how the slider behaves on the page.

Delay – The time it takes for one slide to move to the next. This is measured in milliseconds – so in with the current settings, it each slide will have 9 seconds on-screen before the slider switches to the next one.
Shuffle Mode – Allows you to tell Rev Slider to shuffle through slides randomly, rather than going in any specific, predetermined order
Lazy Load – This delays images loading and essentially waits to load a slide until a user triggers its loading. When a user clicks an arrow on the slider or clicks a portion of the navigation on the slider while the slider is set to lazy load, the slider will take a moment to load the next slide and then display it.
Use Multi Language (WPML) – Allows you to create a slider that can be translated into different languages. For more information, check out this documentation.
Stop Slider – Allows you to stop the slider on the first slider.
Stop After Loops – You can stop the slider after a certain number of loops through.
Stop At Slide – You can tell the slider to stop running at a specific slide.

 

Google Font Settings

Google Font Settings

Google Font Settings in the Revolution Slider Plugin

Beneath the General Settings section, you’ll see the “Google Font Settings” header. Click that, and you’ll be greeted with a section listing your options.

You may be wondering what a Google Font is – Google offers a selection of fonts, for free, that are adaptable across the web. Historically, it has been more difficult to load fonts across different browsers, and fonts can cost quite a bit of money. Google has made a large library of fonts available for anyone to use on their website. To investigate these font options, check out the Google fonts library.

By default, if you look at the box beneath “The google font families to load:,” you will see a link to the stylesheet for PT Sans. By clicking the “Add New” button beneath this, you can copy and paste link to any other Google font stylesheet you wish. You can get access to the Google font stylesheets of particular fonts by looking through the options of the previously mentioned Google fonts library.

Revolution Slider: Main Slider Settings

Revolution Slider listed in the Dashboard Navigation

Revolution Slider listed in the Dashboard Navigation

With Revolution Slider, you can make a variety of cool slideshows (also called carousels by some).
You can even make sure the slider re-sizes for different size screens with a certain setting selected. Revolution slider can be a little overwhelming at first.

How do you get Revolution Slider (nicknamed “Rev Slider” for short) to be active on your site? Go to the “Plugins” page in your site’s dashboard, then scroll down to click “activate” in the list of plugins you see.

Now you should see “Revolution Slider” on the lower left navigation section of your dashboard.

Click that link, and you’ll be greeted with a page listing all your Revolution Sliders. Click on the “Create New Slider” button to get started. This is where all your options can feel a little overwhelming.

Today, we’ll discuss the “Main Slider Settings,” portion of the page (on the left-hand side). In subsequent posts, we’ll also go into detail about other nifty features of Rev Slider.

Slider Settings

Slider Settings

Slider Title – This should be a title that makes it easy for you to recognize the slider when you go to edit it in the dashboard again later, especially if you decide to have multiple sliders on your site. You don’t want to look at a list of slider names later and not know what they refer to.

Slider Alias – You might want this to be the same as the Slider Title, just for simplicity and memorability. This is the feature that allows the plugin to supply you with a Slider Shortcode in the next field.

Slider Shortcode – This is the shortcode that you will call in a page (or post, if you wish) to place the slider in that location.

Source Type Options – This gets a little complicated. Chances are, you won’t want to use the two Post choices for a slider and will go with the gallery instead, but we’ll go over them here anyway.

The Posts Source Type is Selected.

The Posts Source Type is Selected.

This is how the settings look when you opt for “Posts” as your source type.  Since I don’t have any categories, it doesn’t really give me any options for what categories of posts I would like to display in the slider. If we click “Sort Posts By,” we have a number of different options to sort how they are displayed, including the following: Post ID, Date, Title, Slug, Author, Last Modified, Number of Comments, Random, Unsorted, and Custom Order.

You can also select a sort direction here, plus limit the number of posts you include, and how many words the excerpt from each post will consist of.

If you click on the “Specific Posts” option, you will be given the option to list specific post IDs to select which posts you want.

The gallery option will allow you to upload slides and pictures after you save your settings.

Slider Layout: This is also somewhat complex, but don’t worry, we’ll explain each of them.

  • Fixed: This means your slider will not resize itself based on screen size; you simply put in a set width and height in the “Grid Width” and “Grid Height” boxes below and you are done.
  • Custom: This allows you to devise your own responsive sizes in that area below. For instance, if you know the screen width one of your users will be using is 320 pixels, you might want to make sure your Rev Slider only covers 300 pixels worth of that in width.
  • Auto Responsive: Again, you can customize your width and height of your slider, but Rev Slider will then predict what width it needs to be for each size device it is shown on.
  • Full Screen: In this case, you have the option of making the slider go fully across the page – but be careful, because this will depend upon the template of the page you have set it to display on. It asks for your offset containers – CSS classes and divs that it needs to know about so that it can fit neatly on the screen. Minimum fullscreen height allows you to tell it how to size itself.

One of the nicer things about Rev Slider is that it tries to give you an idea of its anticipated layout in the layout example box near the bottom of the screen. Be sure to play with the different options to be sure you have what you want!

Fullscreen Align: Allows a slider to be aligned on a full-screen page

Unlimited height: Allows the slider to have an unlimited height.

Force Full Width: Makes the slider have a full width

WordPress Security Update

icon-lock

The web.unc.edu team takes website security very seriously. From time-to-time, announcements are made about security vulnerabilities that require immediate action. Yesterday we learned that WordPress site administrators needed to update to the latest release, 3.9.2, to patch a vulnerability. We promptly updated the system this morning at about 7:30AM.

 

Security is a shared responsibility. Learn how you can play a role too.

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.