web development – Say Yeah! https://sayyeah.com Digital management consulting that shapes more effective organizations. Tue, 17 Jun 2025 14:35:00 +0000 en-CA hourly 1 https://wordpress.org/?v=5.4 https://insights.sayyeah.com/wp-content/uploads/2021/10/cropped-apple-touch-icon-32x32.png web development – Say Yeah! https://sayyeah.com 32 32 FITC Toronto, April 17-18, 2023 https://sayyeah.com/digital-insights/fitc-toronto-april-2023/ Tue, 04 Apr 2023 14:44:53 +0000 https://sayyeah.com/?p=16267 Here’s your official invite to the 2023 edition of FITC Toronto. Whether you work in design, or digital development, finding inspiration and learning from industry leaders benefits your professional development journey. FITC Toronto is your opportunity to gain professional insights and practical solutions to sharpen your skills. FITC is a two-day in-person and online event […]

The post FITC Toronto, April 17-18, 2023 appeared first on Say Yeah!.

]]>

Here’s your official invite to the 2023 edition of FITC Toronto.

Whether you work in design, or digital development, finding inspiration and learning from industry leaders benefits your professional development journey.

FITC Toronto is your opportunity to gain professional insights and practical solutions to sharpen your skills. FITC is a two-day in-person and online event showcasing the best the world has to offer in design, digital development, media and innovation in creative technologies.

Talks we’re excited about

Full event agenda

FITC Diversity Initiative

FITC is offering complimentary tickets for people from underrepresented groups in tech to attend the event, either in-person or online. The program is aimed at those who are unable to secure a ticket through their company or cannot afford a ticket themselves.

Apply for a free seat

Save $100 on FITC Toronto tickets!

Don’t have a ticket yet? No worries, we’ve got you covered. Save $100 off in-person tickets with code “fitcnews” and 25% off your online ticket with code “twittervip”.

Attend online or in person.

The post FITC Toronto, April 17-18, 2023 appeared first on Say Yeah!.

]]> FITC Web Unleashed, October 24 -26, 2022 https://sayyeah.com/digital-insights/fitc-web-unleashed-october-2022/ Tue, 18 Oct 2022 19:10:32 +0000 https://sayyeah.com/?p=15878 Web Unleashed is back for its annual edition on October 24 – 26, 2022. Web Unleashed is a three-day conference led by some of the most knowledgeable minds in front-end web development. With sessions from expert speakers, the conference will empower front-end developers with the latest tools, techniques, and technologies in the industry. Web Unleashed […]

The post FITC Web Unleashed, October 24 -26, 2022 appeared first on Say Yeah!.

]]>

Web Unleashed is back for its annual edition on October 24 – 26, 2022.

Web Unleashed is a three-day conference led by some of the most knowledgeable minds in front-end web development. With sessions from expert speakers, the conference will empower front-end developers with the latest tools, techniques, and technologies in the industry. Web Unleashed will also feature discussions on end-to-end testing, responsive design, and improving web performance.

Talks We’re Excited About

Full program schedule

FITC Diversity Initiative

In partnership with the RBC Diversity Program,  FITC is offering 100 complimentary tickets for people who are part of underrepresented groups in tech.

While the deadline to apply for this upcoming event has passed, we encourage people from underrepresented communities to follow FITC’s diversity initiatives for upcoming scholarships and other opportunities.

Attend by yourself or with your whole team

Tickets start from $60 for students and $180 for individual professionals, with discounted group tickets available.

Grab your tickets

Ready to keep your audience engaged with a delightful web experience?

We provide inclusive website design solutions that welcome your audiences to engage with your content, products, and services. Bring the best of front-end development to your projects with our web standards based, usable, accessible, and inclusive work.

Get in touch

 

The post FITC Web Unleashed, October 24 -26, 2022 appeared first on Say Yeah!.

]]> 2022 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization https://sayyeah.com/digital-insights/2022-website-builder-accessibility-comparison/ Mon, 25 Oct 2021 13:21:32 +0000 https://sayyeah.com/?p=15258 The first starting point for many people and organizations when building a website is drag-and-drop or templated site builders like Wix, Squarespace, and Weebly. Although these tools often provide templates that take care of the visual design and functional aspects of building a site, they often don’t consider other business requirements, like accessibility. If you’re […]

The post 2022 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.

]]> The first starting point for many people and organizations when building a website is drag-and-drop or templated site builders like Wix, Squarespace, and Weebly. Although these tools often provide templates that take care of the visual design and functional aspects of building a site, they often don’t consider other business requirements, like accessibility.

If you’re looking to launch an improved website in 2022, now’s the time to investigate platform options and find the right website builder for your organization, without sacrificing accessibility, and the market growth and content engagement benefits that come with a more accessible website.

Our comparison

We looked at each of the major website builders along with other popular website and content management platforms to compare them across a range of accessibility factors needed for meeting standards like WCAG 2.X, and ranked them against each other to see which ones made it the easiest to build an accessible website effectively.

Accessibility scoring legend

  • Overall score 1 out of 5
    does not support most accessibility considerations
  • Overall score 2 out of 5
    supports some accessibility considerations
  • Overall score 3 out of 5
    accessibility considerations can be met, but it will take work
  • Overall score 4 out of 5
    almost out-of-the-box accessibility

Squarespace accessibility

Squarespace accessibility has an overall score of 4 out of 5
Squarespace requires a moderate degree of custom code, depending on the template.

  • Headings Yes

  • Landmarks Partial

  • Skip navigation Yes

  • Tab index Yes

  • Visible focus ring Yes

  • ARIA labels Partial

  • Alt tags Yes

 

Wix accessibility

Wix accessibility has an overall score of 3.5 out of 5
Wix requires custom code and some setting changes.

  • Headings Yes

  • Landmarks Yes

  • Skip navigation Yes

  • Tab index Yes

  • Visible focus ring Yes

  • ARIA labels Partial

  • Alt tags Yes


GoDaddy accessibility

GoDaddy accessibility has an overall score of 2 out of 5
GoDaddy’s template maker does not provide accessibility settings and does not allow for custom code.

  • Headings Yes

  • Landmarks Yes

  • Skip navigation No

  • Tab index Partial

  • Visible focus ring Yes

  • ARIA labels No

  • Alt tags Yes


EditorX accessibility

EditorX accessibility has an overall score of 2 out of 5
Accessibility is not fully possible within the current EditorX system.

  • Headings Yes

  • Landmarks Partial

  • Skip navigation No

  • Tab index Partial

  • Visible focus ring Yes

  • ARIA labels No

  • Alt tags Yes

 

Weebly accessibility

Weebly accessibility has an overall score of 3 out of 5
Weebly requires a high degree of custom code.

  • Headings Partial

  • Landmarks Custom

  • Skip navigation Custom

  • Tab index Partial

  • Visible focus ring Yes

  • ARIA labels Custom

  • Alt tags Yes

 

Webflow accessibility

Webflow accessibility has an overall score of 4 out of 5
Implementation with Webflow is straightforward, but requires some code knowledge.

  • Headings Yes

  • Landmarks Yes

  • Skip navigation Custom

  • Tab index Yes

  • Visible focus ring Yes

  • ARIA labels Yes

  • Alt tags Yes

 

WordPress accessibility

WordPress accessibility has an overall score of 3 out of 5
Wordpress requires extensive custom code, but all of the required items for accessibility are possible.

  • Headings Custom

  • Landmarks Custom

  • Skip navigation Custom

  • Tab index Custom

  • Visible focus ring Custom

  • ARIA labels Custom

  • Alt tags Custom

Drupal accessibility

Drupal accessibility has an overall score of 3 out of 5
Like WordPress, Drupal requires extensive custom code, but all of the required items for accessibility are possible.

  • Headings Custom

  • Landmarks Custom

  • Skip navigation Custom

  • Tab index Custom

  • Visible focus ring Custom

  • ARIA labels Custom

  • Alt tags Custom

Joomla accessibility

Joomla accessibility has an overall score of 3 out of 5
Like WordPress/Drupal, Joomla requires extensive custom code, but all of the required items for accessibility are possible.

  • Headings Custom

  • Landmarks Custom

  • Skip navigation Custom

  • Tab index Custom

  • Visible focus ring Custom

  • ARIA labels Custom

  • Alt tags Custom

Headless CMS accessibility

Headless CMS accessibility has an overall score of 3.5 out of 5
A Headless CMS requires extensive custom code, but all of the required items for accessibility are possible and the system is easier to use for advanced accessibility items.

  • Headings Custom

  • Landmarks Custom

  • Skip navigation Custom

  • Tab index Custom

  • Visible focus ring Custom

  • ARIA labels Custom

  • Alt tags Custom

The winners

Squarespace for business owners

Squarespace is the most out-of-the-box accessibility-ready platform, and unlike competitors, does not require a lot of extra work on the part of someone setting up a site to enable accessibility features. These factors make it a great fit for business owners who want to get started with an accessible website without as much design or development time required.

We’d like to acknowledge Squarespace’s improvement in the last year, going from missing many features to being a solid platform for accessible templates. We’re pleased to be able to recommend Squarespace as a platform option for the first time.

Webflow for designers

Webflow is the best we tested out of all no-code website builders, with ease of use, built-in accessibility features, and customizability all at your disposal when creating a more accessible website.

Headless CMS for developers

A headless CMS such as Contentful, Ghost, Netlify, Sanity, Storyblok, or Strapi is an excellent choice in cases where you are working with a capable developer. A headless CMS offers advanced customizability for any and all accessibility needs, and is a blank slate full of possibilities for usability, design, and accessibility across your website.

An as-is template isn’t necessarily enough to be accessible

Although several of these platforms have taken the time to enhance their platforms’ accessibility, it’s typically more complicated to ensure your site is compliant when using one of these platforms.

For example, to make content on your site accessible, you’ll want to make sure that you have features like a skip navigation link, landmarks on the page for screen readers, and appropriate ARIA labels when needed.

Some of these features are not available on these platforms. When they are available, it may take some manual work to set them up, and your development team may not have all the answers.

If you need help navigating these standards in order to deliver an accessible website that opens up access to market and improves content engagement for all of your customers, get in touch.

Our accessibility-focused approach

By focusing on making your site accessible across content, design, and development requirements right from the start, and providing resources to your team to continue these efforts longer term, our approach helps save your team from costly rework and retrofitting your site later while guiding you towards maintaining your accessibility objectives with every content update.

When a site is built with this approach, you can focus on maintaining your site’s accessibility and continually improving other areas of your website without needing to spend time fixing larger accessibility issues across your whole website.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Essential Website Audit to uncover issues with your current website, or get in touch to learn more about our accessible website design services.

Get in touch

The post 2022 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.

]]> Introducing our guide to making your Webflow site more accessible https://sayyeah.com/digital-insights/introducing-webflow-accessibility-guide/ Fri, 27 Nov 2020 00:45:30 +0000 https://sayyeah.com/?p=14038 In our review of commonly used platforms for publishing and managing websites, including WordPress, Webflow, Squarespace, Weebly, and Wix, we’ve found that Webflow offers the best balance of ease of development, accessibility, and control. Although building a site with Webflow takes care of many content, design, and code accessibility considerations, making a more accessible Webflow […]

The post Introducing our guide to making your Webflow site more accessible appeared first on Say Yeah!.

]]> In our review of commonly used platforms for publishing and managing websites, including WordPress, Webflow, Squarespace, Weebly, and Wix, we’ve found that Webflow offers the best balance of ease of development, accessibility, and control.

Although building a site with Webflow takes care of many content, design, and code accessibility considerations, making a more accessible Webflow website requires a few extra steps.

In our guide, we’ll walk you through the different areas you’ll need to consider when making your Webflow site to ensure accessibility for all. These factors include everything from form fields, to accessible navigation, to the structure of your site’s pages.

It’s important to consider accessibility when launching or updating your website. You could be inadvertently preventing members of your audience from using your site effectively.

And the best time to plan for accessibility in your work is right now, so let’s get started!

Explore the guide

Webflow accessibility can seem daunting, but our guide will help you with the processes and step-by-step requirements to deliver a more accessible site.

Whether you’re in the process of launching a new site or are looking to improve an existing one, the Webflow accessibility guide will help make your site, and your content, available to everyone.

Looking for additional support making your Webflow site more accessible?

We’ve done the hard work of understanding these requirements, how to execute, and bring these practices to your team for ongoing improvements and future projects. Whether you’re launching something new or looking to improve an existing site, we can help.

Get in touch

The post Introducing our guide to making your Webflow site more accessible appeared first on Say Yeah!.

]]> 2021 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization https://sayyeah.com/digital-insights/2021-website-builder-accessibility-comparison/ Sun, 15 Nov 2020 14:18:39 +0000 https://sayyeah.com/?p=14401 The first starting point for many people and organizations when building a website is drag-and-drop site builders like Wix and Squarespace. Although these tools often provide templates that take care of the visual design and functional aspects of building a site, they often don’t consider other business requirements, like accessibility. If you’re looking to launch […]

The post 2021 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.

]]> The first starting point for many people and organizations when building a website is drag-and-drop site builders like Wix and Squarespace. Although these tools often provide templates that take care of the visual design and functional aspects of building a site, they often don’t consider other business requirements, like accessibility.

If you’re looking to launch an improved website in 2021, now’s the time to investigate platform options and find the right website builder for your organization, without sacrificing accessibility.

2022 Update

Check out the latest trends and our new recommendations with our 2022 website builder accessibility comparison.

Our comparison

We looked at each of the major website builders and compared them across a range of accessibility factors needed for meeting standards like WCAG 2.X, and ranked them against each other to see which ones made it the easiest to build an accessible website effectively.

Accessibility scoring legend

  • Overall score 1 out of 5
    does not support most accessibility considerations
  • Overall score 2 out of 5
    supports some accessibility considerations
  • Overall score 3 out of 5
    accessibility considerations can be met, but it will take work
  • Overall score 4 out of 5
    almost out-of-the-box accessibility

Squarespace accessibility

Squarespace accessibility has an overall score of 3 out of 5
Squarespace requires a high degree of custom code

  • Headings Yes

  • Landmarks Partial

  • Skip navigation Partial

  • Tab index Yes

  • Visible focus ring Partial

  • ARIA labels Partial

  • Alt tags Yes

 

Wix accessibility

Wix accessibility has an overall score of 3 out of 5
Wix requires custom code and some setting changes

  • Headings Yes

  • Landmarks Yes

  • Skip navigation No

  • Tab index Yes

  • Visible focus ring Yes

  • ARIA labels Partial

  • Alt tags Yes

 

EditorX accessibility

EditorX accessibility has an overall score of 2 out of 5
Accessibility is not fully possible within the current EditorX system

  • Headings Yes

  • Landmarks Partial

  • Skip navigation No

  • Tab index Partial

  • Visible focus ring Yes

  • ARIA labels No

  • Alt tags Yes

 

Weebly accessibility

Weebly accessibility has an overall score of 2 out of 5
Weebly requires a high degree of custom code

  • Headings Partial

  • Landmarks No

  • Skip navigation Custom

  • Tab index Yes

  • Visible focus ring Yes

  • ARIA labels Custom

  • Alt tags Yes

 

Webflow accessibility

Webflow accessibility has an overall score of 4 out of 5
Implementation with Webflow is straightforward, but requires some code knowledge

  • Headings Yes

  • Landmarks Yes

  • Skip navigation Custom

  • Tab index Yes

  • Visible focus ring Yes

  • ARIA labels Yes

  • Alt tags Yes

 

WordPress accessibility

WordPress accessibility has an overall score of 3 out of 5
Wordpress requires extensive custom code, but all of the required items for accessibility are possible.

  • Headings Custom

  • Landmarks Custom

  • Skip navigation Custom

  • Tab index Custom

  • Visible focus ring Custom

  • ARIA labels Custom

  • Alt tags Custom

 

Headless CMS accessibility

Headless CMS accessibility has an overall score of 3.5 out of 5
Headless CMSs require extensive custom code, but all of the required items for accessibility are possible and the system is easier to use for advanced accessibility items.

  • Headings Custom

  • Landmarks Custom

  • Skip navigation Custom

  • Tab index Custom

  • Visible focus ring Custom

  • ARIA labels Custom

  • Alt tags Custom

The winners

Webflow for designers

Webflow is the best we tested out of all no-code website builders, with ease of use, built-in accessibility features, and customizability all at your disposal when creating a more accessible website.

Headless CMS for developers

A headless CMS is an excellent choice in cases where you are working with a capable developer. A headless CMS offers advanced customizability for any and all accessibility needs, and is a blank slate full of possibilities for usability, design, and accessibility across your website.

An as-is template isn’t necessarily enough to be accessible

Although several of these platforms have taken the time to enhance their platforms’ accessibility, it’s typically more complicated to ensure your site is compliant when using one of these platforms.

For example, to make content on your site accessible, you’ll want to make sure that you have features like a skip navigation link, landmarks on the page for screen readers, and appropriate ARIA labels when needed. Many of these features are not available on these platforms, and if they are, it may take some manual work to set them up.

The more flexible the platform, the more likely you’ll be able to add these features, but even platforms like Webflow require manual coding to add features like a skip navigation link.

Looking for help making your Webflow website accessible?

Check out our guide to making your Webflow site accessible.

Explore the guide

How to choose between WordPress, Webflow, and a Headless CMS

WordPress is a more open-ended and complex option for building a custom site. Because of its maturity as a platform, and the flexibility that comes from not using an existing template, it can be a good solution for making sites that require custom features that wouldn’t be available in a typical template builder.

Webflow is great for many simpler use cases that may have previously been powered by WordPress. Webflow solves several performance issues and other optimization issues, in addition to accessibility, that otherwise require a lot of manual testing and development work when using WordPress. Webflow is prebuilt with accessibility in mind in its components and features, meaning less work is required to make it accessible, even when starting completely from scratch.

For websites being built by a capable development team, a headless CMS system is likely the most ideal combination of flexibility, performance, content management, and development efficiency. Typically offering infinite flexibility and component workflows, a headless CMS can win out over Webflow when you need more control over advanced accessibility attributes or wish to more easily provide a rich content management system for everyday content managers.

Making a website accessible relies on choosing a platform that allows you to make the accessibility adjustments necessary and take an accessibility-centred approach to building your website from the start. Considering who will be helping you build out your website, who will be managing your content on an ongoing basis, and who will be responsible for ongoing maintenance and hosting are all key considerations of selecting the right platform for your needs.

Our accessibility-focused approach

By focusing on making your site accessible across content, design, and development requirements right from the start, and providing resources to your team to continue these efforts longer term, our approach helps save your team from costly rework and retrofitting your site later while guiding you towards maintaining your accessibility objectives with every content update.

When a site is built with this approach, you can focus on maintaining your site’s accessibility and continually improving other areas of your website without needing to spend time fixing larger accessibility issues across your whole website.

Looking for additional support on making a more usable, accessible, and inclusive website?

Get started with our Essential Website Audit to uncover issues with your current website, or get in touch to learn more about our accessible website design services.

Get in touch

The post 2021 Website Builder Accessibility Review (WBAR): choosing the best platform for your organization appeared first on Say Yeah!.

]]> FITC Web Unleashed: October 5-7, 2020 https://sayyeah.com/digital-insights/fitc-web-unleashed-october-2020/ Tue, 22 Sep 2020 10:24:27 +0000 https://sayyeah.com/?p=13681 The FITC events lineup continues this fall, with Web Unleashed taking place on October 5-7, 2020. This three-day event will feature talks across all areas of front-end development, from the latest changes to CSS, to more accessible front-end development practices, including new methodologies for building delightful web experiences. This comprehensive schedule of talks has something […]

The post FITC Web Unleashed: October 5-7, 2020 appeared first on Say Yeah!.

]]> FITC Web Unleashed event promo graphic with dates

The FITC events lineup continues this fall, with Web Unleashed taking place on October 5-7, 2020.

This three-day event will feature talks across all areas of front-end development, from the latest changes to CSS, to more accessible front-end development practices, including new methodologies for building delightful web experiences.

This comprehensive schedule of talks has something for everyone, whether you’re a front-end expert, a designer, or a product owner.

Check out the full conference schedule

Talks we’re looking forward to:

FITC Diversity Scholarship

FITC, in partnership with RBC, is also running the Diversity scholarship program again this year, awarding up to 100 tickets. These tickets are set aside for anyone who are part of underrepresented groups in tech.

Apply now before September 27th

Grab your ticket or tickets for your whole team!

Don’t miss out on one of the best front-end development learning opportunities of the year. Save $50 off the price of your ticket or purchase tickets as part of a group using bulk ticket purchasing tickets for groups of 4 or more.

Get your tickets to FITC Web Unleashed with code SAYYEAH

Get tickets

The post FITC Web Unleashed: October 5-7, 2020 appeared first on Say Yeah!.

]]> I Need Sugar now on tumblr. https://sayyeah.com/digital-insights/i-need-sugar-now-on-tumblr/ Wed, 04 Aug 2010 14:00:00 +0000 http://sayyeah.com/sayYeah/sayYeahNewSite/wordpress/i-need-sugar-now-on-tumblr/ Last week we announced that we had moved Say Yeah’s website to tumblr. Today, we’re announcing I Need Sugar now has a refreshed site, also running on tumblr. The original 2009 I Need Sugar website was designed before there was a logo, so the move to tumblr was more than just a behind the scenes […]

The post I Need Sugar now on tumblr. appeared first on Say Yeah!.

]]> I Need Sugar on Tumblr

Last week we announced that we had moved Say Yeah’s website to tumblr. Today, we’re announcing I Need Sugar now has a refreshed site, also running on tumblr.

The original 2009 I Need Sugar website was designed before there was a logo, so the move to tumblr was more than just a behind the scenes switch. With a design refresh called for, the site now also supports flickr, facebook and Twitter widgets.

See it in action at ineedsugar.com

The post I Need Sugar now on tumblr. appeared first on Say Yeah!.

]]> Our Value Pricing deck from last week’s NXNE Interactive panel. https://sayyeah.com/digital-insights/our-value-pricing-deck-from-last-weeks-nxne/ Wed, 23 Jun 2010 15:00:00 +0000 http://sayyeah.com/sayYeah/sayYeahNewSite/wordpress/our-value-pricing-deck-from-last-weeks-nxne/ Last week we had the pleasure of joining Sam Ladner, Jon Lax and our moderator Simon Conlin on a NXNE panel discussion about value pricing. Abolish The Hourly was a well attended session and, from on stage, appeared to be capture the audience. I suppose any time you challenge the status quo, people take notice. […]

The post Our Value Pricing deck from last week’s NXNE Interactive panel. appeared first on Say Yeah!.

]]> Last week we had the pleasure of joining Sam Ladner, Jon Lax and our moderator Simon Conlin on a NXNE panel discussion about value pricing. Abolish The Hourly was a well attended session and, from on stage, appeared to be capture the audience. I suppose any time you challenge the status quo, people take notice. But this topic is really nothing new, though it may be somewhat foreign to the creative services industry.

To help with this introduction, Sam laid some groundwork around the history of the hourly and time tracking. I followed with the presentation you see below as an intro for freelancers and small businesses. Jon riffed on these ideas and brought some further insight based around his agency experience and working with US customers.

View the slide deck on SlideShare.

We’re hoping to continue the conversation online and at future conferences. And I believe one area where we’ll need to expand the discussion is on the value this model brings to the customer. Jon touched on this with some examples, particularly CP&B’s relationship with Burger King. The key being how much more dedicated any service provider will be when their client’s bottom line affects them. Instead of counting hours, you’re focused on delivering results.

As the discussion grows, we hope you’ll join us in sharing your insight, thoughts and feedback. Particularly the dude at the end of the session who said there are no issues with the hourly model. Being that we couldn’t agree less, I’m ever more interested in hearing his point of view.

As always, you can view more of our decks on SlideShare and please feel free to add your comments below or join the discussion on the Teehan Lax blog.

Talk to you soon.
Lee

The post Our Value Pricing deck from last week’s NXNE Interactive panel. appeared first on Say Yeah!.

]]> Towards better readability on the Web. https://sayyeah.com/digital-insights/towards-better-readability-on-the-web/ Thu, 10 Jun 2010 15:00:00 +0000 http://sayyeah.com/sayYeah/sayYeahNewSite/wordpress/towards-better-readability-on-the-web/ Update, October 10, 2012: Safari and Safari Reader on the desktop and mobile have addressed all the issues noted below. And with that, we’ve updated sayyeah.com so all the articles sport justification, with hyphens if you’re viewing in Safari or on Firefox. Very cool. Proponents of Web font options have been given a boost with […]

The post Towards better readability on the Web. appeared first on Say Yeah!.

]]> Update, October 10, 2012: Safari and Safari Reader on the desktop and mobile have addressed all the issues noted below. And with that, we’ve updated sayyeah.com so all the articles sport justification, with hyphens if you’re viewing in Safari or on Firefox. Very cool.

Proponents of Web font options have been given a boost with @font-face, Typekit and now Google’s support with the Google Font Directory (of course, in Google ubiquitous Beta). However, the greatest barrier to Web legibility is not typefaces but rather screen size.

With the adoption of standards-based Web browsers across Apple, Android, Symbian, Windows Mobile 7 and other portable devices, you now have to design sites for screen sizes ranging from 3″ (or smaller) to 30″ and everywhere in between. On the larger size, the standard generally remains suitable for a maximum 1024 pixel wide screen, but as we head down to the iPad sized 1024 pixel (landscape) and 768 pixel (portrait) on just a 10″ screen, those 23″ 1024 pixel websites now become very small. Even moreso with all the clutter of ad space, menu columns, and more. To this end, we now see Apple’s introduction of Reader in Safari 5, design to get rid of “annoying ads and other visual distractions from online articles”. Presumably this will filter down to their mobile devices as well, which is where the real benefit will be found. However, there’s one major issue with the Reader implementation.

Highlighted even on Apple’s promotion page for Reader in their side by side comparison, sure Spin’s ads have been removed allowing you to focus on the article, but they’ve move from a left justified rag to full justified text, sans hyphens. What this does, as shown in the image below, is create absolutely brutal spacing and, in their own example, even create single word left justified lines. This isn’t easier to read, it’s a disaster.

reader layout examples

Here’s the same article zoomed in so you can get a better feel for this:

Example of content on a newspaper

But, hey, this is encouraging. The idea of focusing on legibility over style and glitz is an important step in allowing for increased Web based consumption no matter the device (desktop or mobile). So what’s next? Well, optimizing type for multiple screen sizes and hyphenation.

Which points to Blain Cook’s excellent “Beautiful Lines” article. From the article through the comments there’s a great discussion on maximizing type for variable screen sizes rather than fixed width designs and supporting hyphenation, which is currently a flawed implementation at best. So, where’s that encouragement? Well, if Apple insists on full justification for Reader, it won’t be long before we see a solid implementation of hyphenation in Safari which ideally will filter across to other Browser’s. More from W3C on hyphenation.

Here’s an excerpt from Beautiful Lines as shown in Safari:

beautiful lines example

To give you a feel of how broken Safari’s implementation of hyphenation is, here’s what happens when I copy and paste a small excerpt from the Beautiful Lines article:

jus ti fi ca tion and hy phen ation and drop caps and in dents

As you can see, when I paste, the hyphen that was originally in the sentence is removed but multiple spaces have been inserted.

In Firefox there’s only one hyphen in the entire article, on a word that is longer than the page width, which of course makes for similar awkward spacing to the Spin article above.

Here’s the same excerpt from above, as rendered in Firefox:

beautiful lines example

Of course, given this lack of hyphenation in Firefox, the same citation copy and pastes as expected:

justification and hyphenation and drop caps and indents

So here’s to Apple getting the discussion moving on this, which I expect will pick up dramatically if we see Reader filter down to those 100 million+ mobile devices they’ve sold and where isolating the content on their mini-screens will become a real priority.

If you’ve got any other resources or discussions in the area of hyphenation on the Web and designing for multi-screen size layouts, share away!

The post Towards better readability on the Web. appeared first on Say Yeah!.

]]>