Responsive Design Weekly - RWD Weekly #437

Read online

Hey everyone and welcome to week #437 of the responsive design newsletter.

This week we look at Cloudflares new offering for Wordpress sites to improve performance, how we should look at things as a front end developer, and there are some great resources and tools to help you along with your next project.

Let's get to those links!
 



Sponsor

Vue 3 Introduction with Sarah Drasner.


Get started quickly with the Vue.js JavaScript framework. You’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots. Use directives to build functionality with markup and learn to make your own custom directives. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API!
Start learning today
Advertise your product, service, or job opportunity to 26,635 tuned in web designers and developers. Find out more.

Article

 

Improving Performance and Search Rankings with Cloudflare for Fun and Profit

Although CloudFlare have been making sites faster for years, they seem to be taking more steps towards broadening their reach to include SEO benefits (which is page speed as well) and they also look to be adding an analytics platform in as well. Given that quite a few sites are using CloudFlare, it makes sense for them to track more of the traffic after all it certainly helps Google via Google Analytics.
 

Thinking Like a Front-end Developer

Ahmad breaks down how you should approach the working up a design by starting with ignoring the details.
 

Avoiding tab styles for navigation

Adam works on the Gov UK team and has recently been working on tabbed navigation (that aren't really tabs). An unshocking discovery ensued that things that are styled to look like other things but behave differently is confusing. Adam looks at some solutions to the problem.
 

Importance of Wireframing

While wire framing is invaluable, I always believe that you need your content up front before you begin any kind of layout. The first time a design will fail is when it meets the content.
 

Responsive Snakes! And what they can teach you about CSS 🐍

The responsive snake, does your design squish, curve, or slice?


Tutorials


A Dynamically-Sized Sticky Sidebar with HTML and CSS

I’ve literally come across this exact same issue today, except the pattern we’re using is a little more like the pattern you see on https://diversity.fb.com/initiatives/at-facebook/. I’ll also be looking at implementing this sticky approach on the cart element on the Back Pocket Notebooks site as well.
 

Back to Basics: Creating a clickable card interface in plain HTML, CSS and JavaScript

Card layouts are a very common way to display content, but what happens when the whole card should be clickable along with an option to dismiss the card, and maybe an inline link too?
 

5 CSS pseudo-elements you never knew existed

Well I wasn't aware of two of these pseudo elements, and I'm going to give them a try out now.
 

Resources & Tools

 

Free quality illustrations customised to your branding

One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity!
 

CSS clip-path Editor

A series of predefined shapes to allow your to create clipping paths for your designs along with the ability to customise the shapes.
 

WebPShop

This week l've been working on a site with a cut-out image of people in the banners across the whole site, and seeing as transparent PNG's with photo's are HUGE we are using WebP.  It took me a while to get the workflow right, but this plugin for photoshop has been really helpful.
 

Remake - A web app framework for makers

Meet Remake, an open source framework for making web apps with just HTML and CSS.



That's all for this week. If you've come across any interesting/helpful articles or you've written something yourself please hit reply and let me know about them.

See you all next week!

Have a great weekend!

Cheers,

Justin.

Twitter
Facebook
Website
Copyright © 2020 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:
Simple Things
Simple Things LTD
Thame, Oxfordshire OX92EQ
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #436

Friday, November 20, 2020

Read online Hey everyone and welcome to week #436 of the responsive design newsletter. This week we see a couple of new product version launches in Tailwind and View, see how you can monitor your sites

RWD Weekly #435

Friday, November 13, 2020

Read online Hey everyone and welcome to week #435 of the responsive design newsletter. Our feature site this week is from Ahmad who has single handedly brought more featured articles in this newsletter

RWD Weekly #434

Friday, November 6, 2020

Read online Hey everyone and welcome to week #434 of the responsive design newsletter. I'm sure you, like me, are patiently waiting to see how the US election is going to pan out so I hope this

RWD Weekly #433

Friday, October 30, 2020

Read online Hey everyone and welcome to week #433 of the responsive design newsletter. Our feature site for this week is a nude web page with all it's code bits on show. The site itself is a

RWD Weekly #432

Friday, October 23, 2020

Read online Hey everyone and welcome to week 432 of the responsive design newsletter. This week I've been getting to the end of my workday and excitedly tuning into the Adobe Max conference. In the

You Might Also Like

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget