Improvements Coming to Tarleton's Homepage

The Web Services team will be implementing improvements and changes to Tarleton's homepage on the evening of August 18th, 2015. Changes you will notice include:

• New degree search bar below the main slideshow
• Consolidated "Locations" and "Spotlight/Highlight" sections on wide-screen sizes
• Gutters, otherwise known as "white space" or "margins" have been made larger on the outside edges of page content for wide-screen sizes

Degree Search and Repository

The most exciting new feature to Tarleton's homepage is the degree search/degree repository. This section will allow prospective students to "shop" our degree program offerings straight from Tarleton's homepage. The visibility of Tarleton's degree programs has needed improvement for quite some time, especially considering that according to the 2014 Noel-Levitz E-Expectations Report, 97% of seniors said they found college websites to be reliable sources of information and over 45% of prospective students and parents listed academic program listings or details as one of their top three priorities when looking at a university's website. Each degree page in the repository lists information that is tailored to what prospective students look for when shopping degrees, including what is "different" about the degree compared to other institutions, what someone can do with the degree after graduation, what special facilities and features are available, and much more. Web Services staff and student interns worked with faculty members and other staff over the past year in order to collect the information for these new pages.

Locations and Spotlight/Highlight Section Changes

Web Services continually evaluates content to ensure that it is being provided in the most effective manner possible. One area of the homepage that has been reorganized includes the "Locations" and "Highlights" sections. On wider screen sizes, these two sections originally took up quite a bit of space, each taking up a full "row" of space across the screen. Moving the two sections to be side-by-side on desktop screen sizes is a more effective use of space. On cellphones and some tablets, these sections will continue to be vertically organized instead of side-by-side.

Larger gutters for wide-screen devices

Content, whether on the web or in print, can be difficult to read or follow if it spreads too wide across the medium on which it is situated. This is the reason why newspapers have stories organized into a "column" format. The same holds true on the web. We discovered that with the increasing widths of desktop computer screens that it would be important to implement "gutters" on our responsive webpages. You will notice on wide and ultra-wide screens that content is now consolidated to the center of the screen, with white-space on the sides. This should allow for better usability on those types of screens.

There are many other technical modifications we have worked on for this implementation, which we will go into with detail in the coming days. The entire Web Services team has put in countless hours for this project and I'm excited for these new features to be available for everyone.

If you have questions about any of the changes, just send me an email at djhunt@tarleton.edu.

-Daphne

Student Employee of the Semester Award - Spring 2015

Each semester we award one of our student employees with the "Student Employee of the Semester Award" in web services. This semester's award was given to our student intern, Yaritza Corrales.

Morgan Hammond, Yaritza Corrales, Daphne Hunt

Yaritza is a star-performer in everything that she does in Web Services. She has made great strides in collecting and placing content for our new degree pages. Yaritza has well-written communication and has done well with tackling difficult situations. Her eager attitude and pleasant demeanor has made an impact in our office. She is quick to share ideas and suggest new opportunities for engagement.

Left to right: Ernesto Martinez, Danielle Dunigan, Colton Sheffield, Silvia Fuentes, Josh Roelofs, Daphne Hunt, Morgan Hammond, Yaritza Corrales, Karole Schroeder

Web Services has had a busy semester, and could not have completed the large number of projects and tasks without having such a strong team. We look forward to continuing to serve the university this summer as we continue to roll-out our new responsive degree program pages.

-Daphne

Catching Up: Web Services in January 2015

Despite the break in December, we've never slowed down in Web Services since we came back. Some of the highlights include working on improving publishing services through Cascade Server, improving project management processes for web updating/programming, and preparing for the 2015 Texas A&M System Technology Summit next week in Galveston where we will be presenting at not one but two sessions!

Cascade Server Publishing Queue

Despite positive results from stress testing the publishing queue when using the hosted solution through Hannon Hill, we were hit by numerous problems when we moved the service off Tarleton's physical site. Hannon Hill has been very helpful assisting us and our server team in troubleshooting the issues. While there are a few bugs that still need to be fixed on Cascade, we also found that many of the problems were user error. Moving forward, these are the things all web maintainers need to keep in mind:

• Unless you have made changes to the left navigation, footer information, or multiple changes across the website, you should avoid publishing entire folders. If you are publishing entire folders, please select only one destination: WWW/Full Site/WWW - main
• Make sure all files are named appropriately (i.e., no spaces, dates) and with common file extensions (i.e., filename.jpg, file-name.docx, name-of-file.xls, the-filename.pdf). Please use ZIP files for content that does not use common file extensions.
• Please remove all unnecessary files from Cascade, or we will remove them when they block the publishing processes from completing successfully. Cascade is not storage, and the web server cannot handle non-Windows based file extensions (i.e., files only used on Macs).

 
Presenting Our Experiences at the Technology Summit

Many members of The Texas A&M University System have not made the inevitable leap to responsive design, so the System invited us to present our experiences of going responsive, completely in-house with a full-time staff of only four people. Our entire full-time Web Services team will be there to present on the topic. The below mentioned Project Management process change will be a part of our Lessons Learned as we present to our fellow System members our timeline for converting to responsive.

No conversion should be done without serious thought and understanding of this complex technical process. As we compiled our timeline, we also looked at how many training sessions, webinars and conferences we've attended to get to this point. During the last several years, we've participated in at least 57 total training sessions: 19 with topics more focused on accessibility, 26 on content strategy, 27 on web development, 18 on marketing, 32 on strategic planning, and 12 on responsive web design. We feel like we never left college... literally and figuratively.

Daphne Hunt will speak with TAMU colleagues at an additional session on our experiences working with Hannon Hill's Cascade Server. Tarleton is one of the oldest members in the System to be using Cascade having started in the spring of 2009. That's right, we are in year six!

Project Management

We receive numerous tasks via emails, walk-ins, phone calls, and committee requests every day, and with our growing staff, it was becoming more challenging to track all these processes as well as keep everyone informed of what project was being done by whom. We are working on multiple solutions to improve this process. 

New Request Web Updates Form

Located on the Web Services website, the new Request Web Updates page explains what updates and web development can be requested or needs to go through a different process. Once you've read through and become familiarized with the process, you can directly request web updates or development. Web Services may contact you for further clarification or instructions on how you can make certain updates.

These requests are automatically placed in our project queue maintained by Morgan Hammond who delegates these tasks to our student interns or office staff where needed based on the priority and due date provided in the request.

For the month of January, Web Services has completed at least 85 requests, including the design of numerous digital ads.  We also started training two new student interns, Colton Sheffield and Yaritza Corrales, and we provided 4 Cascade Server training sessions in the Library Training Center. 

Getting Sass-y Behind the Scenes With Process Changes to Web Development

While we make updates to the old website, we are still in the arduous process of building the new responsive web pages for departments to use. This is a very technical task and requires more than one set of hands (or creative minds) to accomplish, however, the way we've been approaching development has been quite old school and needs a millennial facelift.

For example, the web developer and web programmer in our office receive numerous requests all the time to make adjustments to our single CSS file which controls the look, feel, and behavior of our website. Let's say theoretically (though events like this really do occur) the University Digital Advisory Committee wanted to do AB testing of a module while we are fixing a problem with the latest operating system for iPhones while we are working on new responsive modules for departmental webpages while we are fixing the search engine results look due to a different bug. *deep breath* This is a time consuming process to compare all copies of our CSS for all the above solutions and implement a single CSS file with all the proper corrections. Without making any mistakes. *exhale*

Most web developers nowadays approach the CSS through a "preprocesser" (before compiling into a single file) script. CSS is a programming script for all the aesthetics and interactions you see on the browser, however, using an extension like Sass (Syntactically Awesome Style Sheets) or Less (commonly known as LESS) allows multiple developers to work on different aspects of the style without stepping on each other's toes and do so with programmers' favorite tools, like variables and functions, to repeat common processes without as much work.

This allows us to do proper AB testing where we can adjust a single aspect of the CSS file by compiling only certain Sass files and inserting them on test pages without breaking other parts of our CSS that we may be fixing on another set of Sass files. We control which pieces are available where we need them, moving large blocks of code instead of very small, delicate lines of code.

We go back and forth on when we should have started using Sass. Our plan in Project Squishy was to roll out the new responsive design during a time when the students could get used to it before classes started up again. We were more comfortable working directly with CSS, knowing that converting to Sass would be a huge learning curve and slow down that process. That being said, there are numerous instances, like the theoretical set above, that could have been resolved faster had we moved slower with the roll out of Homepage 1.0. Having many of the new modules in place behind the scenes for the departmental pages even before Homepage 2.0 was implemented, we are having to go back and convert everything to Sass to make the process faster in general. To be honest, it was going to slow development down at the front end or back end of the development process no matter what. Good? Bad? You can't learn without making a few mistakes. We think these will be good for everyone in the end.

Happy Holidays from Web Services!

We hope everyone has a joyful month, and let's hope for a little snow while we are on holiday break!

Homepage 2.0 Goes Live Today

Web Services has been working on solving a number of bugs found on the homepage and making some improvements to the page interface for better functionality on all devices. After all the device testing, we are rolling out Homepage 2.0 today.

Homepage 2.0 Bug and Change List

• Bug fixes for iPhones, Androids, and Windows Phones.
• Fixed hanging on scrolling up and down the page on mobile versions.
• Fixed expanding/contracting menus on mobile navigation.
• Improved mobile navigation.
• Fixed background page appearing underneath mobile menus and search fields.
• New and smoother header reveal on scroll up and disappear on scroll down to provide more real estate for page content.
• Mobile navigation appears and disappears smoother.
• Improved tabbing through items and navigation on the page.
• Improved form field validation checking.
• Improved load time.

Should you discover any problems or have compliments on the changes (we love hearing when we've done something right), please Submit Feedback on the Changes for the Homepage.

Technical Bug and Change List

Mobile-Specific Bugs

• iOS8
• scroll unresponsive
• mobile main Menu jitter
• quick double tap closes menus
• Windows Phone
• search clicks register to other elements
• scrolling in mobile windows phone during search scrolls down to main page

Sticky Header

• added 3 states to the mobile and desktop header
• transitions between hide, show, and -200px off-screen
• major  CSS changes supporting elements to allow position relative as a default position when resting at the top

Lazy Load Bugs

• $("[data-original]”) looped to itemize each element after the dynamic elements are loaded
• fixed footer images not loading properly

Form Inputs and Validity in Webkit

• HTML5 enforced validity for HTML5 compatible browsers
• JS added code to enforce validation in Webkit.  
• Webkit requires special CSS in iOS to display properly

Collapsify (for expanding/contracting menus, etc.)

• modularized plugin for collapsing elements
• optional and default closed and open elements
• list item as a link not working

Sliderific (for sliding images, news, etc.)

• now accepts position and button size

Top Nav Hide/Show Delay

• same as banner code
• code is in stacked template

Dynamic Menus

• basic ul li elements
• datetimestamp to pull fresh data every time minimize cached elements
• Collapsify after instance load

Unified Mobile and Desktop Search

• made search a separate div for flow and accessibility
• moved search default position farther off-screen in CSS as default position in mobile
• float width bug
• float over login hides search
• search font sizes
• mobile
• desktop

All Animations are 3D CSS

• to top
• audience and main mobile menus
• search
• sticky header

Search

• strange block appearing after search results elements removed
• appears modal with a grey background on desktop
• improved More button and flow functionality

CSS

• only hide tags 
• indent all code appropriate to width
• removed deprecated code

Changes in Cascade Server

• moved around elements in template and created new instances
• added document.ready to Tarleton F.O.C.U.S. block in all stacked template modules

-Karole and Ernesto

Web Styling 101: Quick Tips

Want to become a web fashionista? Or, do you just want some styling tips to help engage your audience? Look no further, because I've got some tips for you!

Web Services intends to offer a "Styling for the Web" course soon, but in the meantime, please make use of the following tips that I extracted from Hampshire College in Amherst, MA:

• Use short paragraphs. Large blocks of text can look like walls, and act as such to the user. Research has shown that short, concise paragraphs and bulleted lists work best for web use.

• Your first paragraph is the most important one. As such, it should be brief, clear, and to the point in order to quickly engage the user. One sentence paragraphs are encouraged.

• Write in an inverted pyramid style. Place the most important information at the top, extra info toward the bottom.

• In most cases, it's best to use subheadings to clarify the subject of various sections on a page. Users want to skim and scan for information. Headings help this process exponentially.
  
  
• Don't waste space "welcoming" people to the page. There is no need, and most users ignore any welcome text as filler. Get to the meat - that is what they came for.

• Just when you think you are done, look again. Cut, cut, and cut your text until it is the most essential message.

• Name your page clearly. The page title and the navigation title should match as closely as possible. They should also clearly articulate the subject of the page. Do not use "Welcome to Marketing & Communications!" Instead, say "Department of Marketing & Communications."

• Do not tell users to "use the links on the left." Put the information or links you are referring to right there instead, or just let them find the navigation on their own - if it is clearly visible on the page they will find it.

• Use bold and italics sparingly. Bold should be used for headings and then sparingly for any other emphasis. Too much bold makes text harder, not easier, to read and differentiate.

• Italics should also be used sparingly. Italics on the web are also hard to read. Try to avoid making long paragraphs italic - you are making the text harder to read, not giving it emphasis. Exceptions are book titles and other grammar stylings.

• Do not underline text. On the web underline = link. Giving a sentence an underline for emphasis is misleading. And again, you don't really need it.

• Use all caps very sparingly. Research shows all caps are harder to read than mixed case.

• Don't try to emphasize too much. If you use bolded headings, short paragraphs, and bulleted lists, you should not need to rely on italics, all caps, or underlining for emphasis. These styles can make the page look messy and compete for the user's attention.

• Avoid exclamation points. We know Tarleton is awesome! We love it! But exclamation points on websites make can make it look unprofessional! Let the content speak for itself.

Headers and other images

• Use a header image that is relevant to the subject matter.

• Avoid pictures of buildings without people. You may know that a picture of the exterior of the Welcome Center fits well for a page, but to most people, and especially to those who are not familiar with our campus, it is meaningless. Remember your users do not have your insider knowledge. Give them pictures of people interacting instead of abstract building pics whenever possible.

• Let the Web Services office help you put images neatly into your content area. Break up your text with relevant images.
  
  
• Make sure you have accurate copyright permissions to use any picture. Just because it is on the internet does not mean it is free to use. When in doubt, please contact Daphne Hunt at djhunt@tarleton.edu.

Miscellaneous

• Link, link, and link to relevant information. If you mention a program, link to it. If you include an email address, make it an email link. If you mention a faculty member, link to their bio page. Don't make people go and search for something that you mention if it already has a page somewhere.

• Make your links contextual. Avoid "Click here." Use part of the actual referencing sentence as the link. Research shows that users like them to be 4-8 words in length.

Do not use:
For commencement information for graduating students click here.

Do use:
Commencement information for graduating students is now available.

• Avoid jump (anchor) links except on long pages such as FAQs. Research shows that today's web users don't mind scrolling if the content is useful and easy to scan. Anchor points just make pages longer, and are used too often on pages that are already a reasonable length. If you are not sure, please contact Daphne Hunt at djhunt@tarleton.edu so we can discuss it. If you do want to use anchor links, then there are best practices that should be followed.

• Keep your content up to date. Out-of-date content reflects poorly on the user's overall opinion of the website and the university. It also degrades the trust of the user to later find information on the website. If you put up info that needs to be updated later, mark it on your calendar so you don't forget.

 -Daphne

Tips were extracted from Hampshire College's website.

Highlights from the HighEdWeb 2014 Conference - Daphne's Perspective

Oh, Oregon...do I miss thee. Your gigantic trees, your rolling hills and towering mountains, your soft never-ending rain. Oh - and the 700+ congregation of higher ed web professionals!

Morgan and I had the opportunity to attend this year's HighEdWeb conference in Portland, Oregon which was just last week. This is one of the best conferences in the country for those in our profession. Savvy speakers, seven different tracks, networking and collaboration sessions/events, workshops, and a WHOLE lot of enthusiasm.

Popular session at #heweb14 (#mpd3) with Morgan and Daphne sitting on the floor! Courtesy +Lougan Bishop

Morgan and I split up for many of the sessions and I attended quite a few management and professional development ones in addition to some in marketing, accessibility/usability, and development/architecture. I have to say, some of the most interesting sessions were in the management/professional development track.

The best of conference winner is Dave Cameron's HUMAN at work presentation about how to deal with "all the things" at work, including tasks, people, stress, and information overload.

His five goals for being a productive human being are so simple yet brilliant.

1. Be honest - with yourself and others, subjectively and objectively. Pay attention to your internalized priorities, be real with yourself when interpreting your own performance levels, and don't live in denial. But also measure and capture data, develop reports and analyze your progress - facts speak volumes. Admit to your mistakes with others and give the feedback you would want to hear yourself.
   
   
2. Be unafraid - mistakes are just a part of life. Have confidence, and don't be intimidated by those rock stars! Let go of those irrational fears like change and gossip. And don't be overwhelmed by complexity - take it one step at a time.
   
   
3. Be mindful and focused. Tools to help your workday are AWESOME but don't let them rule your life. We can easily get overwhelmed by email, tasks, calendars and meetings. Use email just for communicating to groups, documenting info, and sending files - don't let it be the boss of you. Turn your email push notifications off and commit to checking your email just twice a day. Review your outstanding tasks daily and prioritize, place them in a project management system like Asana (that is what Web Services uses!) Use your calendar to schedule work tasks and breaks, and consider things like "no-meeting Mondays." Speaking of meetings, don't sit on your phone during them and be sure to take notes and report/share with your team.
   
   
4. Be active - walk and get up periodically. Build a work-out routine. Staying active helps your focus and energy throughout the day. Start your day with a "focus" activity such as a card game, puzzle, or drawing to get your brain going. Keep your workspace clean and organized and consider a more ergonomic desk set-up such as a standing desk. Listen to music with headphones while you are trying to concentrate.
   
   
5. Be nice to your fellow humans! Be a proud member of your team. Support your co-workers, be social, take ownership of your role, and give them a heads-up when you can. Show up to work with a positive attitude - if you are having a bad day, just put on a smile and bear it. Treat others the way you want to be treated.

 

So in summary we have:

Graphic extracted from Dave Cameron's slide deck.

Isn't that a nifty acronym?

To view the whole slide deck, check out Dave Cameron's Tumblr. To view related tweets, look up #heweb14 and #mpd9 on Twitter.

-Daphne