PMACS Web Team

We are the Penn Medicine Academic Computing Services (PMACS) Web Design Team at the Perelman School of Medicine at the University of Pennsylvania.

[pmacswebteam-blog]

PMACS website launches

The Penn Medicine Academic Computing Services (PMACS) Design Team launches a new web site at http://www.med.upenn.edu/pmacs Consolidating information formerly provided on the SOMIS website, the new site is structured around a service catalog which will provide users with a comprehensive list of all services, associated descriptions and costs. The site is mobile- and tablet-friendly with convenient links to desktop support, help desk, and directions to all PMACS locations.

[pmacswebteam-blog]

A peek at some of our latest websites...

We do a variety of website designs and here is a look at some of our latest work. Departmental Site Center for Resuscitation website

Newsletter Site Penn Medicine Academic Computing Services (PMACS) Newsletter

Lab Site Lipschutz Lab

[pmacswebteam-blog]

PMACS web team has a newly updated portfolio using Adaptive Thumbnail with a user-friendly lightbox feature. Now it's even easier to see the different categories of web site designs we have in our portfolio. They are categorized by Departmental & Administrative Sites, Laboratory Sites, Conference Sites, Newsletters, and Works in Progress. Feel free to go check out the actual sites using the hotlinks shown in the portfolio lightbox!

[pmacswebteam-blog]

Our Site is Now Responsive

We have made our site "responsive" and it will now reflow the content for whatever viewport: mobile, tablet, and/or computer resolution. As the viewport gets smaller, the content stacks and still remains accessible--even in a mobile browser. We used the following tools to make the site responsive...

Skeleton Boilerplate

Blueberry Image Slider

Skeleton Boilerplate was used to create the responsive grid and layout of the site. Blueberry was used to scale the images for different viewport sizes. We have written about the site in the past. The site is still written in HTML5 and CSS3. There really isn't much more to say about this upgrade. As we run across new and interesting features, we wind up applying them on our own site after extensive research and testing. The team will most likely start using responsive grids in the near future for client projects. We hope you enjoy it.

[pmacswebteam-blog]

We have been working on a revised UI framework for our internal applications. The roots for the changes started to grow in the fall 2010. There was a presentation that was given about the Common UI 1.0 from a designer perspective. There were difficulties using the framework and UI 1.0 at that time and they centered around implementing custom designs.

Sometime over the winter of 2010, the developers created a "resource includer" that made switching stylesheets and other resources much easier to manage. This opened the possibilities of a revised UI and other enhancements. The designers and management came up with a roadmap for UI 1.0 transitioning into UI 2.0. Here was the roadmap that was presented in the spring of 2011...

Clean up existing CSS and rendered XHTML in Common UI 1.0.

Convert XHTML/CSS to HTML5 and CSS3

Create CSS 3-based themes.

Create a "style guide" for the developers that gives direction on how to use UI 2.0.

We are happy to write that the first three action items are completed and the style guide will be under development shortly. The pictures above are screen captures of working HTML5/CSS 3 prototypes which have been delivered to developers for implementation into the framework(s).

The target finish date for this project was end of August, but we ran into branding issues that had to be addressed over the summer and personnel changes that left us short-staffed. We are now back on track and with just one deliverable outstanding, it is looking like 2011 will be a very good year in regard to the Common UI and framework(s).

Our team, the designers, developers, and managers, rock! :-)

[pmacswebteam-blog]

Amanda Stankiewicz designed this new site for the Botswana-UPenn Partnership initiative. It's an HTML5, JQuery site with hooks into Flickr and Facebook. It also work with our CMS. Outstanding work Amanda!

[pmacswebteam-blog]

We are attending the Wharton Web Conference , July 12th - 14th. Topics covered: HTML5, CSS 3, Ruby on Rails, mobile web, AJAX, JQuery, Agile, social media, etc. Keynote speakers: Barry Scwartz and Molly E. Holzschlag.

Maybe we will see you there?!

[pmacswebteam-blog]

Here are three images that represent the output of the new SOMIS designer site from rough "wireframe" to rendered screen grab. There were a number of ideas that were thrown around during the brainstorming (wireframe) phase of development. Here are the ideas that were captured in the first round:

Fixed width, centered within the browser frame.

Major questions answere are what [are our services and what we do] and who [we are].

Social networking within the footer.

Textured background.

Member details on front page.

Large graphical area at the top with featured content.

Going from the wireframe to the Photoshop mock-up was not a terrible task, given that the design group was for a group of internal designers. There was a color scheme that had been picked from Adobe's Kuler site and there had already been much discussion about content, adding new features, and enhancing existing features. So presenting the mock-up to the designer group went fairly well. During the presentation there were opinons expressed about possible interaction changes and simplification of the interface. After the initial presentation of the mock-up, there was a single session for alterations before starting the conversion from a Photoshop document to actual HTML5 and CSS 3.

During the transition to HTML5, a few things were moved around at the last minute; but the original theme came through to the end. Designers can sometimes feel that the extra step of wireframing can be monotonous and drudgery. In this case, it helped the team quickly coalesce around a graphical concept. Once the PSD was presented, it was easy for folks to voice their suggestions for change. In all, wireframing was very productive in our development process.

[pmacswebteam-blog]

The newly revamped Design Team web site is now live. If you have ever done any design work, you know that it is difficult to design for yourself. During the conceptual phase and leading into the development phases, there was always the problem of not having enough time to devote to internal projects because client projects and needs always seemed to push our redesign further our with each passing sprint. Our project manager kept the team moving forward and forced positive movement on this project, even if the backlog item (task) seemed small and/or insignificant. This encouraged team members to (at least) talk about the project in each weekly meeting. Other problems were centered around ensuring the content was up-to-date, coming up with designs that fit the content and allowed for some kind of content scaling, and finally getting the team to agree on a specific mock-up.

The old site was coded in XHTML and CSS 2. It had been designed by a former member of the design team on his arrival to our department. It had served us well for a number of years, but was starting to show its age. It was definitely in need of a redesign for a number of reasons: new technologies/standards, new team members, standardization on frameworks, better hooks into social networking, etc.

Images of the new site (dark blue) and the older version (blue and white) are embedded above.

We made a number of under-the-hood changes to the new site: HTML5, CSS 3, Google Web Fonts, JQuery, and links to more social media. Coding the site in HTML5 and using CSS 3 enhancements kept the number of "decorative" graphics to a minimum and increased page load speed. By relying on CSS 3 for many of the graphical enhancements, we had to up the browser requirements a bit, but the site maintains some level of comfort by degrading well enough in older browsers. A couple of books from A Book Apart authors were major aids in taking the site from a Photoshop mock-up to actual HTML: CSS 3 for Web Designers and HTML5 for Web Designers. It made the leap from the world of XHTML to HTML5/CSS 3 very easy. The books were very easy to digest and contain a wealth of information for the designer and developer alike. They are relatively inexpensive, so get them now if you don't have them.

This is our first post on the blog. We hope to grow this blog with insight into our team's development process(es), new site launches, and our thoughts on any design-related material that catch our attention. Thanks for reading.