With a few additions, WordPress websites can accommodate a responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints. In this article, Laurie Laforest will show you how to set up a WordPress theme to support art direction in a simple manner. This method relies on WordPress’ standard administration interface as much as possible, and it requires only a single image to be uploaded.
Read more…
The best designs balance aesthetics and performance by working with mobile in mind from the start. In this article, Danny Bluestone will share the current mobile performance optimization processes he uses at Cyber-Duck. Aim to create a website that can balance aesthetics and performance on mobile, and achieve real conversion metrics. A collaborative, iterative performance optimization process will help you achieve this. Right from the start of the project, build an understanding of the client and server-side factors that determine website performance on mobile.
Read more…
Today’s SEO industry is split into two related fields: content marketing and technical optimisation. The ability to create content that resonates with audiences and communicates a brand identity is vital to the success of any website, and articles exploring every intricacy of this art can be found on the web with relative ease. In this article, Tom Bennet will be exploring three of the fundamental principles of technical SEO. By the end, you’ll be armed with a wealth of techniques for organic search optimization that are applicable to almost all established websites. Let’s get started.
Read more…
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…
Competition in the App Store is fierce, and if an indie app developer wants to get noticed, having an amazing product is no longer enough. As the number of mobile users grows, new apps pop up daily. To make yours a success, be strategic about how you design the “shop window” for your app — the app’s page. A/B testing and optimization of the icon, screenshots and video preview will give you a better chance of higher conversions, a higher volume of organic downloads and a better return on your investment in user acquisition.
Read more…
Most of the time, we develop websites without understanding what the browser is actually doing under the hood. How exactly does the browser render our web pages from the HTML, CSS and JavaScript that we create? Google’s PageSpeed Insights tool can be very helpful when trying to profile a web page and find areas for improvement. You simply enter the URL of the page that you want to test, and the tool provides you with a list of performance suggestions. Fortunately, the solution to this problem is simpler than it seems! The answer lies in the way that the CSS and JavaScript are loaded in your web page.
Read more…
Responsive images have been keeping us on our toes for quite some time, and now that they are getting traction in browsers, they come with a scary problem: the need to efficiently resize all our image assets. As designers and developers, we have an enormous amount of power to shape how the web works. One of the biggest impacts we can have is to make our websites more performant, which will improve our users’ experiences and even make our content available to whole new markets. Cutting image weight is a relatively simple and hugely impactful way to increase performance, and I hope the information outlined above helps you make a difference to your users.
Read more…
Are you designing at “Retina” resolution in Photoshop? In this article, Murdoch Carpenter will walk you through the problems he faced in creating Retina mockups to be displayed on a tablet device. He will then explain a way to work that is easier and gives you better performance. This is about Murdoch’s experience with Photoshop, but it could be applied to Illustrator and other software. Throughout this article, he will use the @2x and @3x notation. These represent the Retina buckets for iOS. A great example is the app’s icons.
Read more…
The extend directive can produce undesirable side effects if it is not carefully implemented. Thankfully, there are many strategies for using extend effectively that can prevent these side effects and produce clean, organized CSS. Understanding how extend works and keeping the guidelines above in mind will enable you to use @extend to its full advantage — reducing CSS output and keeping relationships intact, no matter what exported selectors (classes, attributes, etc.) you use. Make wise use of both the @mixin and @extend directives — they’re meant to coexist in your well-organized style sheets.
Read more…
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…
