Layout Patterns for Scalia Law School Website

When I took over the law school website, responsive design started to gain traction. In my interview presentation, I made the promise that I would make the whole site responsive if I were hired. Even though I had very little knowledge on server administration, which was the main responsibility of the web services developer position, I was hired.

My supervisor at the time told me, “Although you don’t have much backend knowledge, you have a strong sense of design. I am sure you will be able to pick up all the server stuff.” I was thrilled that she had more confidence in me than I did in myself.

To keep my promise, I ripped out all the HTML and CSS and rewrote them from the ground up. I also approached mobile first in my responsive redesign. I did not use any frameworks; therefore, everything I coded tailored to the site—nothing more, nothing less. At that time, we still used floats for layouts, but as soon as the CSS grid landed on major browsers, I rewrote the CSS to take advantage of the grid functionality.

To give our site more flexibility, I developed layout patterns based on the grid system. I put together a demo page to show different combinations (buttons, images, text, video). The grid can accommodate at least 12 layouts. The best part is the fluidity of the grid system. It is made to adapt to any digital device.

How I Become a Type Advisor

Since the release of my book, Vietnamese Typography, in the winter 2015, I have had the opportunity to collaborate with type designers and type foundries around the world. I reviewed their diacritics and made recommendations to improve legibility and readability for Vietnamese readers.

When I decided to drop my book on the open web, I wanted to provide a complete resource for designing Vietnamese diacritics. I did not think about the advising service until David Jonathan Ross reached out to me to review his hyper-stylized typeface called Fit. As the name of the typeface suggested, everything must fit—even the diacritics. The double-stacked marks in Vietnamese proved to be a challenge. We went back and forth many rounds until we came to the perfect fit. In our collaborative efforts, I learned about his design process and decision making.

After my work with David, I realized I could offer similar advice to other type designers. As my site reached the type community, requests for reviewing Vietnamese diacritics rolled in from different parts of the world, including Dalton Maag in London, TypeTogether in Vinohrady, Sandoll in Seoul, Fontwerk in Berlin, Grilli Type in Lucerne, Klim Type Foundry in Wellington, TypeNetwork in Seattle, and Frere-Jones Type in Brooklyn. For a complete list, visit my client section.

In addition to typefaces, I review apps, websites, and any materials with Vietnamese text. As a result, I added type advisor to my resúmé to make the title official.

Web Résumé

What tools do you use to create your résumé nowadays? Many years ago, I created my résumé using Microsoft Words. It was great for catching spelling errors and grammars, but the typesetting was not good. I had to use system fonts like Arial or Verdana to make sure my typography wouldn’t screw up.

Later on, I switched to Adobe Illustrator so I could have control of my typography. The final PDF file could be printed on paper or uploaded to my website. Nevertheless, I wanted to create a true web version of my résumé for accessibility. Having to keep two versions of my résumé was a bit cumbersome. As a result, I designed my résumé with HTML and CSS first then I used CSS printing media query to create the final PDF for printing. Now I only keep the web version of my résumé.

In Professional Web Typography, I walked through the markups for a two-column and three-column layout for creating a web résumé. You can download the source codes for all of the projects in the book to practice your web and typographic skills.

Take a look at my web résumé. It can also be printed out on paper. I added a new position as a type advisor to my résumé. Since the launch of Vietnamese Typography, in 2016, I have been advising type designers around the world with Vietnamese diacritics. I am so glad that I made the book available for free. I am in the process of working with a company that I greatly admired and they required an official title; therefore, I am also a type advisor.

Twelve Years at Scalia Law School

Today marks my 12th year working at George Mason University’s Antonin Scalia Law School. Twelve years at the same job is a long time, especially in the web industry. I worked under three different deans. I had a great run with my previous supervisor for a decade. She retired last year. I miss her terribly.

My title as Director of Design and Web Services remains the same, but my role has changed drastically. I am moving away from hands-on design and development and taking on more providing direction. I don’t mind directing at all since I still do hands-on design and development on my own projects. I won’t lose my design and technical skills.

For the law school’s main website, the technical portions are being outsourced. We are throwing lots of money at outside vendors and the top is clueless; therefore, my responsibility is to make sure that the designs and developments are up to our standards. I offer my advice and expertise even if they aren’t taken.

As the main website becomes less of my responsibility, I am taking on a more prominent role on the network of Scalia Law Sites. I recognized the needs for a network of websites many years ago and I created the WordPress Multisite for the law community. In collaboration with the University’s ITS, my team supports and maintains almost 40 sites. The network is growing and we still have tons of work to do.

I don’t know what my future with the law school will be. I don’t want to think too far ahead. I no longer have the passion, but a job is a job. I don’t need the passion, the motivation, or the inspiration to do my job. I just need to put in my time and get out at the end of the day. Work is no longer on my mind after hours. I don’t let all the bureaucracies and incompetencies distract me. I balance my work and life. I enjoy the benefits I have earned in the past twelve years. I need to do what I need to do to support my family.

Taking the Shuttle

In 12 years at George Mason, I am taking the shuttle to work for the first time. A few years ago, I discovered that Mason offered free shuttle service from Fairfax to Arlington, but I hadn’t had the motivation to take advantage of it. I wanted to take my car just so I could drive to the Powhaton Springs Skatepark on my lunch break. As much as I loved going to the skatepark, I felt guilty about paying for the parking, toll, and gas.

As my car is aging and in need of constant repairs, I need to just make the move. I don’t want to spend too much money fixing my car. I definitely don’t want to buy a new car either. So let’s get back to public transportation. The shuttle is provided by Mason; therefore, it is semi-private.

I woke up this morning and walked over to the main campus. The walk took 20 minutes. The shuttle stopped at Rappahannock River Lane at 8:20 am. The shuttle was big and comfortable. There were only five of us. Air conditioning was blasting and WiFi was available so I could start my work day right on my commute. I arrived at Scalia Law at 9:00 am.

I definitely can do this. I am going to cancel my parking permit and take the shuttle. It takes me 12 years, but better late than never.

Note to self: I will save $85 a month on parking fee.

2022-2023 Self Evaluation

The self review process has changed bit this year with less questions and less verbiage. I was told not select outstanding performance, unless my performance was truly outstanding. I never selected outstanding in the past, but former supervisor always selected outstanding in her review of my performance. I also have a new supervisor this year and I don’t know what to expect. I chose successful across the board. I hope my new supervisor agree, but I am not going to lose sleep over it.

Job Knowledge & Execution

  • Stayed on top of responsibilities as Director of Design & Web Services
  • Made a major upgrade from MODX version 2 to version 3
  • Implemented web application firewall (WAF) to tighten security
  • Implemented content delivery network (CDN) to speed up performance
  • Upgrade PHP version 7 to 8
  • Improved HTML and CSS for richer content delivery
  • Revised and improved accessibility
  • Worked with our Web Content Specialist to keep content up-to-date
  • Developed a solution to display banners on digital monitors to promote the law school activities
  • Built out calendar for public events
  • Worked with Events Manager to promote the law school special events
  • Worked with outside vendors on digital advertising and marketing
  • Supported research centers with their WordPress websites
  • Collaborated with University’s IT on web-related projects
  • Developed new skills by learning and researching on Cascade CMS

Organizational Citizenship/Relationships

  • Supported faculty members with their digital requests
  • Worked with administrators on website updates and developments
  • Provided website solutions for admissions offices, career center, and research centers
  • Worked with everyone in the Law School to meet expectations of quality, accuracy, timeliness, ethics, professional conduct, and service to the university community
  • Took web accessibility and diversity seriously to support the university’s commitment to diversity, equity, and inclusion
  • Accessible to others and responsive to their questions, needs, and concerns

Goals, Objectives, & Results

  • Keep our websites in the best condition
  • Support the Dean Strategic Communications and Marketing in web marketing and communications
  • Collaborate with Faculty Services Librarian & Assistant Director of Communications and the Technology Services team on web-related technologies and digital designs

Operational Leadership

  • Led web development and design research, implementation, and execution
  • Initiated projects including WordPress theme design and documenting our processes
  • Supervised and mentored the web team
  • Provided opportunities for team members to reach their goals

Mentoring & Coaching

  • Encouraged team members to learn through online resources and conferences
  • Encouraged team members to take on projects that will help them grow their career
  • Opened to help others who need feedback on graphic design and web development
  • Updated the web design and development blog to provide in-depth documentation on MODX and all of the special features that I have implemented over the years
  • Encourage team members to contribute to the blog, which allows them to improve their analytical skills

Reflection

  • Successfully maintained high-quality websites for over a decade
  • Continuously improving performance, engagement, usability, and accessibility
  • There are many opportunities for improvements including creating new exciting contents and removing outdated materials

Development

  • Improve the CMS manager to provide an easier way for non-technical users to make updates
  • Looking forward to new challenges including Implementing a new content management system
  • Improve contents with engaging stories, videos, and interactions

Ten-Year Service Award

I managed to miss the 2022 University Day Service Awards ceremony yesterday. Blame it on the midterm election. Today I received a thank-you ecard from Provost, Executive Vice President & Professor Mark R. Ginsberg:

I want to express my appreciation for all you have done for Mason and congratulate you on your recognition of service. Your talents, efforts and contributions have helped Mason’s success, and the entire Office of the Provost takes pride in your accomplishment and commitment to excellence.

There goes my decade of service at George Mason University.

Eleven Years at Scalia Law School

Today marks my 11th year working at George Mason University Antonin Scalia Law School. As Director of Design and Web Services, I wear many hats, but my main focus is the law school website. It feels as if I had adopted and raised my own child and watched it grow from a toddler to a teenager.

When I first inherited the site from my predecessor, I had never worked with MODX before. The site was still running on the old codebase from MODX Evolution. To familiarize myself with the platform, I ripped the site apart and built everything from the ground up. I cleaned up the back-end codes and made sure the front-end markups were well structured. At the time when responsive design was still new, I implemented responsive layout starting with mobile first and progressive enhancement.

All the work I put in from the start had paid off in the long run. As the site grew over the years with countless iterations and several redesigns, the solid foundation on the backend, the clean markups on the frontend, and the visual presentation never spawned out of control. Under my watch, I maintained and nurtured every part of the site. I valued our visitors and respected their privacy. I pushed back when being asked to implement third-party trackers, including Facebook, Twitter, LinkedIn, and Google. I enhanced the user experience based on user studies, accessibility guidelines, and usability recommendations. I improved the design with new technologies such as CSS Grid and web fonts. I worked with developers to upgrade from MODX Evolution to MODX Revolution. I worked with the MODX team to migrate to MODX Cloud.

The site had been through different visions from three deans. The first dean and my supervisor gave me the freedom to shape the look and feel of the website. The second dean entrusted me to build a branding system for his vision: Learn. Challenge. Lead. Based on the University’s branding guidelines, typefaces, and colors, I implemented bright colors, bold typography, and inviting graphics. The site was vibrant and distinctive, yet still compliant with the Mason branding. The third and current dean wanted to tone down the look and feel. We went through several redesigns and ended up with what we have now.

Designing and developing the law school website has been not only my profession, but also my passion. I loved the web when I first discovered it many years ago and that love hasn’t changed. Between my professional and personal projects, I want to continue to make the web a better experience without tracking, wasting time, and frustrating users. my hope is to continue to maintain and to grow the law school website for many years to come.

The Case for Refreshing the Mason Brand

The Mason brand has served the university well. It communicates our key brand messages including academic quality, innovation, diversity, entrepreneurial spirit, and accessibility. Mason is evolving, but its visual identity is dating. To be a competitive school, Mason should consider refreshing its brand. The Mason visual identity needs to be simplified and unified.

The current University Logo is too complicated. The full lockup takes up too much space, especially when it is combined with a unit name (Antonin Scalia Law School). Although the M alone has some issues with the quill, it has the potential to carry the Mason brand like the swoosh for Nike, the apple for Apple, and the Siren for Starbucks. When the University Logo is simplified, the unit name could be better unified and balanced.

The Mason typefaces are over the place and they show no personality. The unit names are set in TheSans and that’s it. I don’t see it being used anywhere else. Myriad Pro and Minion Pro are the primary typefaces. Adobe Garamond and Helvetica Neue were thrown into the mix for no apparent reasons. Myriad and Minion are well-designed typefaces, but they are ubiquitous. They were designed to be neutral; therefore, they lack personality. Anyone who uses Adobe products would have access to these two font families. In fact, they are the default fonts for graphic tools including InDesign, Illustrator, and Photoshop. I have been noticing universities, such as Northeastern University and The New School, commissioning their own typefaces. I wonder if Mason would invest in custom typefaces to give the brand a unique typographic voice.

As for the colors, I would like to see the change for its primary colors or the expansion beyond the green and gold. Here are the notes on colors according to the brand guidelines:

Use Mason green and gold as the primary colors in your layouts.

Use secondary colors in combination with our primary colors to express the many facets of Mason.

Do not use secondary colors alone or as the primary color in branded materials.

Apparently we are not adhering to the guideline because the green and gold are so hard to work with.

Interview Questions

I found Sam Daugherty’s questions to ask during the interview process to be helpful; therefore, I wanted to repost them here:

Task-related Questions

  • What is the skills gap you’re trying to fill?
  • What are the ideal skills or experiences for someone in this role?
  • What does the day-to-day look like?
  • What are some high-level problems I’ll be working to solve?
  • What are the backlog problems I’ll need to solve?

Job-related questions

  • Is this a backfill position or a growth position?
  • What does success look like in this role?
  • What does collaboration and communication look like on your team and between teams/departments?
  • What is the average timeframe allotted to research/design a solution?
  • What is the makeup of the team and how are tasks divided?

Long-term questions

  • What kind of growth opportunities are there?
  • Where do you see this role/team in 3 years?
  • Are there opportunities for mentorship?
  • Do you see the team growing and what sort of growth do you expect?

Company questions

  • Describe the culture of the team and the company for me?
  • What made you want to work for [company] and what’s kept you here?
  • How often do you have to work late, on weekends, or feel compelled to respond after hours?
  • What does taking time off look like and are you expected to respond to messages during vacation?
  • Are there opportunities to travel and meet the team in person (if remote)?

More tips in the comment section from Jared Spool:

If you open with “When you hire the right person to join your team, what would y’all be able to accomplish that you’re not accomplishing right now?,” you’re showing that you’re very interested in the team’s success. It gives you an opening for many of the follow-up questions.

Chances are, from the answer, you won’t even have to ask many of them. For example, you’ll likely learn if the reason they’re hiring is that there’s a skill gap or that they’re just shorthanded. You’ll learn if it’s work on the backlog or if these are high-level problems being solved (or high-level problems on the backlog).

You can even ask what they’ve tried in the past to accomplish these things and explore what didn’t quite work out. That’ll give you good insights into the history of “how did you get to this moment” (something that lots of folks forget to ask about), which can be quite telling about how the team and organization works.

With every follow-up question, you can mentally build up a case as to what’s in your history that would make you an ideal candidate. You can wrap things up with a summary of that.

Contact