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! Read more…

July 13, 2020 — Rachel Andrew takes a look at a new effort to crowdfund the costs of implementing browser features. Read more…

July 7, 2020 — In this article, 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 and 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. Read more…

April 30, 2020 — 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. 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. 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, we take a look at how to use grid-template-areas to place items. Read more…

February 10, 2020 — SmashingConf is coming to Austin, and in this post, we bring 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. Read more…

February 3, 2020 — SmashingConf is coming to Austin, and in this post, we bring you an interview with one of our speakers, Zach Leatherman, who will be talking about type and font performance. 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. 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. 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. 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. Read more…

November 14, 2019 — In these two videos (a webinar recorded for our Smashing Members and a presentation from SmashingConf Freiburg), you can 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. This post rounds up the event with all the video, photos and memories of the fun we had together in New York. Read more…

November 1, 2019 — 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. Read more…

October 11, 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. Read more…

October 1, 2019 — We had a lovely time at SmashingConf Freiburg. This post wraps up the event and also shares the video of all of the Freiburg presentations. 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! In this article, I 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. 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 explains how to pitch to publications, and how to have the best chance of an accepted proposal. 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. Read more…

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

August 6, 2019 — 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, there is more to a margin than you might think. 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. Read more…

July 9, 2019 — There is more to styling lists in CSS than you might think. In this article, Rachel 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. Read more…

May 24, 2019 — 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 — The web is wonderfully diverse and unpredictable because of wonderfully diverse people shaping it. In this new series of short interviews, we talk to interesting people doing interesting work in our industry and sharing what they’ve learned. Read more…

May 1, 2019 — 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! In this article, Rachel Andrew rounds up all of the videos, photos, tweets and resources that were shared on- and offstage. 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. Read more…

March 28, 2019 — There are a few ways to align elements in CSS. Let’s make sense of inline and box alignment, flex and grid alignment and common issues and problems to keep in mind. Read more…

March 11, 2019 — What problems will the new aspect ratio unit solve? A look at the design of a new CSS feature. Read more…

February 27, 2019 — What is fragmentation, why might you want to use it, and what is the current state of browser support? Rachel Andrew has the answers. 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. In this article, Rachel Andrew explains how CSS is evolving to make it easier to deal with them. Read more…

January 22, 2019 — Today, we’re launching 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. 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. This article aims to guide you along your path of learning CSS. Read more…

December 31, 2018 — 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 — 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. Find out how. 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. 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. 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. 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? 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…

September 17, 2018 — In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be? Read more…

September 4, 2018 — In this article, we take a look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier. Read more…

August 13, 2018 — In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works. Read more…

August 2, 2018 — In this article, the beginning of a series on Flexbox, we will take a detailed look at what actually happens when you add display: flex to your stylesheet. Read more…

July 23, 2018 — We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, we’ve decided to collect them all into one article so you can add it to your useful bookmarks. Read more…

July 9, 2018 — CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid. Read more…

July 3, 2018 — CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew explains the new features. Read more…

May 25, 2018 — Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today. Read more…

May 11, 2018 — Smashing Magazine’s editor-in-chief, Rachel Andrew, attended the Google I/O 2018 event in Mountain View. We made sure you don’t miss out: Here’s a roundup of the announcements and launches that were presented at the event. Read more…

May 9, 2018 — MDN has been documenting the web platform for over 12 years and is a go-to resource for many. Its strength is the fact that it is a community resource, and anyone can contribute and help to improve it. Rachel Andrew explains how. Read more…

May 1, 2018 — We have covered print stylesheets in the past here on Smashing Magazine. In this article, Rachel Andrew takes a look at the state of printing from the browser today. Read more…

April 24, 2018 — Creating a team who can work well together across different disciplines can be hard. Rachel Andrew solicits some suggestions from the speakers at our upcoming SmashingConf in Toronto. Read more…

April 16, 2018 — In some ways, we are all still so new to CSS Grid Layout. A lot of folks keep asking about best practices that are available out there. Rachel Andrew ran a survey and shares the results as well as her thoughts in this article. Read more…

March 29, 2018 — CSS Logical Properties and Values aren’t quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes. Read more…

February 22, 2018 — Ever wondered how achieve styling of empty grid cells without adding redundant empty elements? Well, CSS Generated Content can help you do just that. Read more…

February 19, 2018 — The recent Global Diversity CFP Day aimed to help more people submit their ideas to conferences and get into public speaking. In this article, Rachel Andrew rounds up some of the best takeaways along with other useful resources for new speakers. Read more…

February 5, 2018 — This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future. Read more…

January 16, 2018 — When starting to use Flexbox and Grid, it can be frustrating to find that we sometimes don’t get the layout we expect. Often this is due to the way sizing is calculated in these new layout methods. In this article, I try to explain exactly how big that box is, and how it got to be that size! Read more…

December 27, 2017 — It’s the time of year when we are writing our New Years resolutions or just thinking and dreaming about the year ahead. What plans do you have? What goals have you set? How are you going to find the time to get those things done? Read more…

December 11, 2017 — You might never have heard the phrase ‘Block Formatting Context’, but if you have used CSS for layout you probably already know what it does. In this article I’ll explain the existing ways to create a Block Formatting Context, why it is important in CSS layout, and show you a new method of creating one. Read more…

November 16, 2017 — When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement. Read more…

October 17, 2017 — When first learning how to use Grid Layout, you might begin by addressing positions on the grid by their line number. This requires that you keep track of where various lines are on the grid, and also be aware of the fact the line numbers reverse if your site is displayed for a right-to-left language. Read more…

September 28, 2017 — CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to use the specification. This article aims to answer some of those, and will be one in a series of articles on Smashing Magazine about layouts. Read more…

November 8, 2016 — Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient. This article explains how Flexbox and CSS Grid fit together, and how we can build resilient and flexible layouts today while providing a decent fallback for older browsers. Read more…

February 16, 2016 — A detailed look at the basics of HTTP/2 as they apply to web designers and developers. We’ll look at the key features of the new protocol, browser and server compatibility, and detail the things you might need to think about as we see more adoption of HTTP/2. Read more…

September 17, 2015 — In this article, we’ll walk through how to move your website to HTTPS, taking advantage of Varnish Cache. Read more…

July 9, 2015 — In this article I’ll be taking a look at how to build a simple yet robust workflow for developing sites that require PHP and MySQL. I’ll show you how to use Vagrant to create and run a web server on your own computer, with the version of PHP your live site runs. I also demonstrate a process for using a hosted service to deploy files in a robust way to your live server. Read more…

February 16, 2015 — I’m a firm believer that the best way to optimize for fast-loading mobile sites is to optimize for everyone. We don’t know when someone is on a non-mobile device but tethered to their phone, or just on awful Wi-Fi. In a previous article for Smashing Magazine I explained how you can speed up your websites by serving dynamic pages from a reverse proxy like Varnish. If you are new to Varnish then that article is the place to start as I’ll be diving straight into configuration details here. In this article I’ll explain how you can benefit from using Varnish even when there are parts of your pages that can’t be cached for long periods, using Edge Side Includes. Read more…

January 7, 2015 — If you mention printing with CSS to many people who work on the web, print style sheets are the use that comes to mind. We are all well used to creating a style sheet that is called upon when a web document is printed. These style sheets ensure that the print version is legible and that we don’t cause a user to print out huge images. Read more…

December 4, 2013 — Imagine that you have just written a post on your blog, tweeted about it and watched it get retweeted by some popular Twitter users, sending hundreds of people to your blog at once. Your excitement at seeing so many visitors talk about your post turns to dismay as they start to tweet that your website is down — a database connection error is shown. Read more…

November 8, 2013 — In this article, Rachel explains how to start with a new product, develop and support it over time. Read more…

November 30, 2011 — PHP is widely available with inexpensive hosting plans, which makes it a popular choice for developers who write software for the Web. From big platforms, such as WordPress, down to small scripts, such as ones to display image galleries or to send forms to email, thousands of script and products are out there written in PHP that can be installed and used even if you don’t know much about PHP yourself “A Guide To PHP Error Messages For Designers”). Read more…

October 10, 2011 — Users will always need support. You could have a bulletproof product and the most excellent tutorials and documentation, and someone will find a way to break it or just not read the information staring them in the face. Later in this article, I’ll explain some ways to minimize support requests and the time spent in dealing with them. But you should expect to offer support and build it into the price of your product. Read more…

November 22, 2010 — Designing and indeed front-end development for a website that will have content edited by non-technical users poses some problems over and above those you will encounter when developing a site where you have full control over the output mark-up. However, most clients these days want to be able to manage their own content, so most designers will find that some, if not all, of their designs end up as templates in some kind of CMS. Read more…

July 19, 2010 — This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support - small devices such as the iPhone, and Android devices. Read more…

June 2, 2010 — The world of online sales, whether of products or services, can be daunting at first; the options seem confusing and the information conflicted. Yet as the designer or developer of an online store, you will need to guide your client through the maze of choices in order to get it up and running. I have developed many e-commerce websites during my career as a Web developer. I’ve used and modified off-the-shelf software and have also developed custom solutions — so I know from experience that there are a number of important questions to answer before presenting possible solutions to a client. Getting all the pertinent information up front is vital if such a project is to run smoothly, and it can save you from delays during the process. It can also help you advise the client on whether they need a full custom cart or an open-source or off-the-shelf product This article responds to some questions you should be asking of your client before putting together a proposal for the development of an e-commerce website. I’ll explain the most important things to think about in terms of taking payments and credit card security. It should give you enough information to be able to guide your client and to look up more detailed information about the aspects that apply to your particular situation. Read more…

January 1, 0001 — At Smashing we believe a good website is an accessible website, one which is available to everyone, no matter how they browse the web. This guide highlights our content which can help you create more accessible sites and web applications. Read more…

January 1, 0001 — CSS Layout has been transformed over the past years. We have you covered with all you need to master this new world. If you want to understand the technical details, or learn how to use new CSS creatively, these guides can help. Read more…

January 1, 0001 — The design tool Figma has quickly become the tool of choice for many teams, and is a popular subject for articles here on Smashing Magazine. Here is our round-up of the most popular articles on the site about Figma. Read more…

January 1, 0001 — React, Vue, or perhaps the lightweight Alpine.js? Whether you are an experienced JavaScript developer working with one of these frameworks, or just starting to learn, our authors have created some tutorials for you. Read more…

January 1, 0001 — Ensuring your site loads quickly is important. The subject touches almost every part of web design and development, from your choice of images to the performance of your web server. In this guide we bring together information that can help you build a fast site, and keep it fast. Read more…

January 1, 0001 — User Experience (UX) Design is the process of creating experiences that aren’t just attractive to look at, but that also work well for our users. In this guide we round up some of the articles on Smashing that can help you to create beautiful sites and applications that also help people to get things done. Read more…