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!

Reusable- maybe, but it’s not going to get back in that pouch without a struggle!

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?

2 thoughts on “Unfolding

  1. I’m glad your diving in. I’m taking a MOOC on responsive web design at the moment. I didn’t think initially that designing “mobile first” would be this complicated, but it’s great to learn about viewports, wireframing, and grid layouts for multiple devices. Good luck on your project.

    Liked by 1 person

    • Thanks! Are you enjoying the course? I’m definitely finding it easier [so far, anyway!] designing mobile-first, makes a bit more sense in my head. I’ve found choosing a single breakpoint pretty hard though, but the best advice seems to be to let the design dictate where they should fall… There are so many different device sizes to consider!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s