It has been awesome seeing all the submissions from our community for Wayne State’s Photo of the Day. You all have done a tremendous job of capturing the beauty of our campus and the excitement of Midtown/rebirth of Detroit. The WSU Social Media team compiled a list of our personal favorites as well as top viewed images for 2016.
What could possibly make a webpage’s traffic grow by 235 percent in one year? Our beautiful campus of course!
Last September we launched “Photo of the Day”, a social campaign that focuses on the beauty and uniqueness of our campus and Midtown. The positive reaction has been overwhelming, not only in positive comments, but in positive statistics as well.
Since September 2015:
- We have received 658* submissions
- From 275 individuals in the campus community
- 337 pics have been featured on the site so far.
*41 of the 658 submissions were duplicates or contained broken files. The total of photographs up for consideration is 617.
Submissions have grown nearly 600 percent from 2015 to 2016 with a large jump in October.
What is equally as impressive, the quality of the submissions are getting greater each month. Don’t get me wrong, we’ve always had high quality photos to showcase, but in the last two months, the quantity of high quality photographs is dramatically higher.
This is first and foremost a social campaign, but of course it has to live on the web. We share the lastest pic on Instagram, Twitter and we recently added it to our Facebook page. All posts link back to the Photo of the Day website.
Unique page visits have grown more than 230 percent from 2015 to 2016. Again, with the most significant jump last month.
Our highest traffic day was October 5, 2016 with 158 unique visits featuring the work of Paige Urbano.
Social stat – Most liked and most retweets
Our most ‘liked’ pic on Instagram and most retweeted post featured the work of Tyler Neal. This one is a personal favorite as well.
Social stats – Most impressions
The Photo of the Day tweet with the most impressions (nearly 11,000) was submitted by Justin Jacob. Justin has been a frequent submitter and you can routinely see his work featured on the Wayne State homepage.
In the last few months we started featuring some Photos of the Day on the university homepage and although we can’t get stats on each pic featured, we are again getting very positive feedback. With the success of this feature, we are exploring other avenues to share this extraordinary content.
Even though the popularity has grown so much, we are still strongly encouraging the community to send in your campus pics! We want to show off campus from everyone’s perspective not just our own.
See the latest selections and submit your own pics at wayne.edu/photo-of-the-day
We’re looking to fill an existing position for a full-time Web Designer to join our innovative team.
About Web Communications
We handle every aspect of a website project, from the needs analysis, user research, architecture, design, content migration/editing, programming, post-launch analysis and A/B testing. To accomplish this we work like a mini agency within the university.
This position is integral to crafting and ensuring the university identity is integrated into every piece of communication we put out. In addition to full websites, our team is responsible for the digital signage around campus (currently 77 signs and growing), the official social media presence and a number of HTML templates. This position touches all digital mediums and our work is constantly evolving with multiple opportunities for growth, you will see your work published and interacted with on a daily basis.
About Wayne State
Wayne State offers a competitive benefits package that includes, health, dental, paid leave and more. In addition to great benefits, working for Wayne State’s Marketing and Communications team brings you right into the heart of midtown. We are conveniently located at Cass and Palmer and in walking distance of the DIA, the Detroit Historical Museum and some of the top restaurants in the Detroit. In mid-2017, you’ll be steps away from a Q-Rail station that will take you to the newly developed The District Detroit.
Senior Graphic Designer
- Solid understanding of working with-and designing for-web applications.
- An understanding of responsive Web design and designing for mobile first.
- Excellent visual design skills with sensitivity to user-system interaction .
- Experience working on large-scale higher education websites and/or creating and maintaining corporate design patterns.
- BS/MS in Human-Computer Interaction, Interaction Design, or a Visual Arts subject; strong technical understanding a plus.
- Minimum of 4+ years’ experience designing web-based products for a consumer-oriented website.
- Ability to act as a leader in communicating conceptual ideas and design rationales, all within a user-centered design process.
- Able to work and communicate effectively in a cross-functional product development team, and present ideas and designs effectively.
- Self-motivated to prioritize and manage workload, and meet critical project milestones and deadlines.
- An understanding of the benefits, limitations and customization of a CSS framework (Foundation, Bootstrap, etc).
- Up-to-date with the latest Web trends, techniques, and technologies.
- Experience working in an Agile/Scrum development process.
- Maintain an overall university brand across various mediums including digital signage.
How to apply
All applications must go through the university jobs website, please do not contact me directly. We encourage you to submit links to live websites, portfolios and to submit a cover letter that explains . why you feel you’re right for the position.
Senior Graphic Designer, posting #042093
We rolled out an update to Formy, the university’s form creator, that allows form owners to customize the submission listing columns.
Customizing the columns on the submissions list
Set the desired field order in the “Export” area:
Now “Submissions” will reflect the first three fields specified in the export:
Why this is important
Previously, the first three fields in the form will display on the submission listing page. Which resulted in “First name”, “Last name” and “Email” columns on the “Submissions” listing.
There are occasions that fields further down the form are more important at a glance when reviewing or labeling. This functionality allows the form owner to have more control over their form and submissions for each unique circumstance.
An exciting opportunity for the university, the School of Medicine, the Web Department and (maybe) you! As the School of Medicine Web team expands we are in need of a full-time frontend developer.
Our department sits in the central Marketing office and is responsible for most all public facing websites on campus over the last eleven years. Our sites are built using an in-house content management system, and others, on the LAMP stack while using Foundation for Sites on the frontend. Most all School of Medicine websites are currently also built on these tools with the exception of the homepage, which is WordPress based.
School of Medicine
We care a lot about our tooling, processes and ensuring developer success. We adhere to code guidelines and always looking to standardize common code to allow us to focus on the unique areas that matter. This position is unique as the School of Medicine website is in transition. The website is newly launched in WordPress on Bootstrap with a number of legacy sites built without a frontend framework. The team is being integrated into the central web team and transitioning to standard university tools and frontend framework.
- Experience collaborating throughout the entire project cycle, from research, strategy, information architecture, visual design, front-end development and maintenance.
- Experience using a front-end web framework such as Foundation or Bootstrap.
- An understanding of back-end web development environments, including HTTP, web servers, load balancers, the interpretation layer, databases and associated web frameworks.
- Considerable skill in writing web applications that retrieve and update information in relational web centric databases (using WordPress or Laravel).
- The ability to clearly communicate to project stakeholders and process feedback internally and externally.
- The ability to troubleshoot website layout and web application performance issues and resolve issues independently or direct issues to the responsible party.
- Provide direct supervision to internal web site interns and guidance to unit web site content authors.
- Ability to work with accuracy and attention to detail to meet deadlines.
- Ability to understand and execute oral and written instructions, policies, and procedures.
- Considerable project management skills, including ability to provide time estimates and prepare accurate records and reports.
- Proficiency in the use of web applications programming languages, tools, and/or methodologies for developing integrated web applications typically acquired through formal education or equivalent experience in web application development.
- Demonstrated ability in analyzing customer requirements and developing basic information systems solutions typically acquired through one to two years of directly related experience in web application development and support.
- The ability to translate functional requirements into cross-browser WCAG 2.0 compliant websites.
- Strong understanding of web technologies and related user device capabilities required to access the web.
- Understanding of test driven development.
How to apply
Apply at jobs.wayne.edu. Posting #042095
A few years ago we added the ability to embed a screenshot from a YouTube video through the CMS editor. This alleviated the need to take a screenshot, edit with software to add the play button, and then finally uploading it to the web server to embed it into a page or an email. With one click, pasting the url of the video a screenshot of the video can automatically be generated and embedded into a page.
But there was a problem
The default YouTube play button at the time was a red rectangle which does call a lot of attention and allows users to immediately identify what will happen when they click the image. It became a problem over time as more of our videos (especially now that we can upload a custom still photo as the default screenshot) became people with a YouTube play button head:
We are happy to announce the play button graphic has been swapped out with a more transparent version that equally emphasizes the screenshot and the fact that the image will link to a YouTube video.
Now at a glance you can see the details in screenshot while still still understanding the link will bring the you to a YouTube video.
How to use the YouTube screenshot button in the CMS:
Back for the third year, Global Accessibility Awareness Day Detroit is a day for web professionals to gather together to learn about accessibility and how to make the web more accessible and usable by everyone. Events will be held around the world to raise awareness about web accessibility.
Who is this event for?
If you’re working on the web, creating, developing, or designing websites or content for others to use, this event is for you! Or if you want to learn how we can work together to make the web accessible to everyone, we’d love for you to attend.
Learn to listen: Experience the Web from the perspective of a screen reader user
You work hard on your web content, the goal being for that content to reach as wide an audience as possible. To that end, you study all the accessibility-related guidelines and do your best to apply them to your work.
But what does it all really mean? How does someone who uses a screen reader experience your site? How will the next change you’re planning to make impact that experience?
In this hands-on session with Al Puzzuoli, you will learn to use a screen reader as a tool to answer the questions above.
- First, you’ll learn the basics of controlling your computer and navigating the web, using only a screen reader and your keyboard.
- Next, you will see examples of accessible sites that play nice with screen readers, and other inaccessible ones, which decidedly do not.
- Finally, the fun begins, as it will be time to play! You will have the opportunity to go the the website of your choice, and use your newly honed skills to do some basic accessibility testing
Note for all attendees: If you have a Windows or Mac laptop, we encourage you to bring it so you can get hands-on with a screen reader. We’ll be working in small groups.
Windows users are recommended to download and install the free NVDA screen reader on the laptop before the event.
As the resident Information Technologist at Michigan State University’s Resource Center for Persons with Disabilities, Al Puzzuoli spends his time doing network and server administration, troubleshooting computer concerns, and working with staff and students to test the accessibility of various information systems across campus.
When he is not working (or playing with computers), Al enjoys swimming, playing the trumpet, bowling, and spectator sports.
6:30pm to 7:00pm: Welcome, refreshments, and networking
7:00pm to 7:10pm: Introductions
7:10pm to 8:20pm: Presentation and interactive workshop
8:20pm to 8:30pm: Announcements
8:30pm: Time to leave
By sponsoring our event, you’ll have access to an audience of web and business professionals throughout southeast Michigan and northwest Ohio.
To thank you for your sponsorship, Refresh Detroit offers a number of benefits. Contact Deborah at deborah at lireo dot com for more information.
While learning webpack and babel, our team had an issue with trying to run certain NPM packages through babel. Since we only want to pass ES2015 code through it, we need to exclude packages that don’t use it. To do that you can specify certain folders under node_modules to ignore in your
webpack.config.js file like this:
What this will do is exclude slick-carousel from going through babel-loader, but it will still be part of the JS build and make it’s way down the pipe to the UglifyJsPlugin. Note: the exclude is not a string so it should not have quotes around it.
It’s possible to pass /node_modules/ and ignore all packages going through babel, but this wasn’t what we needed. Zurb Foundation 6.2 requires passing code through babel, so excluding all of node_modules wasn’t an option for us.
CSS is hard, we all know that. There has to be a more effective way to facilitate the modularity and flexibility of our code.
When tasked with creating new components for a Web project and inheriting over 8,000 lines of code, where do you start?
When you are told to keep it modular as possible, what solutions do you have at your disposal? This is when you break into your bag-of-tricks with one of the many modular CSS architectures out there.
B.E.M. is a great method to use to keep code very flexible and modular from component to component, and page to page. Three benefits of using B.E.M. are:
- Reusability of the code
- Maintain code in small pieces rather than large blocks with excessive declarations and generic naming
- Style naming. Be as specific as you want. Name the style according to where it is being applied and what it is being used for. Help other developers who inherit your code as well as your future self!
Chris is also very passionate about coming up with solutions for enterprise applications, which include modular CSS architectures, performance, and promoting Web accessibility.
6:30 pm to 6:40 pm: Welcome
6:40 pm to 6:55 pm: Introductions
6:55 pm to 7:00 pm: Info about Grand Circus
7:00 pm to 7:40 pm: Presentation and Q & A
7:40 pm to 8:00 pm Networking
Venue and parking
Grand Circus is located in the Broderick Tower near Grand Circus in downtown Detroit. The entrance is on Woodward, through two gold-colored doors.
Once inside, go to the end of the hall, and take the elevator to the third floor. Look for signs when you get off the elevator.
Parking is available at the Detroit Opera House parking garage, located on Broadway. Parking is $10 (unless there’s a special event). There’s also street parking on Woodward and Washington Boulevard.
The Detroit Opera House parking garage is a short walk up Broadway and around the corner from the Grand Circus space. Here’s parking information from the Broderick Tower website (PDF).
Special thanks to our sponsor Grand Circus for offering venue space for our Refresh Detroit meetups!
We recently launched a redesigned Campus Retail Shops website. This was another in the set of Business Operations websites to get updated. Unlike the others this site is a living repository of retail tenants and shops available to the campus community. This gives the site a few unique challenges:
Content pulled from campus map
Unlike most of our websites, the content for Shops was managed in a separate database so we could provide additional information for each location. This can be hours, parking information, specials, etc. We decided to centralize that information in the university campus map. This required us to add more fields to each map entry, but gave us the benefit of using that extra information anywhere else the location is viewed (mobile/desktop map website, search, etc). It also allows for a single source of data, no more duplication when locations are added, edited or removed.
OneCard fill locations map
Like the retail shops, there are other locations on campus that are not buildings, but instead are inside buildings or parking structures. These are now in the campus map proper instead of a custom Google map.
Show your OneCard and save locations
Lastly, there are locations which may or may not be on Wayne State’s campus. These are shops that offer a discount to our students/faculty/staff for showing their student ID card. This was a tough decision, should we be storing these outside locations, some many miles away, in the campus map data? In the end we decided to store the information with all other locations. The map already had the structure, no additional programming would be required and it would offer a single spot to manage all locations.
Quick page loads with YouTube SPF
If you’ve been browsing through the site while reading this you may notice how quick each page loads. This site employs a method of navigation that we have used on all sites in the past year. The tool is YouTube’s Structured Page Fragments (SPF).
Data available in the API
Building additional things into an already large data set has it’s advantages. The campus map API will now return this additional information for each location.
View the new Campus Retail Shops website.