A New Found Appreciation for Images on the Web

I’ve been putting images in web pages for years. Nearly 2 decades now. For most of that time it has been quite easy. Add your source and the dimensions and BOOM, there you go. There was always some work around optimising images outside of your page but once in there, easy.

Then, with higher pixel densities it started getting a bit harder and we had to work it out with media queries and srcset. Now SVG is widely supported, all this fussing around with different versions for different resolutions has gone away, at least for simple graphics.

I’ve recently been doing some design work on an Android app and it’s a very different way of doing things with images. For example, I’ve created a splash screen for while the app is loading. It’s a full page, wide logo in the centre, coloured background.

On the web, I’d just set the background colour and then centre the SVG logo, probably with flexbox, and use a flex-basis of 80% or some margin to give it a flexible width.

On Android, I’ve had to provide the splash screen image as a series of PNG files. 5 different resolutions, varying from 480×320 up to 1920×1280, and then in both orientations, 10 files in all. The clever part is that at the point of installing the app the Android device will only get the files appropriate for its size and pixel density but it means a lot of messing around with assets.

It’s been a similar story for icons too. Multiple resolutions. You want a different colour? That’s a separate PNG.

I’m making it sound worse than it actually is. Luckily there are great tools that let you import a single image and export all the variations you could need.

But it does make you think about the differences between platforms. To me, the web browser, with it’s ability to resize on the fly, use SVG, recolour, apply filters, transform and animate in CSS makes Android image support feel very primitive.

What I Learned in 2015

I thought I’d do another quick run-through of what I’ve picked up this year. It feels good to show myself that I’m still learning at a healthy pace.

SVG

I’ve started using SVG more, creating some simple charts and building dynamic graphics for use with Google Maps. I made markers or pins, which have colours and characters set dynamically according to data. I think I’ve finally got my head around the whole viewBox, which took me a while. CSS Tricks provided me with some very useful SVG tutorials and introduced me to the work of Sara Soueidan.

Angular.js

I’ve been tinkering with Angular for a while but have really got into using it day-to-day this year. I found it hard at first because it’s so different to using native JavaScript or jQuery to manipulate the DOM. In Angular you basically set conditions in the HTML, e.g. show this when the data is that, and then to make things happen you just change the data. The data changes and the UI updates. It means you’re not making data changes and UI changes – just change the data and Angular looks after the UI. Once you’ve got that it’s actually a lot easier to manage than writing an app with jQuery.

React.js

I’ve done my first project using React. This is a very clever framework for updating the UI as quickly as possible. It checks what actually needs to change on screen and only updates the HTML nodes that require a change, making the UI very fast and, well, reactive. It’s based on building components which each have their own properties and state. The component or modular approach certainly feels like the way forward for building UIs.

Jekyll

I built the previous incarnation of this website using Jekyll. It’s a static site generator. It works in much the same way as any content management system with templates and a build process but spits out static HTML so it’s faster for the user. It took a lot of setting up on Windows and involved some scary new stuff for me, like Ruby, Python and using the command line. It is an amazing bit of software for building fast sites and very flexible. Definitely worth trying. I eventually moved away from it and back to WordPress as it was just easier to update – I can update from any device anywhere without having to have the complicated local set up. As my content is mainly just text, I didn’t feel the performance gains balanced out the usability for me as an author.

Markdown

Using Jekyll also introduced me to using markdown. It’s a quick way of writing HTML without having to use tags. It keeps the content clean and easy to read, whilst containing formatting. It kind of lets you write HTML without having to break your creative flow to think about formatting. It also enables non HTML savvy authors to publish formatted content easily.

New JavaScript Syntax – EcmaScript 6

I haven’t used it yet but started reading about ES6. There are a few good introductory articles, which show off some of the new features without getting too bogged down in the details. Here’s a good basic ES6 intro. It feels like a lot to learn but it becomes evident very quickly that we’ll be able to write less code and it’ll be easier to understand. Win win.

Google Analytics Event Tracking

I’ve used Google Analytics for years but have just discovered how to use event tracking. I can now track clicks on a particular UI element to see how it’s used, check pre-defined user preferences by reading data out of the browser’s localStorage, measure download numbers for PDF documents. It’s opening the doors to a lot of previously missing data with regards to user behaviour and can help me make better decisions on designing the user experience.

Responsive Web Design

I’ve made big strides forward this year with responsive design. I’m starting, late I know, to think about it in everything I do. It’s a lot more work but leads to much more usable UIs and often forces me to keep the design simpler than I would otherwise, which is probably a good thing.

Bootstrap

I’ve actively avoided Bootstrap for the last few years. I always had 2 major concerns with it: 1) that my sites would end up looking the same as everyone else’s and 2) that I was loading up a hefty framework and then only using a fraction of it, which would be very wasteful.

A colleague reintroduced me to it and I was delighted to find that it’s now possible to create customised builds so you can choose the parts you want to include (no waste) and even set colour schemes, default padding, etc. in the build, replacing the defaults, so there’s less needed to overwrite in a custom theme.

I’ve started using it as its grid layout makes responsive design so much easier than handling each page element and I know that the ready made components and UI elements are accessible where my own might not be.

Codepen

And finally, Codepen. I’ve covered this in another post, Developing in Codepen. In short, I use it every day, it’s awesome.

What I Learned in 2014: Part 3 – The Best of the Rest

This is the final part of a three-part article looking back on new things I’ve discovered in 2014. This part is just a round up of all the other bits and pieces not mentioned in the other parts and a bit of a look forward to 2015.

Google Analytics

I’ve used Analytics for years but haven’t really used it in any depth for the last couple of years. It’s changed. Quite a lot. All in a good way. It can do a lot more now than before. It seems to be moving closer towards the Webmaster Tools and used well can actually help you improve not only the user experience through design but also the performance of your site through the Behaviour > Page Speed data and suggestions.

ASP.NET MVC

I don’t do a lot server side but colleagues of mine have made excellent use of the EditorFor functionality and partial views to create reusable dynamic page components.

My biggest discovery has been Bundling and Minification of JavaScript and CSS assets. It allows you to create bundles of files and then concatenates them into one long file before minifying it and changing the references. This could mean one single request for all JavaScript, which is then cached – much better for performance and page loading times.

Responsive Web Design

I still feel like I’m quite new to this but have made some good progress this year. I now understand the basics of mobile and viewport sizing and scaling. I’ve also got the hang of media queries for changing font-sizes and positions of elements based on screen width. I’ve kind of taught myself by looking at the code of sites that do it well rather than by using any tutorials. It seems to be a good shortcut for now. There’s definitely a lot more to learn here but I’m pleased how painless it’s been so far.

Brackets

I’ve recently started using Adobe Brackets, which is an open source code editor available from brackets.io. It’s got everything I need, looks good and from the progress I’ve seen in its first few months it’s going to move pretty fast. The thing I love about it is that it’s built in front end technologies – HTML, CSS and JavaScript.

To Do List for 2015

So, now I see how much I’ve learned in the last year it’s time to start thinking about what’s next for 2015.

One obvious area for me is learning more about SVG. It would be nice to reach a point where any graphic that isn’t a photo could be created in CSS or SVG. I’d quite like to move away from icon font libraries in favour of SVGs to reduce a bit of bloat.

The other big area is responsive web design, in particular responsive images. Sending large images to mobile devices is bad news and should be a quick win on the performance front.

I’m sure there will be a lot more that crops up in 2015 as I find a need for it and I may even start learning things that haven’t even been created yet.

I hope I can help others to learn more too in 2015.