Smashing Magazine

MAY 24, 2021

CSS Container Queries: Use-Cases And Migration Strategies. CSS Container Queries: Use-Cases And Migration Strategies. However, responsive Web Design (RWD) is not limited to a page layout — the individual UI components usually have media queries that can change their style depending on the viewport dimensions. Adrian Bece.

Strategy 126

Strategy Media Code Mobile 126

Smashing Magazine

JUNE 26, 2019

What Web Designers Can Do To Speed Up Mobile Websites. What Web Designers Can Do To Speed Up Mobile Websites. I recently wrote a blog post for a web designer client about page speed and why it matters. As a result, she came back to me concerned with publishing a post on a strategy her agency had yet to adopt successfully.

Website 110

Website Speed Mobile Design 110

Smashing Magazine

NOVEMBER 16, 2021

Meet Touch Design For Mobile Interfaces, A New Smashing Book By Steven Hoober. Meet Touch Design For Mobile Interfaces, A New Smashing Book By Steven Hoober. Touch Design for Mobile Interfaces presents and shares real information on hardware, people, interactions, and environments. Cover design by Espen Brunborg.

Mobile 87

Mobile Design Best Practices Website 87

Smashing Magazine

AUGUST 9, 2021

Smashing Podcast Episode 41 With Eva PenzeyMoog: Designing For Safety. Smashing Podcast Episode 41 With Eva PenzeyMoog: Designing For Safety. In this episode, we’re talking about designing for safety. What does it mean to consider vulnerable users in our designs? Design for Safety from A Book Apart. Drew McLellan.

Design 98

Design Education Network Google 98

Smashing Magazine

JUNE 2, 2021

The design was made by a design and UX agency that also handled the HTML prototype (based on Bootstrap 4). For the launch, we mostly focused on getting the new design out the door, but once the website’s relaunch went live, we started focusing our attention on turning the red and orange scores to greens. Large preview ).

Performance 116

Performance Cache Website Mobile 116

Smashing Magazine

DECEMBER 23, 2020

You can find a comprehensive Beginner’s Guide To Progressive Web Apps on Smashing Magazine that focuses on building the core of PWAs. The most straightforward way is to use Google’s Workbox tool, which includes numerous ready-made plugins for caching strategies. Suppose you want to define a custom caching strategy.

Cache 124

Cache Internet Internet Google 124

Smashing Magazine

JULY 16, 2021

Component-based design, enabled and enforced by modern JavaScript frameworks, does not only provide great developer experiences and project ergonomics when used in a smart way, but it can also offer advantages for accessibility. Insight 2: There Are Established Strategies To Tackle Web App Accessibility Problems. More after jump!

Strategy 141

Strategy Virtualization Government Education 141

Rigor

SEPTEMBER 11, 2019

Rachel is the Editor-in-Chief of Smashing Magazine, a British web developer, writer, and speaker. Vitaly is a co-founder of the Smashing Magazine brand. He served as the Editor-in-Chief of Smashing Magazine until October 2017 when he passed the baton to the remarkable Rachel Andrew. Rachel Andrew. Vitaly Friedman. Scott Jehl.

Performance 89

Performance Education Google Website 89

Smashing Magazine

AUGUST 20, 2021

I vividly remember receiving a PC Magazine for my birthday with a trial of Dreamweaver. Piecing together a website using a WYSIWYG editor and seeing the code it generated was a fascinating and educational experience that sparked an initial interest in web design. Smashing Magazine powered by Netlify. More after jump! Government.

Ecommerce 139

Ecommerce Website Government Internet 139

Smashing Magazine

MARCH 19, 2021

In fact, we had to look into various cases for the form design: What happens when no data is provided at all? Given that a vast majority of our readers — wonderful people like you — are using autofill, it’s worth spending time designing an experience around it. Designing The Perfect Navigation. UX, Design. UX, Design.

Mobile 140

Mobile Design Cache Code 140

Smashing Magazine

AUGUST 30, 2021

In previous articles from this series, we’ve covered auditing CSS codebase health and the incremental CSS refactoring strategy , testing, and maintenance. In this article, we’re going to cover CSS optimization strategies that can optimize CSS file size, loading times, and render performance. On design systems, CSS/JS and UX.

Media 109

Media Performance Cache Strategy 109

Smashing Magazine

DECEMBER 22, 2021

You’ll find psychology heuristics just like tips for building a winning UX strategy , dive deep into user research and UX writing , and explore real-world examples — good and bad — from which you can learn to create experiences that truly matter. The right tools at the right time, help streamline the design process.

Airlines 129

Airlines Mobile Design Strategy 129

The Agile Manager

NOVEMBER 30, 2019

Complex corporate strategy derived from analysis and modeling creates the appearance of authoritative expertise. As long as there is cheap capital to be raised from risk-averse investors there will be complex business strategies. This doesn't make for good strategy or good investment. Debt capital likes predictability.

Transportation 52

Transportation Strategy Design Programming 52

Smashing Magazine

MARCH 7, 2022

That’s not to say the extraneous content is pointless — enhanced design and user interfaces can have an important impact on the brand of a website, and delightful little extras can really impact your users’ relationship with your site. For Smashing Magazine, that involved dropping some of our web fonts. And Is It Used?

Website 103

Website Media Mobile Network 103

Smashing Magazine

OCTOBER 21, 2021

Tatiana Mac wrote this excellent article which covers some of the approaches developers might consider taking, as well plenty of other great points, including key questions to ask when designing with motion on the web. On design systems, CSS/JS and UX. Design With Reduced Motion For Motion Sensitivities , Val Head, Smashing Magazine.

Media 125

Media Systems Mobile Design 125

Smashing Magazine

OCTOBER 2, 2023

Definitely read up on the strategy and reasoning behind this stack in the first article if you missed it. Meet Smashing Workshops on front-end, design & UX , with practical takeaways, live sessions, video recordings and a friendly Q&A. We used an eager loading strategy paired with a high fetchpriority on the images.

Cache 72

Cache Strategy Best Practices Design 72

Smashing Magazine

SEPTEMBER 2, 2021

JavaScript Design Patterns. Knights of the Flexbox Table is another well-designed interactive course to help you learn the different aspects of the flexbox specification. On design systems, CSS/JS and UX. Design Patterns Game. Design Patterns Game is unique and is not for JavaScript beginners. CSS Flexbox.

Development 145

Development Games Education Programming 145

Smashing Magazine

MARCH 2, 2021

While many of us, designers and developers, are likely to have a relatively new mobile phone in our pockets, a vast majority of our customers isn’t quite like us. For a while, Flipkart adopted an app-only strategy and temporarily shut down its mobile website altogether. Testing the Smashing Magazine website on different devices.

Mobile 134

Mobile Testing Website Benchmarking 134

Smashing Magazine

NOVEMBER 8, 2021

At the limit, statically generated, edge delivered, and HTML-first pages look like the optimal strategy. Enabling dynamic commerce requires close integration between server and client, an optimized streaming and data fetch strategy, and a production platform that operates at scale. More after jump!

Cache 136

Cache Best Practices Strategy Servers 136

Rigor

JUNE 12, 2019

Alla Gringaus has worked with a multitude of well-established technology and media brands, including TIME , People , The Economist , and the American Kennel Club, carrying hands-on and leading roles in front-end development and UX, all driven by user-centered design. This is untrue, she says. Alla Gringaus #webperf Click To Tweet. Conclusion.

Performance 72

Performance Social Media Internet Internet 72

Smashing Magazine

JULY 19, 2021

Let’s take a look at what some of these testing strategies look like in practice. For instance, if you ran daily pixel-by-pixel visual tests on the homepage of this site, Smashing Magazine , you’re going to get a lot of failed tests as they produce more and more content. Design/UX Collaboration. Unit Testing. Uptime Monitoring.

Testing 142

Testing Code Design Strategy 142

Smashing Magazine

OCTOBER 28, 2021

Unless you’ve designed a truly innovative new product, the chances are that you can already find something at least similar on Amazon. Scraping those product pages can net you invaluable data such as: The competitors’ pricing strategy. You’ll be better prepared to design, launch, and expand your product lineup with that data.

Website 115

Website Code Retail Best Practices 115

Smashing Magazine

NOVEMBER 19, 2021

Continue reading below ↓ Meet Design The Perfect Navigation , with Vitaly Friedman. Now that we’ve explored the theory of this strategy, let’s explore how we put it into practice. Further Reading On Smashing Magazine. “ More after jump! From complex mega-dropdowns to carousels and filters. Aussie-izer. What Is Next.js?

Servers 84

Servers Website Code Best Practices 84

Smashing Magazine

APRIL 21, 2023

They were designed to provide a way to execute JavaScript code in the background, separate from the main execution thread of a web page, in order to improve performance and responsiveness. Web Workers are designed to perform tasks that do not require direct access to the UI, such as data processing, image manipulation, or calculations.

Efficiency 107

Efficiency Code Strategy Network 107

Smashing Magazine

JULY 9, 2021

The case for accessibility is this; we as stakeholders, managers, teams, designers and developers need to do better in not only practicing accessibility but advocating for it as well. without the need for special adaptation or specialized design.”. without the need for special adaptation or specialized design.”.

Website 145

Website Mobile Design Testing 145

Smashing Magazine

JULY 12, 2021

In this three-part series , we are going to go through the CSS refactor process from the beginning to the end, starting with knowledge on how to approach it and some general pros and cons of refactoring, then moving onto the refactoring strategies themselves and ending with some general best practices on CSS file size and performance.

Best Practices 145

Best Practices Website Architecture Media 145

Smashing Magazine

NOVEMBER 23, 2021

Existing best practices and guidance, such as the Web Content Accessibility Guidelines (WCAG), give us a solid foundation for inclusive design and already incorporate many details that affect dyslexic readers. In this article, we’ll look at ways to make an existing design dyslexia-friendly. On design systems, CSS/JS and UX.

Website 132

Website C++ Best Practices Design 132

Smashing Magazine

AUGUST 3, 2023

These pages serve as a pivotal tool in our digital marketing strategy, not only providing valuable information about our services but also designed to be easily discoverable through search engines. It also opens up the possibility for more effective use of caching strategies, potentially enhancing load times further.

Performance 74

Performance Cache Traffic Metrics 74

Smashing Magazine

OCTOBER 24, 2023

A measly front-end designer like me can be blissfully ignorant of all this mumbo-jumbo. Let’s look at it for a site that’s much “heavier” than Smashing Magazine. A font is a branding consideration as well as a design asset that can enhance the legibility of a site’s content. Hey, look at that — great job, team!

Google 91

Google Analytics Traffic Metrics 91

Smashing Magazine

OCTOBER 27, 2021

If you are designing an app or a website, you can test how easy and intuitive it is to complete a specific task, fill out a form, find certain information, or buy a product. Before those studies, web pages were designed as printed media, with columns and big blocks of text. Eye-Tracking Evolution. Source: Oculid) ( Large preview ).

Mobile 112

Mobile Website Hardware Social Media 112

Smashing Magazine

AUGUST 30, 2018

It should be useful if you are new to product design, UX, interaction or digital design, or if you have experience in these fields but have not performed a competitive analysis before. Competitive Analysis, Service Design Cycle, Five-Stages Design Process. The five-stages design process. Large preview ).

Google 59

Google Design Strategy Website 59

Smashing Magazine

NOVEMBER 17, 2022

Webpage performance test report for the Smashing Magazine website. At first glance, it seems like a simple task, but in the background, browsers do a tedious job of calculating the size of these images in different scenarios: For images that are resized in responsive design. The change of design. Large preview ).

Media 106

Media Cache Website Mobile 106

Smashing Magazine

JUNE 1, 2022

You’ve spent months putting together a great website design, crowd-pleasing content, and a business plan to bring it all together. You’ve focused on making the web design responsive to ensure that the widest audience of visitors can access your content. You’ve agonized over design patterns and usability. Ken Harker.

Website 131

Website Design Network Best Practices 131

Smashing Magazine

JUNE 8, 2021

Some of the biggest size savings and performance improvements can come through a better image optimization strategy. Packed with useful tips and techniques , the book has a sharp focus on practical application and longevity of your image optimization strategies. Addy is the author of the book Learning JavaScript Design Patterns.

Media 106

Media Cache Google Best Practices 106

Smashing Magazine

JULY 23, 2021

You will need a way of reaching the specific kind of client you would like to work with, and that needs a strategy that word of mouth cannot supply. Unfortunately, it is just as easy to get that strategy wrong, and doing so can prove a waste of time and money. The Problem With Traditional Approaches.

Social Media 145

Social Media Media Network Website 145

Smashing Magazine

JANUARY 21, 2021

We were designing and building things, setting up new products, refactoring the components, and publishing articles. A big JavaScript bundle might seem out of place on a magazine that merely publishes articles, but actually, there is plenty of scripting happening behind the scenes. Image source: Lighthouse Metrics ) ( Large preview ).

Performance 145

Performance Cache Mobile Network 145

Smashing Magazine

APRIL 28, 2021

Some of the biggest size savings and performance improvements can come through a better image optimization strategy. Packed with useful tips and techniques , the book has a sharp focus on practical application and longevity of your image optimization strategies. Designed by Espen Brunborg and Nadia Snopek. Responsive Images. +.

Media 93

Media Cache Google Best Practices 93