Web design

Dark mode

March 6, 2020 by Jenxi Seow

This site is now dark mode ready! If you have dark mode or night mode enabled on your desktop or mobile browser, you’ll be able to see the effect on this site.

Dark mode was added to iOS and recently to macOS 10.14 as well. This allows users to choose a dark theme, either as the default, or allow the operating system to automatically switch to light mode in the day and dark mode at night.

Why use dark mode?

Why would you want to use dark mode? The main reason is that it is aesthetically pleasing. It is a personal preference and some people prefer a user interface with light foreground on dark backgrounds.

For those of you who work in a dark room, using dark mode means less light colours on the screen and this reduces the strain on your eyes. Dark mode reduces the glare from the screen by switching the user interface to one that uses light text dark colours.

Dark mode for websites

With desktop and mobile operating systems supporting dark modes, an increasing number of people will be on dark mode. This also means there is a greater chance that people will land on your site with their computer running on dark mode.

Websites that don’t support dark mode will stand out, especially those with greater white or light backgrounds. When the user interface is darker, a website with black text and white background sticks out like a sore thumb. A website that noticeably changes with dark mode preference shows that the site designers value a holistic and considerate web browsing experience for their visitors.

How to apply dark mode?

It is very easy to implement dark mode on your website using CSS. You can use a media query to check if the browser prefers dark mode. While this isn’t supported everywhere yet, it’s a good start and it should gain wider adoption as dark mode becomes more widely used by web designers.

Add this to your media query section of your CSS file:

@media (prefers-color-scheme: dark) {
  body {
		background-color: #232222;
		color: #fff; 
  }
  
	a, a:hover { color: #fff; 
  }
  
}

What goes into this media query? Basically you just need to change background to a dark colour and text to a light colour. Add a tinge to the colours depending on your site’s colour palette.

Other elements you need to tweak include buttons, input fields and icons.

More than a colour palette inversion

Implementing dark mode doesn’t mean just inverting the colours or changing to light text on dark backgrounds. The whole premise of the dark mode is to reduce the glare and adjust the displayed content so they are not too bright for the user.

I dimmed the image in dark mode so the site will not suddenly feel brighter due to images. The images will still revert to full brightness when you mouse over them so you can hover your cursor to look at the images.

It took me about 40 minutes to implement dark mode on this site, my Journal and my Chinese blog. Let me know if I missed out certain elements! And I highly recommend you try it out on your site!

Web design

August 10, 2015 by Jenxi Seow

I have been doing web design for a long time. It was something I took to naturally ever since I had internet access, but it was only when a friend asked me for the exact duration I have been designing websites that I realised just how long it’s been.

My first website was a fan site dedicated to the Japanese drama the Beach Boys, hosted on Geocities. I love the drama series and I think it had a big influence on my preference for lazing on the beach.The second was a Gundam shrine hosted by Angelfire.

Two of fan sites that I run, MechaBay and WuxiaSociety.

These sites were memorable because they were the first two that I built, and also due to the way I coded them. They were conceptualised on paper. Sure, you might think it is perfectly normal for web designers to sketch out their ideas on paper. What I did was actually writing out the code by hand on paper.

Back in 1998, I did not have a computer at home, not to mention an internet connection. I got limited time to work on a computer either when I was at my uncle’s place or when I convinced my parents to pay for a couple of hours at the internet cafe. Since I had to work with time constraints, there was no time to spare for looking up references or even thinking about the code.

I loaned many introductory books on HTML from the library. However, the better books were often snapped up as soon as they are available for loan, so I made copies of a few references that I used regularly. Back then, I had no idea then that reproducing a whole book would be a breach of copyright.

Beautiful photography deserves web design that looks good. Source: danielho.com

With my design concept in mind, I would write down the lines of code and experimented with a few variations. So when I had the opportunity to use the computer, I could quickly typed out the codes in Notepad and tested the HTML files locally. Even after Microsoft Frontpage and Adobe Dreamweaver were released, making web design a visual affair, I still stuck to building sites by code. The applications were still useful as a means for me to instantly see how my code affects the design.

Along the way, I picked up CSS and Javascript as websites became more complex and interactive. When I entered university in 2004, I started taking paid web design jobs to earn money on the side. I was also building websites for fun. These personal projects helped me learn new skills, hone my techniques, and taught me how to be a better at running a website. All of these shaped me as a web designer/developer, and equipped me with the knowledge necessary to advice my clients on the design and administration of their websites.

Photo layouts on my blog.

After years of working as a freelancer, my good friend Matt and I decided to pool our abilities and take on bigger projects in 2014. Several friends asked how it was possible for us to get into the web design business with no experience. That was the first time I actually counted the number of years that I have been doing web design. A decade working freelance is far from having no experience. Matt has a similar wealth of experience as well. We complement each other with our expertise in different aspects of the web design business.

Let’s make the internet look better.—RubyCoded

What we set out to do is not just build websites. We want to create beautiful web designs because the internet deserves to look good across all devices. It is sad that despite years of advancements in web browsers and web programming languages, many websites look horrendous. The website is a virtual representation of a brand, a person or an organisation. Time and money should be put in to make it look decent.

Websites nowadays need to look good not just on desktop, but also on mobile. As web browsing continues to shift towards mobile platforms, it is increasingly important for websites to look good on mobile devices.

We build websites with responsive designs. This means they adapt to desktop, tablet and mobile screen sizes fluidly, while maintaining the same design style and structure.

If you are keen to collaborate with us on a project or wish to have give you website a facelift, drop us a message.

Full-width theme design

November 16, 2014 by Jenxi Seow

If you have been following my blog in recent weeks, you would have noticed the transition to a full-width theme design. I have been holding off making the switch because of the amount of work needed to implement it.

I previously went with large images for greater visual impact without going for a full blown edge to edge look. Full-width images would mean that photos in the portrait orientation would take up too much vertical space. However, once I figured out how to fit two portrait images side by, and thus effectively restricting the height, it was only a matter of time before I made the leap to using full-width images.

Diptych dilemma

The option of arranging portrait photos in a diptych had always been available. I was simply unwilling to go through the hassle of manually processing the images with Photoshop. Even the automation provided by Photoshop Actions did not tempt me down that road. Yes, I’m lazy. But I had another reason for not baking the diptych as a single image. By presenting two portrait photos side by side in a single image, it would be an awful experience viewing the photos on mobile. The current method of arranging the images by CSS allows me to provide a fallback via media queries for smaller screen sizes. On smaller screens, the diptych becomes a single column of images. Yes, readers can pinch to zoom on their mobile devices but if they had to do that, it means that the responsive design is bad.

Another obstacle to a full-width design is the need to manually wrap my text with HTML tags to make the design look right. Now that I blog in MarsEdit, the app highlights syntax, making it a lot easier to work with HTML and Markdown in my entries.

I have also switched to a font I really love: Avenir Next. Apple devices come with Avenir Next so you will be able to enjoy the beauty of this exquisite font. If you are rocking a Retina device, you would get to enjoy the slickness of this well-designed font. Unfortunately for those on non-Apple devices, unless you have the font installed, your browser will fall back onto the Google Font Muli, which is close enough but it’s no Avenir Next.

For those of you who are wondering, the previous main font was Lato from Google Font. Although the thin Lato font looks great on Retina screens, it renders poorly on screens with less pixel density. Avenir Next is more balanced, giving you the best of both worlds on Retina and non-Retina screens.

Good typography was something I kept firmly in mind when going into the design, since I want to post more text-only entries. The old design used justified text. I admit having a preference for full justification because my OCD makes me want to see the text aligned in a clean line along the margin. However, I have since relaxed on that stance because fully justified text can cause gaps called rivers of white, more so on a blog that is viewed on a variety of screen sizes across desktop and mobile devices. Full justification has its place in print, where you can craft your text to fit into the column. You can switch words to minimise or eliminate gaps. But for a responsive web design, I believe that having the text flushed left is the ideal way to go. It took me a while to get used to the ragged right on the blog but I’m starting to appreciate its usefulness.

Full-width designs are in fashion now for a good reason. It gives a lot of visual impact, especially when you are viewing the site on a large screen on desktop or laptop. It is a very immersive experience and it is something I wish for readers to enjoy, especially photographs are an important elements of my blog entries. I have managed to get the design to work well for both text only and image rich posts.

Change is the constant

I like the way it is set up so I can easily switch between full-width images or making the images snap to the column. The images on this post are styled with the latter. This flexibility will help me better present my entries visually. Once size fits all doesn’t work all the time. Sometimes we are forced to fall back to a single solution, especially when dealing with clients with limited technical abilities to handle custom functions. On my personal blog, I get to go crazy and try all sorts of bells and whistles.

It is very likely that you will see more changes a few months later, or even in mere weeks. I believe it is very common with web designers’ personal websites. Our blogs often become our test beds to experiment with. The changes reflect a shift in our design tastes and are a sign that we are picking up new tricks.

I hope you enjoy this latest tweak.

Portfolio – Photos by Jen Xi

May 30, 2012 by Jenxi Seow

My portfolio site is finally live. I have been fiddling around with several set ups but I’m proud to announce its official launch. It has been an interesting and, at times, frustrating, journey to complete this project.

When I decided to build a self-hosted blog/portfolio site, I wanted the domain name jenxi.com. However, it was unavailable back then. It was owned by a company named JENXI, that was producing some baby products.

After some research, I ended up buying iamjenxi.com. The domain name is shamelessly narcissistic. I loved it. My portfolio had been a work in progress and I spent more time blogging. The site slowly transformed into my personal space.

I was bored one day and tried to access jenxi.com. I was surprised to find it unregistered. I wasted no time purchasing the domain. When the euphoria of getting my desired domain name washed off, I sat there and wondered what I would do with it.

The first thing that came to my mind was to transfer the current site to the new domain name. When I sat down to think about it, I realised that I have become very attached to iamjenxi.com. I could not bring myself too proceed with the plan.

The other choice was to use jenxi.com for my portfolio. I’m a photography enthusiast but shooting has been more of a hobby I don’t have many photos that I would consider worthy to be put up as part of my portfolio.

I’ve always been a perfectionist and I already knew that I had barely a handful of photos I approved of, even before I started poring through my image library. These few photos will mark the beginning of a self-conscious push to generate better quality and a greater quantity of photos.

My past few weekends have been devoted to photo walks. I plan to make it a routine. The first couple of times that I went shooting were rather disappointing. To help myself to capture more interesting photos, I have started a few mini projects to pursue during the shoots.

I look forward to capturing shots that will grace Photos by Jen Xi.