How many devices??

It turns out that I have nearly got Digital Nomad working on a lot of different devices. I have saw here and there a few different problems that will need to wait for a future update. Though I am very happy with how well I have coded the site and how its holding up in different devices.

I was mainly just doing the old dragging the browser window down to size to see what happened to the site at different sizes.

Though sense I have started to code for mobile first, which is a godsend as it makes everything in the long run a lot easier. As I was told it and understand that its easier for the content to fill the screen as it has a place to move into but going to a smaller space it doesn’t leaving you to sort out a mess of jumbled up content.

This is what the home screen looks like on a Samsung Galaxy s2 like would anybody even have one of these any more?

It is nice to check these older devices as it will usually mean that the site will look good on this new smartphones that are coming out at the moment.

I was quickly checked some other screens as quickly saw a few problems that the studio search bar was having.

I think I had checked this page on newer devices and it was working fine but on these smaller screens it seems that it just can fit it in.

So I ended up going into the trusty inspect element and poked around until I found out that it was a very simple fix.

It turns out I had set the search input to a certain width which isn’t really needed so I just changed the width to be 100% as you can see has fixed the issue that was happening here.

It fun when they are this simple.

I have been using a few different websites to check the website the screens shots were from one called Screenfly. This site seems to be better to check your site out on older devices that or the choose of devices hasn’t been updated in a long time.

I am writing this after the fact from doing fixes while on the go so I actually don’t have any examples things that needed fixing, though trust me there was a good few to things that needed fixing with even still using the mobile first approach.

It is cause I do it slightly around about way now that I think of it. I actually code the site for desktop first and then transfer the code so that it is ‘min’ media queries. This adds a bit more time onto the process but sense I have a very good coding structure in place with different grid systems it is actually not that hard to swap around the code as very little does.

The most thing that needed changed was this;

@include grid-column(12);

What this particular one is doing is setting the size of the element that this is getting called onto to 100% width. As on desktop it would need to be around (4) to fit multiple entries in a row, like on the studio search page.

Another type of fix that I can remember was that text needed a bit of work on it and I kept changing it as I couldn’t tell what was to big/small. I have ended up with a 15 px for mobile as I have a lot of text to fit in per line.

I know that there is still a tone of work that could be done for the responsive side of things. Though with the site working on all the desktops that I have tested I am happy enough with how everything is looking in terms of the site being responsive. I would hope I could even call it a web app but this might be a stretch, I can’t tell. It doesn’t matter anyways as this is all being kept for future development ;)