Goodbye old friends, hello new!

April 17, 2012, 11:11 p.m. in Web Design

It was sometime in late 2006 that I pulled up in my bright orange Volkswagen beetle, probably wearing blue hair extensions and stripy socks, and first stepped into the converted barn that was the then-office of Glasses Direct.

The following five years were an amazing experience for me, both professionally and personally, as I designed and developed things from emails, page layouts and flash banners to product catalogues, branding and leaflets in the shape of glasses (ok that was just once). I even got to attend a model photoshoot, wow it was tiring not sitting at a desk all day.. ;) From web design to print design to interface design and front end development, there were always problems to be solved and great people to work with and I had so much fun doing that.

I remember so many of our GD social gatherings, from our beginnings in Wiltshire (chips in the village pub, rainy barbecues in the garden), to relocating to London and discovering Thai food for the first time! Some of the people I worked with at Glasses Direct truly became like family to me. They took me on my first ever aeroplane trip, I saw Prague and Spain for the first time with them, I went to maybe my first music gig and nearly fainted XD.

In the past year they welcomed me into the Technology team with open arms, I discovered Git, Python, Django, and the command line, and I worked with wonderful people who always respected me and helped me out immensely. People have blogged about sexism in the tech industry but I have to say that being the only girl in our technology team was never an issue that even *existed* for me at Glasses Direct, and I couldn't have asked for better peers and friends.

good memories

It's been awesome seeing and being a part of the growth of Glasses Direct, and I'm really proud of where they are now. Five years later, and no longer with blue hair extensions (or sadly, a VW beetle), but with more experience, confidence, and good memories, it's time for me to say a fond farewell. Though I will miss them immensely I'm confident they will do even more awesome things in the future. It's been great being a part of that vision (insert eye pun here, chortle chortle).

Hello Incuna!

Incuna

Whilst the London life was a fun experience for a pandalion (and I did rather like the choice of food there), I am looking forward to finding more bamboo (or perhaps some more patches of green) in Summertown, Oxford, as I join the super awesome Incuna as a Front End Developer!

Incuna are a digital agency specialising in healthcare, who make super awesome and useful web applications. I love working on stuff that really makes a difference to users and provides them with great solutions, so I'm very excited about joining Incuna! Whilst I enjoyed a mixed UI design/front end development role at Glasses Direct, I am looking forward to focusing my skills on development at Incuna and doing even more awesome things with HTML, CSS and Javascript than ever before!

Incuna are also just pretty much an awesomely cool company - they use Django, they regularly attend Oxford Geek nights, and they even hold their own hack days!

I am super looking forward to joining them, making new friends and having new adventures, and bringing a little bit of pandaryness to Oxford ;)

(I also hear there are some rather good burritos in Oxford, and posh fish finger sandwiches, so food wise, I should be fine! :D)

Learn all the things

April 14, 2012, 10:38 p.m. in Web Design

*learn learn*

Phew, I really haven't been updating this blog as much as I'd like lately. Life gets busy I guess ;) One of the reasons I feel so busy is that recently I've been taking stock of just how much I have to learn as a Front End Developer.

Rebecca Murphey is a Javascript guru I've recently started following, and the other day she made a very good post entitled A Baseline for Front End Developers about the sorts of things we should know these days.

"Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev" - Rebecca

This is so true, and was pretty much my workflow back when I started web design around 10 years ago. A lot has changed since then and I think there's an incredible amount of things to learn and master in terms of front end development. HTML and CSS certainly barely scratch the surface now. Especially as I've come back to front end development from a more design-focused role recently, I'm still catching up on everything that's important to know these days.

Learn all the Javascripts

Javascript is probably the biggest thing I'm focusing on right now. I've been using jQuery quite a lot in the past 8 months or so but realised lately that knowing how to use a Javascript library is *not* knowing and understanding Javascript. I feel pretty comfortable manipulating the DOM with jQuery but there's so much to Javascript itself I have no idea about, and it's only lately I've realised how much, from reading the blogs of Javascript experts like Rebecca, or Paul Irish.

Apart from those guys, here are some other really useful resources I've found for learning Javascript:

  • Douglas Crockford's talks on the history of Javascript and the good parts of the language - I think they really give you a good context and background on programming in general.
  • The book Eloquent Javascript by Marijn Haverbeke. I think it explains stuff in an easy to understand and so far has some fun example programs to learn from too.
  • The Javascript Definitive Guide book by David Flanagan seems to be a pretty good Javascript bible and is very clear and easy to understand.
  • Codecademy is always good for following along with javascript lessons - though personally I do like to experiment on my own files just to encourage myself to not just solve particular problems. I think Codecademy is great though :)

But, I am going to steal more wise words from Rebecca Murphey when she says "The number one thing that will make you better at writing JavaScript is writing JavaScript." One of my weaknesses is sometimes letting the fear of failure hold me back too much, I feel safe in passive learning (e.g. reading) but less safe doing things I'm not completely sure of how to do. But I need to fail in order to learn, right? :D So writing more javascript is definately a must for me.

Learn all the other things

Apart from the attempted mastering of Javascript, there's still a bunch of other stuff I want to do a lot more of. More HTML5, more fun things with canvas, more responsive design, improving my workflows. I think front end development is such an exciting thing to be part of right now with everything that is going on, and the field and web in general feels more collaborative and awesome than ever thanks to things like Github.

Being a fairly easily-overwhelmed person I do sometimes feel overwhelmed by all the things I want to master, and sometimes I feel like in the giant pool of web development, my knowledge is just the size of a tiny pond. But then I remember how much I've learned and improved in my years writing HTML and CSS, and I also remember we're all on the scale somewhere of what we know and what we can do. The important thing is understanding where the gaps in your knowledge lie, so you can get on the path to filling them, I think :)

Someone asked me the other day what I did, and when I explained my job they replied "Oh, so you update the pictures on the website?". Perhaps I should have answered "Yes, I also mark-up the website cleanly and semantically with HTML, use CSS to style it in an organised, extendable way, attempt to make that site display nicely on around 20 different combinations of browsers and devices, ideally making it respond to how it might be viewed, make sure my code performs well and falls back, maybe I'll use Javascript to enhance the site too (watching the performance and fallback again of course), use some sort of templating system to manage my pages, then I'll commit things and send pull requests and make a cup of tea." :D

What are you learning lately? Do you ever feel left behind when it comes to keeping up with everything going on in the web world? It would be good to hear from you!

Design vs Development

March 25, 2012, 2:46 a.m. in Web Design

Something I've been wanting to write about for a while now, is the separation of design and development in web design, common views and workflows to do with that separation, and my own personal experiences of choosing between design and development in my career.

What is "design"?

Design is a difficult word to talk about, because it has so many very slightly different definitions. Dictionary.com's definitions include things like:

  • to intend for a definite purpose
  • to form or conceive in the mind; contrive; plan
  • an outline, sketch, or plan, as of the form and structure of a work of art, an edifice, or a machine to be executed or constructed.
  • to plan and fashion artistically or skillfully.

When it comes to the web, the word design can certainly mean many things. We have graphic designers, ux designers, interface designers. We design ideas, wireframes, visuals, but we also design architecture, frameworks, systems. In my opinion, no matter what part of the web process we are doing - we're generally designing or creating solutions to problems.

To me, the term Web Design encapsulates this problem solving, and any to all of the above processes. When I started learning html and making my first webpages back in Notepad, some 10 years ago, I didn't question whether I should only design how the site might look, or only write html - both Photoshop and a text editor/design and mark-up, were the tools I needed to solve the problem of creating “a website”.

Designing with CSS

For my first “proper” job, I worked for a small web design studio, and there were just a few of us, so I guess we didn't really have the option or need to split the process into many different roles. On the visual side of things, I wasn't bad at making things that looked pretty good, not through any graphic design training as such but more from a kind of intuition or eye for knowing what didn't look good and therefore, what looked better. I was just starting to learn CSS at the time to style my webpages, and things like using pure CSS navigation were beginning to really get used in the web world. So whilst I might design how the menu would look in Photoshop, I would equally consider how that would be created with CSS.

CSS is one of the main reasons I think design and development have a naturally close relationship, even when they aren't done by the same person. And certainly, the aim of my blog post is not to say I think design and development should always be done by the same person. From my experience of moving to bigger organisations I can understand that it often makes more sense to have specialists, people focusing on design and others focusing on building those designs.

But, my point is, I find it hard to see a big gap between the two, at least when it comes to front end development. Let's take something really simple like a hover effect on a button. The look of the button might be designed in Photoshop, by the designer. How about the hover effect, the designer should design how this looks too, right? But in order to do that, they have to know that a hover effect is something that can be coded into the workings of a website. And now more than ever with CSS3, we have so many effects that can be used, animations, interactions.. whose job is it to suggest those be used? If the designer knows these CSS3 properties and is designing them, they must be pretty interested in code right? And if they are, why wouldn't they want to use this code to bring those things to life? On the other hand, the front end developer has a wealth of tools at their fingertips with CSS and Javascript. It's not so odd that they might use these tools to design visual things.

My main point is... Web design is NOT static design.

It's a common workflow at many organisations, that the designer will create the mockup in Photoshop, the client will sign it off, and then the developer will build it. And we may have the steps of a UX designer/wireframer in here too depending on the particular team of that organisation.

I've been a part of this process - at separate times - as a designer, and as a front end developer. It's been incredibly interesting to be part of that from both angles, but there are still a few issues I sometimes see with the process.

Ultimately, the canvas is the browser

When it comes to web design, we are designing for the browser, and I think that seeing the browser as the last step in that process is flawed.

Let's say we need a webpage with a form on it. This has various fields and various states of validation. Maybe some parts of the form change depending on what you select. We could design this whole thing in Photoshop. Maybe we have slightly different pages with slightly different forms. Do we want to design mockups for all these states? I've been there and I would say that laying out a form in Photoshop is NOT fun especially when you want to do something like, change the width of the fields to see how that looks. I think this is where it might be handy to use Photoshop to design say, the overall style of the form fields, but use CSS in the browser to lay out the page and then.. see how it looks in the browser.

Even when it comes to something as simple as text - Photoshop isn't really a great example of how text will look in the browser. It's great for designing where abouts text may go etc, but sometimes you may use things such as the faux italicisng or Photoshop settings of text spacing - but these are never going to look exactly the same as the browser. Trying to make things very “exact” in Photoshop, I feel is not a worthwhile endeavour.

Web design is changing - maybe our workflow should

Responsive web design is something I haven't done much of myself yet, but am learning more about everyday and the main reasoning behind it is - with the number of different ways people are viewing our sites these days - mobile, ipad, etc, we really can't keep thinking of our canvas as a 1024 x 768 (or whatever it is these days ;) Photoshop document.

Our canvas should be flexible - we should plan and tweak both design and code for breakpoints depending on resolution. Now more than ever, web design shouldn't be static. Mocking up, with Photoshop how a site might look in six different resolutions, has surely got to be a waste of time.

As I said earlier, I'm not suggesting design and development should be one and the same job or necessarily done by the same person. But I think there should be a real change in a lot of the old workflows we are used to.

  • Understand the medium you're designing for, and know it well

    I'm sure a lot of designers do, but in my opinion, if you're designing for the web, you need to understand the capabilities and limitations of HTML and CSS even if you don't write them. Above all you need to understand the flexibility and dynamism of the web.
  • Designer and developers need to work closely and talk!

    I think a lot more back and forth, especially during the design process (and not just "after a sign off") is important, so we can discuss things like CSS effects, what might happen if this button is hovered over, or this menu item is selected, etc. Visual design and code is closer than ever these days, so let's discuss them together.
  • Don't get caught up on pixels and exact measurements

    Going back to the responsive design thing, people are viewing sites in so many different ways now, we should not design for the number of pixels we expect them to see, but for the experience we are giving them. I'd like to point out here that as much as I feel designers should have a good understanding of code, I think front-end developers should know/learn some design principles, to help them understand how and why a designer intended something to be that way. Then, they shouldn't need to ask for exact pixel measurements.
  • Prototype with HTML and CSS

    I see this as something that can be done between the design and development stage, and by either person. Perhaps to see how the design will look in the browser or what happens when you fill in a form or click some buttons. I think HTML prototypes can speed up the design and development process, and are also a great (and more accurate) thing to show clients to give them an idea of how their site will look in the medium it's going to end up in.

Anyway, those are just my thoughts. For me personally I've decided to focus on front-end coding, particularly more advanced CSS and Javascript stuff in my career now, but I'm still fond of the visual side of design and there's a lot of personal projects I want to work on that combine both. I listened to this interview with front end developer Jenn Lukas on The Big Web Show the other day, and her decision to choose development over design. She expresses that she never felt design was finished, whereas development is easier to walk away from when you've got something working. I feel exactly the same, and I think the reason I started to shy away from (visual) design was really that feeling. I very rarely got a day where I felt totally satisfied with what I had done, or that it couldn't be "better", and whilst it's good to want to make something better, some days it felt like design was making me more unhappy than happy because of that. However, now I've stopped designing for a day job, I'm starting to enjoy it more on the side again, and explore it without pressure, which is nice.

And one day, my ultimate plan is to be amazing at both! Somebody told me once they thought it wasn't possible to be a great designer and a great coder, but I think it is - you just have to work extra hard. ;)

Thanks for reading!

Glasses Direct's 'Spectacular' makeover!

March 11, 2012, 10:13 p.m. in Web Design

GD's new homepage
The shiny new GD homepage

Last week at Glasses Direct, we launched a new homepage! It's the biggest design change we've done to the site in years and so it's pretty exciting!

The main new thing about our homepage, apart from the stripped back simplicity and new colours, is the rotating promotions banner. These are pretty common on websites now, but it's the first time we've had a non Flash-based version, and one that looks so good!

Our development team worked on the code for the rotating banner, and I had the fun task of implementing the code into a design worked on by our in-house designer. More importantly, he and I worked closely on deciding how the banner would work in order to make it flexible, consistent, easily updatable and of course - always look good :) I think it's great (and important) for designers and developers to work together in this way, not just after a design is done, but before so and during to ensure that form meets functionality.

There have been a few problems with the way we've done promotional banners in the past. We change banners often, and sometimes need to be able to change just a small bit of the banner such as a date or word. In the past this would involve saving an entire new image in Photoshop, uploading it to our CMS and changing the image link over. Booring! The other problem with our image banners in the past is we tended to use a lot of different font styles and colours and there was always quite a lot going on in them. They looked good but not as streamlined.

So the designer and I worked on creating a banner that used Webfonts to have real text that looked good but was updatable, and created a consistent style for all banners. There's also the option to use snippets of inline CSS in the CMS to change the text colour if we need to for a certain banner - and best of all, can be done fairly easily by a non technical member of staff. I'm sure someone wants to tell me "inline css is baad!" but this seems like one of the occasions when it does make sense.

As well as the webfonts, there's a nice strip across the bottom using css3 opacity, and circle navigation created with css3 border-radius. Even though I've been using these kind of things for a while now, it's still nice to appreciate how much we can do without images on the web these days :)

Anyway, I hope you like the new look!