Tag Archive for ‘Web Design’

A Showcase of Lightweight Websites ➝

From the website:

The 512KB Club is a collection of performance-focused web pages from across the Internet. To qualify your website must satisfy both of the following requirements:

  1. It must be an actual site that contains a reasonable amount of information, not just a couple of links on a page (more info here).
  2. Your total UNCOMPRESSED web resources must not exceed 512KB.

Aside from the three images that are currently in the feature articles on my homepage, I’d be well within the 512KB limit — I’d even make it into the “Green Team”, which is 100KB and smaller. I wish there were a lot more people out there that cared this much about the size of their web pages.

➝ Source: 512kb.club

The Flashing Webpages ➝

Elliot Clowes:

I’ve noticed more and more websites now only loading images on a page when you scroll to down to them. It’s called ‘Lazy Loading‘ and I hate it. I’m all for saving bandwidth and improving page loading times but this trend is incredibly annoying.

I completely understand why web developers choose to use lazy loading on their sites, it’s heavily encouraged by Google in their Page Speed Insights tool and is commonly suggested in online guides as a way to improve load times. But using lazy loading is often times exactly as its name suggests — lazy. It doesn’t lead to a good experience for site visitors and doesn’t actually accomplish what should be the end goal — sensibly sized web pages that load fast.

The problem is that the right way to do things isn’t easy. The task of properly sizing and optimizing images is tedious. And it’s often difficult to know what can safely be cut from your design without being a detriment to the site. But those time consuming and difficult tasks are really what needs to be done, not simply enabling lazy loading.

➝ Source: imlefthanded.com

HTML Is the Web ➝

Pete Lambert:

A Web page is a document. A component, whether it’s part of a blog template, a news site, a marketing stats dashboard or a sign-up form, is a part of a document. Documents have structure. On the Web, that’s not just about the visuals or the architecture provided by your framework, it’s about choosing semantically correct elements that make sure that your Web page, component, whatever, is correctly structurally formatted. Headings should be headings, lists should be lists, buttons should be buttons and tables should be tables. You can style them (pretty much) however you like – a heading doesn’t have to be big and bold with a bottom margin. That’s up to you, but it should definitely be a heading and I’ll fight you if you make it a div.

This is such a great piece. If you build anything for the web or are at least interested in doing so, read this. Then consider learning some HTML. If you’ve never touched it before, I think you’d be surprised at how quickly it can be picked up.

Safari Technology Preview 58 ➝

This release includes new features that will be shipping in Safari 12 later this year, including icons in tabs and automatic strong passwords.

One thing of note for web designers is that, after enabling icon tabs in the app’s settings, it looks like the browser defaults to using the website’s “mask-icon” for this feature. These icons were previously only used for pinned tabs and are limited to a single color.

But if you remove your website’s mask-icon entirely, Safari will fallback to displaying the site’s full color favicon instead. And there doesn’t appear to be any downside to removing a site’s mask-icon because this new version of Safari will display favicons for pinned tabs as well.

The New Initial Charge

I’ve spent a great deal of my free time over the past five-and-a-half months working on a new design for Initial Charge. I have done major redesigns in the past, but this was the first time I ever tackled a ground-up rewrite of the site’s design. Every single line of CSS and HTML was written from scratch.

A year or two ago, that wouldn’t have been possible. But I spent last fall learning as much HTML and CSS as I could from Treehouse. Before then, my knowledge of web design was fairly rudimentary — never able to do much more than minor changes to existing WordPress themes. Now, I can build an entire WordPress theme with minimal web searching.

This is how Initial Charge looked from December 2015 until today:

Initial Charge’s 2015 Design

The new site design, which I’m calling Recharge, fixes many of the annoyances I had with the previous design — the first being typography. The previous design’s titles were set in Georgia with the body text in Avenir. And while these typeface had served me well, it was time for a refresh. Titles are now set in Palatino with Avenir Next as the body font.

The next major, site-wide change is the way images are displayed. The silly outline is gone and images now fit the full width of the viewport on mobile and the full width of the text column on desktop and tablets. This had been something I wanted to do ever since I saw Álvaro Serrano make the change on Analog Senses early last year. It should make the site’s use of images much more impactful and allow readers to see more detail in screenshots.

If you’re viewing this on mobile, as most of the site’s visitors do, you might not have noticed this next change — a two column, responsive layout. When the browser window becomes 768 pixels or wider, the top navigation bar disappears and a sidebar surfaces that may be familiar to long-time readers. Prior to the site’s redesign in 2015, Initial Charge had a two-column layout with navigation in the sidebar. When I moved to the more mobile-friendly 2015 design, the sidebar was completely replaced by the top navigation bar. With Recharge, you get the best of both worlds.

The archive page has been restyled with all of the feature articles grouped beneath month headers — I was overjoyed when I figured out how to do that. But the most exciting change is the restructuring of the homepage. Reverse-chronological works when everything you publish has the same weight, but on site’s like Initial Charge, with feature articles and links, it wasn’t a great fit.

It may be a bit trendy to say this, but Initial Charge’s homepage is now algorithmic. Although, the homepage algorithm is a bit more simplistic than what the fine folks at Twitter and Instagram have built. Entries on the homepage are now in the following order:

  • The most recent feature article.
  • The eight most recent Linked List entries.
  • The second most recent feature article.
  • A list of the six most recent feature articles that haven’t already appeared on the homepage.

Long time readers are unlikely to visit the homepage — most of them use RSS, Twitter, or some other means to be notified when something is published. The vast majority of people that hit the homepage are new readers and this structure will allow Initial Charge to put its best foot forward, hopefully turning those first timers into repeat visitors.

The Rest

There are several other, small design details that I think are worth pointing out:

  • A yellow underline now highlights feature article titles.
  • Square bullet points are used in unordered lists.
  • The site’s “bolt” icon now appears alongside the date below articles and links.
  • The site’s search bar has been completely restyled.
  • The webclip icon now appears at the bottom of each page and links to the homepage.
  • There’s now a touch of green in the design. The color appears as an underline on subheadings within articles and a handful of other locations throughout the site.

I never expected the site redesign to take as long as it did — maybe a month or two, but definitely not five-and-a-half months. But I couldn’t be happier with the results. I may get the itch to write some HTML and CSS sooner, but my hope is that this new design will last for many years to come.

I obsessed over every page before hitting the “Activate” button in the WordPress dashboard, but there’s certainly the possibility that I overlooked something. If you notice anything that doesn’t look quite right, please let me know — either by email or on Twitter with a mention or direct message.

Web Design on the iPad

Coda and Web Tools in Split View

About once a year I get the itch to make some changes to Initial Charge’s design. I’m not quite sure what causes this feeling, perhaps it’s simply pent-up creativity that eventually forces itself out through a text editor. Or maybe the handful of growing annoyances with the current design slowly become too much to bear. Either way, this feeling is inevitable.

The last major redesign was the largest design project I had ever completed. I made the move to a responsive, single-column layout that retained many of the design cues that help Initial Charge stand out against a sea of minimally designed WordPress sites. The yellow background for anchor elements, the headings typeset in Georgia, and the overall focus on the body text itself were all present.

One of the main reasons for moving to a single-column layout was because it was the quickest method for obtaining a mobile-friendly design. The web has changed dramatically over the past decade, but the biggest change is the number of handheld devices used for web browsing. I just couldn’t stand to continue publishing on a site that wasn’t enjoyable to view on a smartphone.

But I’ve never been too thrilled about my decision to build a single-column layout. And although the mobile experience was my highest priority, I didn’t like how the site looked in desktop and tablet browsers. There was too much untapped potential in the additional screen real estate.

The current, single-column layout always felt like a cop-out. And unfortunately, that’s because it was. My knowledge of HTML and CSS has always been rudimentary. I could get by making small changes here and there, but I would frequently run into problems that I had an incredibly difficult time trying to solve. Some of the time I could look at the source code of other sites that were achieving a similar effect, figure out how they did it, and implement it here. But a lot of the time, I couldn’t.

This past September, I made the decision to learn more about web design. I signed up for Treehouse and started their Web Design track. I can’t believe how much I’ve learned in just under five months. Don’t get me wrong, I have no expectations of quitting my day job tomorrow and earning a living as a web designer, but perhaps that will be a possibility in the future. All I know is that I’m significantly more comfortable working in HTML and CSS than I used to be and that feels wonderful.

With the knowledge that I’ve acquired from Treehouse, I’ve started work on a new design for Initial Charge. But this time, rather than modifying an existing WordPress theme — as I’ve done with every other iteration — I’m building this one from scratch. I’ve already coded the necessary template files and I’ve started work on the CSS a few days ago.

My expectation is to have a two-column layout for desktop and tablets that gracefully transitions into a single-column when viewed on a smartphone. I hope that I’m able to achieve this while also writing much cleaner code than what the site’s using now (it works, but there’s about eight years of cruft that I’m not going to miss). I don’t have any idea how long this new design will take — I’d prefer to launch it when it’s ready rather than rushing to ship something that’s not quite there yet.

Web Tools’ Presets

But I didn’t just write this piece to tell you about how much I’ve learned from Treehouse or that at some point in the future you can expect a fresh coat of paint. I wanted to share the software and resources I’ve been using to build this new design, entirely on my iPad.

  • Typewolf: A wonderful typography resource by Jeremiah Shoaf. The site features examples of typefaces in the wild and recommendations on font pairings. This is the first place I go when I need to make typesetting decisions on my web projects.
  • iOS Font List: The majority of Initial Charge readers browse the site from an iOS device and it’s important that the typefaces I choose are built into the operating system. This site lists every single font available on iOS and when it was added to the system. Once I find the fonts I’m interested in using, I check to see if they’re available with iOS Font List.
  • View Source: An inexpensive app from Paul Hudson that let’s you view the source code of any website with an action extension. It’s a very simple utility app that I find myself using just about every time I sit down to code.
  • Web Tools: This app, by James Finley, brings three essential web development tools to the iPad — an inspector, a console, and a scalable browser window. This app is genius. It allows you to test your design at any browser width and offers a handful of presets based on the most common Apple devices. Web Tool’s inspector has been invaluable for me as I’ve moved from building the HTML structure to the CSS styles.
  • Coda: This is the real deal. A full-featured text editor from Panic with find and replace, syntax highlighting, local and remote file management, keyboard shortcuts, and more. This is the backbone of my web development workflow on iOS. It’s one of the few, truly desktop-class applications on the platform and I can’t imagine doing this kind of work without it.

My iPad had a role in building the previous design of Initial Charge, but I did the vast majority of the coding on my MacBook Air. For the most part, the iPad simply served as a preview screen.

This time around, I’ve barely touched my MacBook. I spend most of my time with Coda and Web Tools open, side-by-side on my iPad, which is propped up by my Compass. I have Apple’s previous Bluetooth keyboard in front of me alongside my iPhone, a pad of paper, and a pen. This has become my preferred setting for web design work and I wouldn’t change a thing.

10K Apart ➝

A great contest from Microsoft and An Event Apart:

With so much of an emphasis on front-end frameworks and JavaScript runtimes, it’s time to get back to basics—back to optimizing every little byte like your life depends on it and ensuring your site can work, no matter what. The Challenge? Build a compelling web experience that can be delivered in 10kB and works without JavaScript.

I wouldn’t mind this sparking a trend in web design — the world needs smaller web pages.

(Via Matt Birchler.)

A Simple Web Developer’s Guide to Color ➝

Laura Elizabeth, writing for Smashing Magazine on color theory:

But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it.

Of course, that doesn’t really help when you’re just starting out, does it? That’s why, in this article, you won’t see a single color wheel. Instead I’m going to show you a simple color workflow that you can use in your next web project.

Great tips on finding complimentary colors for web design. I’ll almost certainly use this process when I decide to make design changes to the site in the future.