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 will explain the draft spec, with examples that you can try out in Firefox Nightly. While this is a feature you won’t be able to use in production right now, your feedback would be valuable to help make sure it serves the requirements that you have for this kind of layout. So let’s take a look. 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…

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? In this article, Rachel Andrew will explain some of the finer points of how Flexbox works out how big the flex items are. It can seem a little academic, however, taking some time to understand the way this works can save you huge amounts of time when using Flexbox in your layouts. If you and your design don’t agree with what Flexbox thinks is best then you can take control back by setting your own flex-basis. Read more…

September 4, 2018 — This week, CSS Shapes ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes. In this article, Rachel Andrew will take a closer 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 — For the entire history of CSS Layout, being able to properly align things on both axes seemed like it might truly be the hardest problem in web design. The alignment properties that you might think of as the flexbox alignment properties are now fully defined in the Box Alignment Specification. If you have ever been confused about when to align and when to justify, this article will make things clearer! Today, Rachel Andrew will 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, Rachel Andrew will take a detailed look at what actually happens when you add display: flex to your stylesheet. She will take the initial values of Flexbox, in order to explain what actually happens when you say display: flex. It’s a surprising amount once you begin to unpack it, and contained within these few properties are many of the key features of flex layouts. 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, Rachel Andrew decided to collect them all into one article so you can add it to your useful bookmarks. Thanks to everyone who took the time to reply and share their best-appreciated tools and techniques — we sincerely appreciate it! 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. Rachel Andrew is going to describe a method of working that she’s adopted over the past two years that helps her to manage CSS across her projects. 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 is going to explain what is currently part of the Working and Editor’s Draft of that spec. Note that everything here is subject to change, and none of it currently works in browsers. Take this as a peek into the process! Read more…

May 25, 2018 — Today we have a real choice in terms of the layout methods we use in CSS to develop our sites, which means we often need to make a choice as to which approach to take. 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. In this article, Rachel Andrew will run through the various layout methods that you have available to you by explaining the basics of how they are used and what they are used for. 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. To help you use the things announced, Rachel will be linking to the videos of those sessions plus any supporting material she’s been able to find. Read more…

May 9, 2018 — If you haven’t contributed to an open source project before, MDN is a brilliant place to start. 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 very straightforward, and an excellent way to give back to the community if you have ever found these docs useful. And the best part is that anyone can contribute and help to improve it. In this article, Rachel Andrew explains how. Read more…

May 1, 2018 — Printing pages directly from the browser is an experience that can lead to frustration with enormous images being printed out. We have covered print stylesheets in the past here on Smashing Magazine, but in this article, Rachel Andrew takes a look at the state of printing from the browser today. She will show you how you should include print styles in your web pages, and look at the specifications that really come into their own once printing. Read more…

April 24, 2018 — Creating a team who can work well together across different disciplines can be hard. Given the wide range of skills held by the line-up at the upcoming SmashingConf Toronto, Rachel Andrew solicits some suggestions from the speakers. She’s wrapped those up with her own experience of 20 years working alongside designers and other developers. 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. In this article, Rachel Andrew is going to try and cover some of the things that either could be described as best practices, and some things that you probably don’t need to worry about. She will ran a survey and share the results as well as her personal thoughts. 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. In this article, Rachel Andrew  is going to explain how CSS is changing to support writing modes, and in doing so, she’ll clear up some of the things that might confuse you about Flexbox and Grid. 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. In this article, Rachel Andrew is going to take a look at how to use CSS Generated Content to achieve styling of empty cells without adding redundant empty elements and show some use cases where this technique makes sense. 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. To help encourage people to write and submit to CFPs, Global Diversity CFP Day aims to help underrepresented people submit proposals to speak at conferences. 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 — Do You Need A Media Query? The first rule of using media queries is to ask yourself if you really need to use a Media Query at all. In this article, Rachel Andrew 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 — Sometimes, you might wonder why something ends up the size that it is. Or, you might want to do something different to the default behavior. To do so, you need to know something of how the underlying algorithms figure out how to distribute space. 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, Rachel Andrew will try to explain exactly how big that box is, and how it got to be that size! Read more…

December 27, 2017 — Productivity tips always make for a popular topic for an article, as everyone is looking for the silver bullet, that one weird trick that turns you into a productivity machine. So, we asked the community on Twitter and Facebook to share their best productivity tips, and in this article Racheal Andrew is going to round these up alongside some things she’s learned that work well for her. Let us know your own advice in the comments, or tell us the popular tip that would never work for you! Read more…

December 11, 2017 — This article is about the Block Formatting Context (BFC). Today, Rachel Andrew will 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. She’ll explain what a BFC is through examples which are likely to be familiar to you, and then show you a new value of display, that really only makes sense once you understand what a BFC is and why you might need one. Read more…

November 16, 2017 — How do you come up with your list of supported browsers? Why would you force a bunch of JavaScript onto those devices? The question of browser support has to be addressed when using any new CSS. In this article, Rachel Andrew will explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it? Read more…

October 17, 2017 — There are methods that enable the naming of lines and even grid areas. Using these methods enables easier placement of items by name rather than number, but also brings additional possibilities when creating systems for layout. In this article, Rachel Andrew will take an in-depth look at the various ways to name lines and areas in CSS Grid Layout, and some of the interesting possibilities this creates. Try not to get hung up on what is “right” or “wrong”. If you find a method confusing, or it doesn’t seem to work in your context, simply don’t use it. The beauty of this is that we can choose the ways that make the most sense for the projects we are working on. Read more…

September 28, 2017 — Prior to CSS Grid Layout landing in browsers, many people saw flexbox as the answer to all of our design-related problems. However, flexbox doesn’t provide a grid system any more than floats do, although it does make creating one simpler. CSS Grid is such a different way of approaching layout that there are a number of common questions Rachel Andrew is asked as people start to use the specification. In this article, she will answer some of those, and will be one in a series of articles on Smashing Magazine about layouts. Read more…

November 8, 2016 — In this article Rachel Andrew 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. 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. Read more…

February 16, 2016 — In this article, Rachel Andrew will look at the basics of HTTP2 as they apply to web designers and developers. She’ll explain some of the key features of the new protocol, look at browser and server compatibility, and detail the things you might need to think about as we see more adoption of HTTP2. You will get an overview of what to consider changing in your workflow in the short and long term. Rachel will also include plenty of resources if you want to dig further into the issues raised. Her aim is to give you enough of the background to be able to make good decisions as you plan your move to HTTP2. Read more…

September 17, 2015 — For those of us who use Varnish and also want to move to HTTPS, there is a problem: Varnish doesn’t support HTTPS. If you make the move to SSL, configuring Apache to serve your website securely, then you lose the speed advantage of Varnish. There is a relatively straightforward way to deal with this issue, and that is to stick something in between incoming SSL requests and Varnish, a layer that handles the secure connection and SSL certificates and then passes the request back to Varnish. In this article, Rachel Andrew will show you how to move your website to HTTPS, taking advantage of Varnish Cache. Read more…

July 9, 2015 — Today, Rachel Andrew will be taking a look at how to build a simple yet robust workflow for developing sites that require PHP and MySQL. She’lI also demonstrate a process for using a hosted service to deploy files in a robust way to your live server. By the end of this article, you should be in a position to develop one or many sites locally, using a setup similar to how the site will run on the live server. You will deploy in the confidence that what ends up on the live server is exactly what should be on that server — no more, no less. Once you understand this type of workflow, you can explore how to streamline it further, making time to do more interesting things than fight with servers and hosting! Read more…

February 16, 2015 — ESI works in a similar way to other methods of including fragments in your pages, such as Server Side Includes (SSI) or PHP include statements, but it has been designed for reverse proxies like Varnish that sit in front of a web server and cache content. In this article Rachel Andrew will 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 — Print style sheets is the main thing that comes to mind if you mention printing with CSS. But CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all. In this article, Rachel Andrew will take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. She’ll explain how the selectors, properties and values that they introduce work. She’ll finish up with a working example that you can use as a starting point for your own experiments. Read more…

December 4, 2013 — Imagine how your excitement after posting a blog and seeing so many visitors talking about it, turns to dismay as they start to tweet that your website is down — a database connection error is shown. Many of these mobile users access the Web via slow data connections and crowded public Wi-Fi. So, anything you can do to ensure that your website loads quickly will benefit those users. In this article, Rachel Andrew will show you Varnish Web application accelerator, a free and simple thing that makes a world of difference when a lot of people land on your website all at once. Read more…

November 8, 2013 — If you are launching a product, then your aim should be to make your product something that people would be happy to buy. You can then begin to develop additional features based on what customers actually want and need.
In this article, Rachel Andrew explains, based on her own experience, how to start with a new product, develop and support it over time. She’ll describe how it is possible to launch with a really small product and grow from those small beginnings by listening to your customers. 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 — In this post, Rachel Andrew explains ways to minimize support requests and the time spent in dealing with them. Don’t underestimate the importance of support! 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…