Join Refresh Detroit for “From Documents to Apps: Evolving an Open Web” – in which Molly Holzschlag will discuss the entire state of Web development/design and show the Open Web Technology Stack visually from back end to front end.
About Molly Holzschlag
Molly E. Holzschlag, known to many as “mollydotcom” or just plain “Mols” is an author, teacher and Open Web Evangelist. She has spent the majority of her 25 years in IT working with the Internet, and observed the Web emerge and evolve from its first days at CERN. She has spent the years since educating herself and others about the Web, its languages, and its core philosophies.
Currently an invited expert to the W3C, Molly works globally to connect consumers, businesses, Web designers, developers, browser implementors and tool makers; encouraging cultural diplomacy, technical interoperability and professional excellence.
Honored by multiple organizations and sites as one of the most influential women on the Web, a long-time friend and colleague once quipped “If Tim Berners-Lee is the father of the Web, than Molly is its fairy godmother.” Warm, colorful, and interested in everyone’s stories and successes, be sure to say hello at an event or on Twitter: @mollydotcom
Thanks to Our Sponsors
We are grateful to the following sponsors for helping make this month’s event possible:
Quicken Loans Inc. is the nation’s largest online home lender and a top five retail lender. The company closed a record $30 billion in retail home loan volume across all 50 states in 2011. Quicken Loans generates loan production from five web centers located in Detroit, Ohio and Arizona. Quicken Loans ranked #1 in customer satisfaction among all home mortgage lenders in the United States by J.D. Power and Associates in 2010 and 2011.
Skidmore Studio is a kick ass design studio based in Detroit’s historic Madison Theatre Building. A fun, fearless and fanatical group, Skidmore is dedicated to generating inspired ideas that translate to extraordinary results. Their team of designers, illustrators and strategists work best with those who appreciate design thinking and have a willingness to build their brand with bold strategy and design.
TechSmith provides more than 50 countries with screen capture and recording software for individual and professional use. Founded in 1987 by William Hamilton, who remains the company’s president today, TechSmith has seven products that do anything from taking screen captures, to screen recording and managing consumer content.
Venue: M@dison Building
This historic theater building, where Detroit came to see what was new, was reshaped as a long-awaited hub for high-tech entrepreneurial activity and special events. Features include inspiring spaces for anchor businesses, a desk-for-a-day environment for enterprising techies, a 150-seat theater for technology events and a rooftop terrace overlooking Comerica Park and Ford Field.
Parking:
The Detroit Tigers will be playing a home game on the night of this event. The game will start at 7:05pm and since the M@dison is located so closely to Comerica Park we suggest you allow plenty of time to arrive and park.
Limited parking will be available at the Detroit Opera House parking structure, located on Farmer Street between Gratiot Avenue and Monroe Street. Cost for parking at the Opera House parking structure is expected to be $20. You may be able to find cheaper parking further away from Tiger Stadium, taking the People Mover, getting off at the Greektown Station, and walking to the M@dison.
Sometimes long pages are unavoidable but adding pagination to certain content makes it more difficult to use. The types of pages I am talking about are FAQ’s, faculty lists, and course listings. It can often span up to twenty times the height of a standard browser.
Pagination sucks
Breaking this content up in to multiple does allow the visitor to see a fair amount of information on a single screen without scrolling. But if they want to explore more they have to take an action that isn’t natural to the Web and “page” through the content like a book. Book pages work great because they are natural, there are a lot of touch points where you can grab and make the transition back and forth easily. Pagination on the Web, though, is not so easy. Typically it involves very small numbers at the bottom of the content, a precise click on the next number, and waiting for a page to load.
![]()
“Back to top” is annoying
The solution most websites take is to put all the content on one page and at multiple places down the page add a link labeled “Back to Top”. This typically links to an anchor #top which is defined at the top of the page or content. This seems logical for the Web since scrolling is just a fingertip away, people often use the CMD+F to search page content and there is no reloading and waiting for the page.
But “Back to Top” still doesn’t get it right. The Web is used as a page of content to be consumed and to take a next step, ideally getting the visitor one step closer to their goal. “Back to Top” links introduce two obstacles to that goal. The first is clutter on the page that doesn’t relate to the content. The second is a link that unnaturally moves the user “backward” to where they came from.
The holy grail
We are not claiming to have invented this technique, just adopting it and embracing how more usable our pages are because of it. The technique is to omit the “Back to Top” links all together and force the user to scroll. Then use javascript to detect how far the visitor has scrolled and display a button (in a static location out of the content area) which scrolls the user back to the top of the page. It’s a technique that isn’t visible unless you see it in action. The video below shows how it works:
This solution solves the user experience issues introduced by pagination and the “Back to Top” links. It allows for all the content to be on a single page so the user can search and not have to reload and reorient themselves with each new set of content. It also doesn’t clutter the page with extra links that don’t bring the user closer to their next goal.
How it works
It progressively adds value to the page as the user scrolls down the page. The solution also introduces something else, a visual sign of what the action does. The default construct of a “link” is to move the visitor to another separate page, but in fact the “Back to Top” breaks that construct. The icon used to denote “scroll to top” visualizes exactly what the button will do once clicked, the user doesn’t have to guess or be surprised.
A little something extra
Lastly, a little something to pleasently surprise visitors is when they click to return to the top, the page doesn’t just jump up leaving the user to re-orient themselves with the page once again. It instead scrolls smoothly to the top passing by all the content they just viewed. Now at the top of the page again they just saw the journey they took down the page rewound and are at a familiar place with no need to re-orient themselves.
Some examples of it’s use:
We get a lot of feedback when we ask students what their impression of campus is. The general consensus is they had no idea how large and green it is. Being an urban campus most people think that Wayne State is just a collection of buildings along busy roads. But in reality we are a 400 acre campus with quite a bit of green space and a traditional campus feel.
It’s easy to change the impression once someone steps on to campus, but what about the people who can’t physically make it here. A few months ago we evaluated our current virtual tour website (left) and found it to fall short of the “immersive experience” we give students who come on a physical campus tour. We set out to change that.
Campus immersion
Bringing campus to life means capturing and showing off as much of campus as possible.We decided on highlighting over 40 areas on campus to provide 360 degree immersions.
We broke the experiences down in to five categories:
- Academics & Research
- Athletics
- Libraries
- Campus Life & Housing
- Medical Campus & Extension Centers
Areas to explore
In addition to the 40 locations the user can explore we also added 60 “hotspots” which show up embedded in the locations. When the user clicks on one they are presented with some text, additional images or a video that explains more.
Next steps
The result is a landing page that we created that allows a visitor to choose a path and a full screen window opens to allow them to start exploring campus at their own pace. The tour is also available on any iOS device.
We have calls to actions on the landing page and throughout the tour. We are tracking users as they go through the tour, it is still a little too early to tell how effective the new tour is. One thing I can say that it has already surpassed the previous tour as far as engagement and time on site.
View the new virtual tour at: http://virtualtour.wayne.edu/
Your English Teacher was Wrong
Learn linguistic tips and web copy tricks to get findable, stay optimized, and say what you mean. Plain language is the practice of replacing fancy words, seven commas deep, with the language of your audience. Straightforward words express ideas more clearly than verbose marketese or industry jargon: trousers might seem great to the marketing team, but the 2 AM shopper is browsing for pants. In this hands-on talk, study linguistic concepts and technical implementations for the keys to precise, usable, and elegant communication.

About Lauren Colton
Lauren Colton is the Information Architect & Editor at Gravity Works Design & Development. She is a grammar nerd who loves talking about the importance of words, and a geek focused on how people interact with technology to find and use information. A graduate of James Madison College at Michigan State University, her editorial work includes the International Encyclopedia of the Social Sciences (Macmillan Reference USA) and Encyclopedia of Modern China (Charles Scribner’s Sons).
Where
HTC Global Services
3270 W Big Beaver Road
Troy, MI 48084
When
Wednesday, February 22 at 6:15 pm
About Refresh Detroit
Refresh Detroit is a part of the Refreshing Cities organization. We are a group of web professionals whose goal is to promote web standards, usability, and accessibility, and to spread the knowledge of web design in metro Detroit Michigan.
Thanks to HTC Global Services for hosting
HTC Global Services, Inc. is a leading CMM Level 5 certified global information technology (IT) services provider. Headquartered in Troy, Michigan, it is staffed with more than 5,000 highly qualified IT professionals working across North America, United Kingdom, India, Australia, Malaysia, and China. It offers business consulting, technology and outsourcing services in publishing, government, automotive and manufacturing, healthcare, insurance, finance, retail, and education sectors.
Originally posted at: http://refreshdetroit.org/event/your-english-teacher-was-wrong/
The Web Content Administrator at the Wayne State University School of Business Administration is responsible for creating, editing and formatting textual and graphical content for the School of Business Administration website. The Web Content Administrator assists with the general management of the website and works with important stakeholders including Wayne State University’s centralized Marketing/Web and Development teams, business school faculty, staff, students and alumni.
Primary responsibilities include
- Researching, planning and writing fresh content for the website. This may include:
- Coordinating photography and graphics
- Coordinating and conducting interviews
- Participating in meetings
- Evaluating content and recommending best practices
- Entering content into the University’s custom Content Management System and formatting it
- Developing online event promotions and monitoring promotion schedules
- Assisting with creating a planned review system to ensure content and links remain current
- Other duties as needed
Minimum qualifications
- Outstanding communication skills, especially written
- Prior Web writing experience and a keen understanding of writing for the Web versus other media
- Experience working with a Web content management system or similar Web-based system (i.e. blog)
- Basic knowledge of HTML
- Some graphic design and photo editing ability (basic working knowledge of Adobe Photoshop)
- Basic knowledge of social media websites (YouTube, Flickr, Facebook, Twitter, etc.)
Schedule: 20 hours per week
Work is performed on-site at Wayne State’s Detroit campus on a predetermined schedule. Schedule is flexible, but must be designed so hours are worked during WSU’s normal business hours: between 8:30 am and 5 pm, Monday – Friday.
Salary: Up to $19 per hour, depending on experience. This position does not provide fringe benefits.
Application:
This position is part of the School of Business Administration Marketing & Communications department and reports to the Director of Marketing & Communications.
Please send a cover letter, resume, and at least 2 Web writing samples by February 17, 2012 to:
Jenny Powell-Grosvenor or fax 313-577-4557.
Last year I was fortunate enough to attend two conferences. The first, Internet User Experience (IUE), was in October on the campus of Washtenaw Community College in Ann Arbor, Mich. The other, Usability Week through Nielsen Norman group (NN/g), was in December in Las Vegas. Both conferences had caliber in the information presented.
Internet User Experience (IUE)
At IUE, I was introduced to the Agile work environment. This environment was based on an Agile Software Development methodology where projects are broken into smaller and shorter deliverable phases with the initial product meeting the core needs of the client. I attended sessions such as Connecting with Customers: User Generated Content, Mosh Pit Memoirs: Lessons and Insights on Creative Collaboration, The Top 10 Things Every Designer Needs to Know About People, and Better User Requirements Through Story Mapping. My ultimate favorite session, though, was Hold the Sprinkles! Cupcake, Layers and Agile UX Design.
This session summarized the Agile method but applied it to design. The presentation was creative and very thought-out as Carissa Demetris created the parallelism in the process of designing to making a cupcake. Every project has base requirements just like a cupcake has cake as its base. The next layer in a project use enhancements like a cupcake uses frosting, followed by embellishments which would be the sprinkles. How does this approach apply in real projects? An example would be designing a basic login page – our cupcake. The frosting/enhancement for this project would be adding a radio button to remember the user or having a “Forgot password” link. The sprinkles/embellishment would be adding a Facebook login area. Carissa mentioned that most of the time, the need for “sprinkles” comes from the business owners, marketing dept. or someone other than the user. For the most part, these are wish-list items of the higher-ups who project their perception of what their users need. These embellishments don’t add to user experience or the goal, however.
In an Agile environment, the first iteration would be developing the login. If the budget and time hasn’t run out, there’s an opportunity to add the enhancement feature to either remember the user or have a “Forgot password” link. We now have our first iteration that meets our client’s core needs/goals while staying on budget and time. From experience, some of the projects I work on where “sprinkles” are elevated much higher than what they should be, cause delay, add more work and return little value. Carissa concluded with the mantra, “Embrace the cake, frost with care (to add the user experience), and hold the sprinkles.”
Nielson Norman group (NN/g) Usability Week
The NN/g in Vegas was a bit different from a handful of mini-sessions throughout the day like at most conferences. There, one session went for the entire day. The topics covered by the NN/g’s Usability Week ranged from writing for the Web, application design, Web usability guidelines, information architecture principles, mobile Web, and understanding how the human mind works when using the Web. I was blessed enough to have attended two days out of the seven. My goals coming into the conference were to understand our campus community’s thought processes and behavior and to know what tools to use to harvest data to build better websites. Based on that, the sessions I attended were “Web Design Lessons from Social Psychology” presented by John Boyd and “Research Beyond User Testing” presented by Christian Rohrer. I fully enjoyed both sessions but learning to understand behaviors and finding out how they can be manipulated made the Social Psychology session a personal favorite.
Dr. Boyd’s session was almost like a Social Psychology 101 course that talked about research and lab findings. I was amazed at how these findings are relevant on the Web today. Some really cool research was about learning, decision making and personal expectations.
Lets take “Learned Helplessness” which is when a person feels powerless due to constant failure and withdraws effort. When applied to websites, users start believing the effort they put in is useless, especially when trying to navigate a busy site or one that is too difficult to navigate through. The user’s multiple failed attempt to figure out the site will transmit as feelings of powerlessness and they eventually stop trying. This is when we see visitors leave a Web page and possibly never come back. However, if the user does figure out a way to navigate through a busy and difficult site in an unconventional way, the user has or will develop a “superstitious” behavior. This is when the user thinks if she clicks here, then there, then it will eventually work. As Web designers, we don’t want users to develop superstition or the feeling of helplessness. Knowing that these kinds of behaviors are real, website designs should have appropriate signals, architecture and organization in place per site.
Another cool study was on choice. The truth is, there is such a thing as too many choices. Users do not like being in a situation where there’s multiple options and vary minutely or are difficult to distinguish. Most users tend to walk away while some sophisticated choosers are willing to take the time to think about the choices. How does this apply on the Web? Perhaps on a shopping website featuring a slew of products under multiple categories right on the homepage. The sophisticated chooser will more likely check out the multiple categories while most people will leave the site. This behavior is best illustrated in the Jam Test done by Sheena Iyengar and Mark Lepper (see video below).
With so much information, I’m itching to put all of this knowledge to work! I can’t say enough how eternally grateful I am for the opportunities I have to grow professionally.
Some future conferences I have my eye on are:
- Human Factors International
- Nielsen Norman Group (NN/g) Usability Week 2012
- An Event Apart
- UI Seventeen
- Future of Web Design
A little extra:
Here’s a video from HFI that mentions Sheena I & Lepper’s Jam Study.
We’re always on the hunt to find ways to connect more people to the great things happening on Wayne State’s campus. If you have been following this blog you know these initiatives are often thought of and executed completely by us.
Chrome app
Not everyone has, or wants to have, the Today@Wayne website set as their homepage, and that is completely understandable. But we wanted to make sure it is as easy as possible for people to get to it. What better way than to have a Chrome app that is displayed every time the user opens a new tab or window? This way they can visit the daily newsletter at their leisure without having it load automatically every single time.
If you are a Google Chrome user you know the power of the extensions and apps. Both are lightweight and don’t slow down the browser like Firefox.
Google Chrome has gotten a little bit of flack because a vast majority of their “apps” are simply redirects to websites. In our case we’re currently doing just that. This approach isn’t our long term goal but it will get us started.
Looking forward
Chrome has an amazing ability to render HTML5 and take advantage of every bit of the users processing power. You can see that clearly with the popular Angry Birds app. Over the next few weeks and months we will be expanding the functionality of our app to take advantage of the user’s environment. Extending the website to use local storage and media queries to take full advantage of the users screen size and offline processing.
Download the Chrome app at: http://go.wayne.edu/today-chrome











