Jenny Gunnarsson
Slowly adapting
I’m Jenny, Kyan’s first intern ever. I’m a front-end developer from Hyper Island in Sweden. And I’m here to learn how to become a rock star in front-end development.
I never thought it would be this scary to write about what you’ve been doing for the last three months. But here it is my first blog post.
One of my first projects has been to make our own site, kyan.com, responsive. It felt like a huge project when I started, since I had never done a responsive website. Reading about it made me more confused, where was I even supposed to start?
The hardest part wasn’t to make the site responsive; if you’ve planned for responsiveness, it’s not that complex. The big challenge was to dive into someone else’s code, getting to know the website’s bits and pieces.
If I change this here, will it break there?
The hallmark of the Kyan website is definitely the illustrated animation. I’ve been going through hell to make it adapt to all the sizes, a real trial and error project. As a pixel perfectionist it’s a pain to not be able to get it 100% perfect – but I keep telling myself that it is ok.
Another bump in this road was a table that came out of nowhere. It didn’t really come out of nowhere; I just hadn’t checked out the cookie page yet. At first it seemed like a hopeless task but some research pointed me in the right direction. Since I haven’t been doing coding for too long I never worked with tables, I had to get help. The solution we chose was to stack the table cells on top of each other, and then remove the table headings and just bold the cookie name instead.
Get the Jenny 5.0 plug-in
When working with this project I came across a tool called Xcode, it’s a brilliant piece of software that, together with Safari, enables you to debug for iPhone and iPad (originally it’s created for developing iPhone and iPad applications). It makes responsive development a bit easier by seeing the mobile version on your computer, rather than updating on your phone all the time.
But it has its flaws. It works as a real device so the debugging isn’t as smooth as it could have been. The most annoying part is that you need to be in Safari, to refresh with your keyboard. Otherwise you need to go to the top and refresh in the address bar. Another thing is that you can’t scroll so you need to drag the pages with your mouse, emulating touch-scrolling.
I also came across a little tool called mediaQuery Bookmarklet. It gives you a ruler and the sizes of your browser window, both in pixels and ems. You can also see the x and y value when moving the mouse. But the best part is that it tells you when your media queries kicking in.
Learning by reflection
My greatest tip to someone else doing a similar project might sound strange, but print out the source code. I love print, it gives you a good overview and it’s easier to see the structure and how the site is built. With this overview comes easier planning, which always seem to be a big challenge. I bet I could write a big note and put it next to my screen and still forget to plan something, or just not plan well enough.
When looking through my notes I can see that the sentence “start with the biggest breakpoint and work your way down” always gets written down. I think you get a lot for free if you start by defining the styles for the biggest breakpoint, in this case tablet, since it’s inherited to the lower breakpoints.
I also believe it’s a good thing to do one page at the time or the same modules in the same go. So you keep your focus on one thing and finish that before you start on something else. It’s easy to say but harder to do. Always do the big bits before you get to the details.
This leads up to my next point: don’t rush. It will make you skip the planning and miss your milestones, leaving you confused and unfocused.
I also want to push for breaks. Scribble down some notes on your next steps, then take a break and do something else for a while. Return to your masterpiece with fresh eyes, and voilà new perspective and a surge of new energy.
It’s been a long and, sometimes, tiring project. But if I got the chance to do it again I definitely would. One of my goals for this internship is to speak HTML fluently. Which probably made this assignment the best one, so far, during this internship.
Tags: responsive, website, intern
Tweet