Author Rachel Andrew

December 4, 2020 — Meet our new friendly online meet-up, Smashing Meets, with three wonderful speakers, the entire Smashing family and plenty of truly smashing cats. As always, free for Smashing Members. Read more…

November 2, 2020 — There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly. Read more…

September 11, 2020 — This week we celebrate the 14th birthday of Smashing Magazine. We didn’t quite have the year that we planned though! I took a look back at some memories from this year and previous years — with the help of the team and some Smashing friends. Read more…

August 27, 2020 — The SmashingConf team had such fun at their first SmashingConf Live! event last week. In this post, editor-in-chief Rachel Andrew shares highlights and feedback from the online conference. Read more…

July 14, 2020 — We’re moving all of the 2020 conferences online. We hope this means that more of you can join us for these great line-ups! All of our online conference events will take place on the Hopin platform. We roadtested this platform for our Smashing Meets, and we love the way it allows for social chat and side events alongside the main conference. It’s as close as we can get to an in-person experience. Read more…

July 13, 2020 — In this article, Rachel Andrew takes a look at a new effort to crowdfund the costs of implementing browser features. She encourage developers to use, talk about, and raise implementation bugs with browsers to try to get features implemented, however, what if there was a more direct way to do so? What if web developers could get together and fund the development of these features? This article is based on an interview with Brian Kardell, Developer Advocate at Igalia. Read more…

July 7, 2020 — If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead! However, if you like to know what is on the way and read more about the things you can play with in a beta version of a browser, read on! Today, Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now. Read more…

May 29, 2020 — In this post, Rachel Andrew looks back at our successful Smashing Meets, A free event across two days and many timezones, with three speakers each day and plenty of chance for attendees to chat and ask questions of the speakers. Toady, she considers how we will take everything we learned to make our Smashing Live conference even better. Read more…

May 14, 2020 — Smashing Meets is a friendly, inclusive, online meetup for people who work on the web. We focus on front-end and UX, but cover all sorts of topics from performance to accessibility. We organize Smashing Meets together with some amazing communities from around the world. Join us for Smashing Meets — two free online meetups with speakers, activities, and plenty of chances to make new friends. Just like a real meetup, though you’ll need to bring your own pizza. Read more…

April 30, 2020 — As we have now formalized our workshop process, we thought we’d share a little more about how these events run. Unlike in-person workshops where we keep you in a room for an eight hour day, we realized than many of you have a lot of other commitments right now.  Our initial online workshops went so well, we have scheduled many more. Find out how what we learned from those first workshops and what we have coming up over the next two months. Read more…

March 30, 2020 — Announcing a set of checklists to help you create smart interface design patterns. Totally free if you sign up for our friendly newsletter. These checklists are based on the work Vitaly has been doing for many years, exploring and examining examples of desktop and mobile interfaces. Learning what works and what doesn’t in usability tests and user interviews. Read more…

March 23, 2020 — With so many people — including our workshop leaders — working from home, we thought we would bring our Smashing workshops from our home offices to yours. We hope we can help you continue to learn and interact with the speakers and each other, and also help out our workshop leaders who are losing income by being unable to run their workshops in person right now. Read more…

March 12, 2020 — We are sad to have to reschedule SmashingConf SF, however we are working to find ways to be with our community virtually until we can all meet up again. Read more…

March 4, 2020 — Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4. In this article, Rachel Andrew rounds up some of the pros and cons of doing so, and asks for your feedback on the suggestion. Read more…

February 12, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, Rachel Andrew will learn how to use the grid-template-areas property to define placement on the grid and find out how the property really works. If you haven’t used this layout method before, give it a try. We find that it is a lovely way to experiment with layouts and often use it when prototyping a layout — even if for one reason or another we will ultimately use a different method for the production version. Read more…

February 10, 2020 — SmashingConf is coming to Austin, and in this post, Rachel Andrew brings you an interview with one of our speakers, Rémi Parmentier, who will be presenting on HTML email and aiming to solve all of your email creation woes. You can find all of that content, including a full transcript of the webinar in the post “Become An HTML Email Geek With These Videos From Rémi Parmentier. Read more…

February 3, 2020 — SmashingConf is coming to Austin, and in this post, Rachel Andrew brings you an interview with one of our speakers, Zach Leatherman, who will be talking about type and font performance. Zach is no stranger to the Smashing stage, and if you want to find out more about web fonts and loading strategies, you can watch his talk from SmashingConf London 2018. Read more…

January 21, 2020 — SmashingConf is coming to Austin! In this post, Rachel Andrew gives you a rundown of what you can expect and shares a video interview with Miriam Suzanne who will be sharing the stage with the rest of the brilliant SmashingConf Austin speakers! Read more…

January 10, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items. The other methods Rachel will show you in future articles are alternate ways to specify your layout, but are based on the grid created by numbered lines. But for today, here you will find pretty much all you need to know about grid lines! Read more…

January 3, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid. Read more…

December 31, 2019 — The Smashing Team looks back at 2019. It’s been a busy year with new team members, four conferences, two books, a print magazine, and many, many articles. In this annual round-up, Rachel Anderw will share some of her thoughts and those of some of the Smashing team, as we look back on the past year as well as look forward to 2020. Read more…

December 27, 2019 — The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout. In this article, Rachel Andrew is going to introduce a CSS Specification that has just become a W3C Recommendation. The CSS Containment Specification defines a single property, contain, and it can help you to explain to the browser which parts of your layout are independent and will not need recalculating if some other part of the layout changes. Read more…

December 11, 2019 — A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December. Read more…

November 29, 2019 — Rather than do a round-up of the best deals available this Black Friday, we decided to do a round-up of the best independent products and makers. If you have money to spend, why not send some of this to folk creating great stuff in our community. We asked the Smashing community for their suggestions, and so here, Rachel Andrew brings you a list covering pretty much every kind of product you can imagine. We hope you can find something you need in these, and help support these hard-working folks. Read more…

November 14, 2019 — In these two videos (a webinar recorded for our Smashing Members and a presentation from SmashingConf Freiburg), Rachel Andrew invites you to discover all the tips and tricks you need to help you design HTML emails. Follow along as Rémi Parmentier shares what he knows about taming email clients. Read more…

November 12, 2019 — The video from SmashingConf New York is ready to share. If you didn’t manage to get a ticket, this post should give you a feel for what happened. Rachel Andrew rounds up the event with all the video, photos and memories of the fun we had together in New York. We also have the video of the presentations to share with you. Read more…

November 1, 2019 — In a lot of cases we can do these things with CSS —just not on the web. For example, CSS is also used for print formatting via user agents designed for outputting to PDF.  In this article, Rachel Andrew looks at some common layout patterns that we can’t yet do on the web and the CSS Specifications that might let us achieve them in the future. While most of her articles are about things we can do, this one is about things we can’t but that perhaps we might be able to do in the future. Take a look. Read more…

October 11, 2019 — The W3C celebrated its 25^th anniversary on the 1^st of October 2019. In this article, Rachel Andrew explains how the W3C works and shares her “Web Story” to explain why the Web Standards process is so vitally important for everyone to have an open web platform where they can share their stories and build awesome things for the web together. Read more…

October 4, 2019 — By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns. Read more…

October 1, 2019 — We had a lovely time at SmashingConf Freiburg. In this post, Rachel Andrew wrappes up the event, including links to the video of all of the presentations, so you can relive what you enjoyed — or share in something of what you missed. Read more…

September 27, 2019 — It’s official! Next year, we’ll be organizing a SmashingConf in each of these cities: San Francisco, Freiburg, New York and Austin! We’re planning to build on the success and the things we have learned in 2019, so that we can bring you a practical two days of learning — with plenty of fun and surprises along the way! Read more…

September 6, 2019 — Smashing Magazine is thirteen years old! The web has changed a lot since Vitaly posted his first article back in 2006. The team at Smashing has changed too, as have the things that we bring to our community. In this article, Rachel Andrew is going to share the stories of some of our Smashing Team. The people behind the magazine, books, and conferences. Read more…

September 4, 2019 — In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content. Rachel will show you how new layout methods and new values in CSS can help us to deal with overflow and create less fragile designs. She’ll also explain one of the fundamental concepts behind the design of CSS — that of avoiding data loss. Read more…

August 19, 2019 — Writing for a publication such as Smashing Magazine can help to build your reputation as an expert. In this article, Editor in Chief Rachel Andrew is going to go through the process for pitching, heavily based on her own experience as a writer and as Editor in Chief of Smashing. However, She’s also taken a look at the guidelines for other publications in order to help you find the right places to pitch your article ideas. Read more…

August 14, 2019 — A series of interviews between Vitaly Friedman and speakers from the upcoming View Source conference in Amsterdam. Hear from Tejas Kumar, Sharell Bryant, Ali Spittel, Kenji Baheux, Jory Burson, Hui Jing Chen, Henri Helvetica, Elizabeth Sweeney, and Jeremy Keith. Today, Vitaly brings you a conversation with Kenji Baheux, a Product Manager at Google, working on Chrome/Web Platform, about the web in different parts of the world, differences between usage of the web, and what we need to be aware of when expanding to an unfamiliar market in India or Southeast Asia. Read more…

August 8, 2019 — It’s hard to capture the experience of being at a SmashingConf, however, Rachel Andrew brings you the videos from our Toronto event. They are available so that everyone can learn from the insights our speakers shared — many of them coding live on stage. Read more…

August 6, 2019 — The support of multiple writing modes is key to the way that our new layout methods of Flexbox and Grid Layout have been designed. An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important. Read more…

July 15, 2019 — Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, in this article, Rachel Andrew will take a look at some of the things which trip people up with regard to using margins. In particular, you will be looking at how margins interact with each other, and how margin collapsing actually works. As with anything in CSS, share with your team the decisions you make, and comment your code! Read more…

July 11, 2019 — Now that some time has passed since the team returned from SmashingConf Toronto, we’ve had time to think about the event and wrap up some of the things we all learned. Take a look. We asked everyone to read and follow our Code Of Conduct, try to create a range of spaces and activities where people can meet like-minded people, and also encourage everyone to follow “The Pac-Man Rule” when standing in a group. Read more…

July 9, 2019 — You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. There is more to styling lists in CSS than you might think. In this article, Rachel Andrew starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters. Read more…

June 19, 2019 — There is a wide variety of choices when it comes to creating a PDF from a web application. In this article, Rachel Andrew takes a look at the tools that are available and shares her recommendations to help you find the tool that works best for you. She’ll explore ways in which we can generate a PDF directly from a web application on the fly. It isn’t a comprehensive list of tools, but instead Rachel is aiming to demonstrate the different approaches. If you have a favorite tool or any experiences of your own to share, please add them to the comments below. Read more…

May 24, 2019 — CSS Grid Layout is switched on by using display: grid. What this single value property actually means is display: block grid. We get a block level box which is defined as a grid container, with direct children that are grid items and participate in grid layout. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior. Read more…

May 20, 2019 — In this new series of short interviews, we talk to interesting people doing interesting work in our industry. Today, we are pleased to feature Jenny Shen who is a UX Consultant and has worked with numerous startups and brands including Neiman Marcus, Crate&Barrel, eBuddy, IBM, TravelBird and Randstad. She is interviewed by Jason Pamental, who has already spoken at our San Francisco conference. Jason is a strategist, designer, technologist, and author of Responsive Typography from O’Reilly. Read more…

May 1, 2019 — The display specification is a very useful spec to understand as it underpins all of the different layout methods we have. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at the values which control box generation, for those times when you don’t want to generate a box at all. Read more…

April 30, 2019 — We had a wonderful time at the sold-out SmashingConf San Francisco! As always with any Smashing Conference, there were plenty of surprises! We had icecream and cookies, our amazing DJ Tobi Lessnow kept everyone well entertained between talks, and Vitaly opened the conference with just the right amount of balloons! In this article, Rachel Andrew rounds up all of the videos, photos, tweets and resources that were shared on- and offstage. Coming up next: SmashingConf Toronto. Read more…

April 8, 2019 — We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series. Rachel is going to take a look at the way that the values of display are defined in the Level 3 specification. This is a change to how we defined display in earlier versions of CSS. While it may seem unusual at first, we think these changes really help to explain what is going on when we change the value of display on an element. Read more…

March 28, 2019 — There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why. She will take a look at the different alignment methods. Instead of providing a comprehensive guide to each, Rachel explain a few of the sticking points people have and point to more complete references for the properties and values. You can go a long way by understanding the fundamental things about how the methods behave, and then need a place to go look up the finer details in terms of how you achieve the precise layout that you want. Read more…

March 11, 2019 — The CSS Working Group have designed an aspect ratio unit for CSS. While this isn’t in browsers yet, in this article Rachel Andrew takes a look at the process of designing a new sizing method and explains how it will work. This is a new resolution, so we have no browser implementations yet, but Rachel thought it would be worth writing up the proposal in case anyone in the wider web community could see a showstopping issue with it. It also gives something of an insight into the work of the CSSWG and how issues like this are discussed, and new features designed. Read more…

February 27, 2019 — Rachel Andrew has been digging around in the CSS Fragmentation spec, and finding browser support is somewhat fragmented. In this article, she explains what fragmentation is, why you might want to use it, and what the state of browser support is. She’ll also show you the current state of browser support and some of the things you can do to get it working as well as it can in your multicol and print projects. Read more…

February 4, 2019 — It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. Dealing with old browsers — or browsers which do not support something that we want to use — is part of the job of a web developer. That said, things are far better now than in the past. In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them. Read more…

January 22, 2019 — People who read Smashing Magazine, come to our conferences, and sign up as members. Given that we don’t ever get to meet or interact with the majority of folks who visit the site, this can make it quite difficult for us to better understand our readers and subscribers. Today, Rachel Andrew brings you a Smashing Survey. We want to find out about you, our readers, so that we can better bring you the tutorials, articles and resources that you need. Read more…

January 11, 2019 — The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article Rachel Andrew explains why it is different to other layout methods, and shows some useful patterns and sites which showcase it well. Rachel will take a look at Multi-column Layout — often referred to as multicol or sometimes “CSS Columns”. You’ll find out which tasks it is suited for, and some of the things to watch out for when making columns. Read more…

January 2, 2019 — You don’t need to commit to memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. In this article, Rachel Andrew aims to guide you along your path of learning CSS and outline resources for further reading on key areas of modern CSS development. Many of those are things right here on Smashing Magazine. Her aim is to cover the breadth of modern CSS with a focus on a few key areas, that will help to unlock the rest of the language for you. Read more…

December 31, 2018 — We’re not just the publishers of an online magazine or conference organizers, we are people who work in the web industry. As Editor in Chief of Smashing Magazine, Rachel Andrew looks after the content that goes out on the online magazine, and also our upcoming print magazine for members. This year, we have published almost every weekday — that represents over 290 articles! Today, the Smashing Team looks back at 2018. Conferences, articles, books and the Smashing Membership — there has been a lot going on. Read more…

December 12, 2018 — The aim of Feature Policy is for us, as web developers, to be able to state our usage of a web platform feature, explicitly to the browser. By doing so, we make an agreement about our use, or non-use of this particular feature. Based on this the browser can act to block certain features, or report back to us that a feature it did not expect to see is being used. In this article, Rachel Andrew will show you how Feature Policy can help protect your site from third parties using APIs that have security and privacy implications, and also from your own team adding outdated APIs or poorly optimized images. Read more…

December 3, 2018 — A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December. Today, Rachel Andrew brings you calendars which are true community efforts, often with the bulk of the work falling to an individual or tiny team, with no budget to pay authors and editors. So, please join us in supporting these efforts, share the articles that you enjoyed reading, and join the discussions respectfully. Whether you celebrate Christmas or not, you can certainly learn a lot of new things over the next 24 days. Read more…

November 9, 2018 — Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, Rachel Andrew discovered a range of reasons people use a third-party framework and the positive and negative things about doing so.  In this article, you will discover that the reasons for using frameworks are varied, and not simply centered around use of the grid system contained in that framework. We hope that by unpacking these reasons, Rachel can help you to make your own decision, in terms of what is best for the sites and applications that you are working on, and also for the team you work with. Read more…

October 26, 2018 — Last week, Rachel Andrew attended the CSS Working Group meeting at W3C TPAC, and rounds up some of the discussions in this post — including those things where you can help make a decision. Today, she will explain a little bit about what happens at TPAC, and show some examples and demos of the things she discussed at TPAC for CSS in particular. Read more…

October 4, 2018 — In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at? Today, Rachel Andrew is going to spend some time thinking about what the use cases for Flexbox really are, given that you now have CSS Grid Layout, giving some suggestions for what you might use when and a way to decide. Read more…

September 27, 2018 — Rachel Andrew writes about her involvement with the CSS Working Group, and why she feels it is important that web developers understand what is being worked on in CSS, and have a way to offer feedback. Read more…