If you’ve tried to check out my site in the past few days, you’ll know that it was looking pretty funky- I was having a lot of issues trying to upload files, and nothing was displaying properly, so I was taking parts of it down while I figured out what was going on. I finally managed to get it back up yesterday [serves me right for using free hosting, I guess!]

I’ve installed Windows 8 on my laptop- yay! It’s running quite a bit faster now, and I’ve got it set up pretty much how I want it- though Microsoft couldn’t be bigger dicks to left-handed mouse users if they tried! I’m fairly ambidextrous but I prefer my touchpad set to left-handed. Tapping the touchpad now acts as a right-click, and I seem to have lost the ability to scroll by swiping, so it’s taking me a bit of time to get used to… Rant over!

I decided to change the way I was working on my site, and start with the most compact- the mobile version of the site, and let it unfold gradually into a desktop site. This doesn’t mean getting rid of all my work so far- I’ve kept a lot of the styling, but I’m moving elements around, and changing which parts are visible, and when. I was thinking about it last week as sort of like one of those ponchos that comes in a little plastic pouch: pretty easy to unfold from a tiny square, but it’s a lot harder to fold it back up into that neat little square. The home page for the mobile site is simple, providing just a menu, but the content goes on from there. Ideally I want to have all of the content from the desktop site on the mobile one, but have it accessed differently- so that if you don’t need driving directions they won’t be displayed, but they’ll be easy to access if you do.

Open it up and have a look.

Right now, the files are starting to look a bit messy- a lot of content is commented out while I figure out how it all fits together. It’s a work in progress though, so this is what it’s all about.

I’ve decided to use two main CSS files- I say main because I’ve also got a reset file [letting myself use that for now, but I want all of that to be included in the main files eventually.] I’ve set the breakpoint at 700px wide. Any browser window below that will display the smaller version of the site, while any browser set to 701px or wider will display the expanded desktop version.

I think that it does go a bit wide, so I’m looking at changing the breakpoint to 600px, and considering having an intermediary layout- a tablet-ish version- for widths between 601px and 800px.

I’ve been reading a lot of articles, like this one, about breakpoints, and how to make a responsive site.

I’ve set the majority of my sizes using percentages, but when it comes to vertical measurements, I still find myself using pixels. With things like Apple’s retina display, which has a higher pixel density, I guess I can’t really afford to use pixels as a unit of measurement at all… I’m not sure how that type of display will affect the background image on the mobile site yet either: the image itself is 700px wide (I cropped the original image and then resized it down to that so that the file size wouldn’t be too big) but with an increased pixel density I’ll be losing a lot of the quality if I don’t increase the image size.

Do you have any bad habits like using pixels when you know you should be using percentages?