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!
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.
Ahmad breaks down how you should approach the working up a design by starting with ignoring the details.
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.
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.
The responsive snake, does your design squish, curve, or slice?
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.
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?
Well I wasn’t aware of two of these pseudo elements, and I’m going to give them a try out now.
Resources & Tools
One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity!
A series of predefined shapes to allow your to create clipping paths for your designs along with the ability to customise the shapes.
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.
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!