Sara Soueidan

Sara Soueidan Portfolio Site Across Four Viewports — Sara Soueidan across four different breakpoints

Today we’re taking a look at one of my favourite ever front end developers in Sara Souiden, and her recently relaunched personal website.

As with all my reviews, this is done for educational purposes as an attempt to peel back the layers of how folks have built their sites. Everyone you see on here is much better at this than I am, so if I call something out it’s because I think it might have been done differently but it’s not necessarily the best approach.

Lets start with some things that I’d fix up.

SSL Certificate

I’m sure that this site is a prime candidate to take advantage of service workers and HTTP2, however when I visited the site I was surprised to see that it was being served over HTTPS. Well that’s not entirely true, it is being served over HTTPS AS WELL but there is no redirect to the SSL version of the site. This can be done a number of ways, and most providers will offer this as a default option with the hosting interface. The most common way for a front end would be to create a .htaccess file and include the following

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.example.com/$1 [R,L]

Viewport

There appears to be two declarations of the Viewport Meta tag…. I can only assume that the browser looks at the HTML in a cascading way so that the second version is picked up… but the user-scalable is set to both yes and 1 which is the same thing. Is this to fix a browser quirk I’m not aware of?

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, user-scalable=1" />

Flexbox and Grid

Flexbox is used in the layout and display of the Availability Calendar (which is awesome by the way), and the Events listing as well which makes sense because they are most likely to be the most flexible content.

There’s no use of the CSS Grid on the site at the moment but then it’s only supported on the latest browsers… and this site is a work in progress so I have no doubt it will be coming in the next couple of months as Sara experiments more.

Javascript

There is a little bit of mustard cutting on the site as well. Testing to see if something “Cuts the Mustard” involves running a test with javascript and, if the tests pass, adding a flag to allow you to provide a better experience… progressively enhanced if you will.

On this site Sara uses


if('querySelector' in document
             && 'localStorage' in window
             && 'addEventListener' in window) {

            var root = document.getElementsByTagName( 'html' )[0];
            root.classList.add('enhanced');
        }

This checks to see if localStorage and addEventListener are supported in the browser, and if so the class of ‘enhanced’ is added to the HTML tag. I should also point out that Sara isn’t likely to be doing anything with localStorage and addEventListener, instead these are features that are present in the more recent browsers and indicate the support of things that we wouldn’t otherwise be able to test for.

As a result, there is some additional CSS for a more enhanced Menu as a result.

There is very little javascript on the site… in fact the only stuff I can see is the JS that allows for the more enhanced version of the Menu system as described above, plus a little plugin that I only became aware of when looking at Sara’s site.

She uses Element.classList which is a read-only property which returns a live DOMTokenList collection of the class attributes of the element.

Sound confusing?

I need to clarify this with Sara but to me it looks like a nice way to be able to target elements with vanilla javascript and easily add and remove classes (for a toggle menu for example). I’m sure a LOT of us would reach for jQuery for a task like this, but this seems like a much more compact and performant way to approach the problem.

Typography

The typography on the site is wonderful as well, a lovely typeface being used with Quicksand as the body font and Playfair Display as the heading. Sara has also used a responsive approach (of course) to the font-size by basing a lot of it on calc. For example here’s some settings

body {
  font-size: calc(14px + .3vw);}

h1, .h1 {
  font-size: calc(1.25em + 2vw);}

Responsive Images

The case studies are wonderful too and really show off how amazing Sara is at her craft. I noticed early on that all of the smashing magazine case study images were PNG which raised alarm bells when it comes to the overall size of the images. Traditionally, unless an image is a solid colour then it’s better off as a JPG rather than a PNG, however when I tested the same images as JPG’s I found that the PNG versions that Sara had produced were smaller — kudos to Sara on choosing the best format for the job!

Updates?

The two bits I would look to update on these pages would be to

Include srset responsive images to provide the browser with a range of different sizes to choose from
Include something like Lazy Sizes which would mean not all of the images would be downloaded unless the user showed intent to scroll down to the end of the page. The Smashing Example is around the 5.5MB mark which is a lot if you don’t scroll past the heading.

Sara Soueidan Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, user-scalable=1" />

Media Queries

@media all and (max-width: 768px) { }
@media all and (max-width: 400px) { }
@media all and (max-width: 1150px) { }
@media all and (max-width: 640px) { }
@media all and (max-width: 1024px) { }
@supports (background-blend-mode: multiply) { }
@media all and (min-width: 768px) { }
@media all and (min-width: 1024px) { }
@media all and (max-width: 1300px) { }
@media screen and (max-width: 34.375em) {  /*550*/ }