Visualgui 2018: Iteration 3

Iteration 3 of Visualgui 2018 is here to celebrate Vietnamese New Year. I started iteration 2, but decided to skip it. For this update, I made the logo bigger—much bigger. Fit, designed by David Jonathan Ross, works much better at a large size. Since this is a blog and a personal playground, I am not too worried about it being over the top. To beef up the design, I turned the logo into a graphical element, particularly on the homepage. I want to bring some soul into my blog.

I changed the headings from Tenez, designed by Rodrigo Saiani, to Rhododendron, designed by David Jonathan Ross. Although I still love Tenez, I could not resist Rhododendron’s bold and fun characters—the double-story g in particular. Of course, Rhododendron comes with Vietnamese diacritics. You can get Rhododendron by joining the Font of the Month. It has been so much fun receiving these beautiful display typefaces on the first day of each month. I can’t believe it will be a year in April. I hope David will continue this fun project.

The text face is still Ten Oldstyle, designed by Robert Slimbach. In iteration 2, I switched the body text to Pelago, also designed by Slimbach, but I just can’t use a sans serif typeface for reading text. I am still old school like that. Pelago, however, is still being used for small texts. It works really well as an UI typeface.

CSS Grid is still lots of fun to play with. Making web layout is such a joyful these days. I don’t have to wrestle with floats and all that jazz. That’s it for now, but I am sure I will make changes in the couple of months. Every time I do this, I remember Zeldman in the early late 90s and early 2000s. These days, designers don’t do redesign their own sites as much any more because of the increasing complexity of web design. It doesn’t have to be.

Web Design Doesn’t Have to be Complicated

Designer Frank Chimero has written eloquently about the increasing complexity of web design. I appreciate his honesty. As someone who has been making websites for a living for 16 years, I share his sentiment. I feel his confusion and frustration, but I would like to offer a more optimistic view. Web design doesn’t have to be complicated.

In 2002, I landed my first full-time job as a web designer at Vassar College. At the time, I was transitioning from Flash to table-based web design. ActionScript overwhelmed me. Flash was no longer a fun animation tool for me. Table-based layout was a pain to code, but Dreamweaver came to rescue. I still remember slicing and dicing up Photoshop mockups with spacer GIFs all over the layout.

In 2003, I made another important transition from table-based to CSS layout after reading Jeffrey Zeldman’s indispensable Designing with Web Standards. Between 2003 to 2004, I spent most of my working hours retrofitting Vassar’s websites from table-based to table-less using floats. Like Frank, I did not quite understand clearfix either. My workaround was using Dan Cederholm’s “group” suggestion.

I came to web design without any design background; therefore, my approach has always been simple and clean—not only with the visual layout but also the markup. I was a proponent of separating structure and presentation. In the first decade of my professional career, I kept myself on top of the game by reading blogs, articles, and books. I made the transition from fixed layout to responsive web design with ease and excitement.

As I was getting older and starting a family, I began to fall behind. The web just kept on growing without me. I recalled listening to the ShopTalk show and had no clue what Dave Rupert and Chris Coyier were talking about. What the heck were Angular, Backbone, Dojo, and React? What were Broccoli, Gulp, and Beanstalk? I knew they weren’t talking about vegetables and drink. Eventually I just stopped listening altogether to save me from depression.

I had recognized that web design had become too complicated and overwhelming for me; therefore, I decided to refocus my energy on the parts that are important to me. I did not need to follow the latest trends. I was not into parallax scrolling. I did not want to use any frameworks. I wanted to create websites that focus on speed, legibility, readability, accessibility, and simplicity. My main tools are HTML and CSS. I use JavaScript only when I have to. Responsive navigation is an example that required JavaScript to work.

Typography matters a great deal to me and I understand that using web fonts could be complicated. As Frank rightly pointed out, Bram Stein has written an entire handbook on the subject. In my own book, I also pointed out various methods of delivering web fonts. To get started, however, I just need one line of markup:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

I knew that I would miss out the nuances of font-loading techniques, but I am OK with that. Frank pointed out that CSS Grid is daunting to learn and I agree. The complexity that CSS Grid can handle is mind-boggling, but it doesn’t have to be complicated. As demonstrated in my book, I could accomplish a solid grid layout with a few lines of CSS:

.grid-layout {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 1em;
}

Again, web design doesn’t have to be complicated. With HTML, CSS, and PHP includes, I can put together decent websites. I don’t need a CMS. Even WordPress has become too complicated for me over the years. I started using WordPress before WordPress launched. Remember B2? Back in the B2 and WordPress 1.0 days, creating a theme was a breeze. I just needed 2 files (index.php and style.css) and an optional image (screenshot.png) for the screenshot of the theme. Parts that needed to be dynamic, I just needed to hook up some PHP snippets. In fact, this blog is still built using this approach so that I know exactly the pieces of codes go into my theme.

Now, an official theme from WordPress, such as Twenty Seventeen and Twenty Sixteen, has about 100 files. These days, creating a theme from scratch for clients is such a huge investment. In the past, I used starter themes like Underscores for client, but even that had begun to get complicated. As a result, I stopped offering WordPress to clients.

I moved away from complication and get back to the simplicity of web design. I enjoy the web more that way. I am like the Jay Z of web design.

Đạo’s and Đán’s Progress Report

Đạo and Đán received their progress report yesterday. They are graded on the following scales:

  1. Seldom demonstrates
  2. Sometimes demonstrates
  3. Usually demonstrates
  4. Consistently demonstrates

Đạo’s academic performances are between usually (3) and consistently (4) good. His social performances, however, are 3s across the board. He even had a 2 for “identifies, pursues, and reflects on goals.” Đạo is not antisocial. He just has a group of three or four friends that he is closed with.

To my surprise, Đán earned all 4s in his social performances. Then again, Đán is a pretty social kid. He doesn’t have a group of close friends, but he gets along with all of his classmates. His academic performances are also consistently good, except for his musical literary skills, which is understandable. He once told his music teacher that he couldn’t count 1 to 4 so he did not have to play the piano.

Another surprise is that he mastered most of the activities in his kindergarten report, including “taking turns and sharing.” I don’t see that at home. He fights constantly with his brothers over toys. He definitely acts different at home and school. He never received any pink slip for misbehaving in class. His teacher never complaint about his behavior. Even when I asked her, she told me that he is an excellent student in class.

Late last year, I was a bit worried about his reading since he could not tell me the alphabet. Then he made tremendous improvement once he mastered the letters. He worked through his word ring in two or three times. He is also doing good with Let’s Read, which we read together 2 or 3 pages each night. He started to be able to put the letters together on his own.

Paul Shaw: Revival Type

An awe-inspiring collection of typefaces that have been reinvented and reinterpreted from the past to the present. With side-by-side comparisons and clear, concise explanations, Shaw demonstrates the critical process of type revivals beyond facsimile. Successful revival designers use historical types as a starting point to create their own design. The behind-the-scene details are fascinating. Without a doubt, Revival Type deserves a spot in your collection of books on typography.

Xuân Turns Two

It’s a bit surreal that Xuân only turns two. In my mind, he’s much older than that. He is our little baby, but he has two other cousins younger than him. Comparing to them, he is much more mature. Furthermore, he has grown up so fast to catch up with his older brothers. He started to speak earliest out of the three boys. He knows how to communicate with words and he is beginning to form longer sentences.

On top of that, he started the terrible-two phase before he reached two. He started hitting his older brothers and kept on doing it because they don’t hit him back. Poor Đán, he just let Xuân hit him without hurting his little brother. I have to tell him to move away and straightened Xuân up every time.

When I dropped Xuân at daycare this morning, I stayed in his class for a bit to celebrate his birthday. He was quiet and serious. He was not the little Xuân we know at home. Xuân loves his teachers, particularly Ms. Aparicia. It took me a long time to say her name, yet Xuân already mastered it. Every morning, Xuân would say “I want Ms. Aparicia.”

Then again, he still wanted to be breastfed every night and morning. He is still mama’s little boy.

Bringing Back Blogging

iA:

The answer to the passive consumption of trash is the active formulation of questions, the active search for answers and the active work of putting complex knowledge and diffuse feelings into clear words. Unlike swallowing stuff pushed down your throat, research, reflection, and concise writing clears the mind. We need to write on our own domains. Don’t post thoughts on Facebook. Use it to get traffic. Drop Medium for blogging. Own your writing. Use Twitter carefully. And on your domain, send people to other domains you like, outside the usual black holes, if possible.

The entire blog post is worth reading.

Porn Literacy

Maggie Jones’s “What Teenagers Are Learning From Online Porn” examines how kids use porn as their source for sex. A fascinating read.

Nguyễn Hồng Ân: Tôi vẫn nhớ

Gần đây Nguyễn Hồng Ân phát hành nhạc xưa đều đặn. Năm trước album Ai cho tôi tình yêu cũng tạm được nên năm nay thêm Tôi vẫn nhớ. Giọng Nguyễn Hồng Ân trầm ấm và cách hát nhẹ nhàng. Ca hơi điệu một chút nhưng hợp với nhạc trữ tình. Cách trình bày không được sáng tạo như Hà Anh Tuấn nhưng nghe cũng không tệ.

Kavin Jay: Everybody Calm Down!

I am glad to see more Asian comedians on Netflix. Unfortunately, Malaysian Kavin Jay is another disappointment. His materials range from obesity to parents to porn, but his writing isn’t edgy nor twisted. As a result, it doesn’t leave any deep impact.

New Work: America

Just launched a brand new website for America to pitch a film script for F.H. Buckley who is the Foundation Professor at George Mason University Scalia Law School.

Since the goal is to provide information including synopsis, historical research, and story setting, about the film, the site needs to be clean, simple, accessible, and fast. Typography plays a huge role in the design; therefore, I combined Oswald, by Vernon Adams, with Spectral, by Production Type.

With a modest budget, Buckley could have thrown the site together and put it on Squarespace, but he chose my service instead. The result is that his doesn’t look like one of Squarespace’s thousands of templated designs. These days, I can spot a Squarespace website without even looking at the code.

Contact