Mobile friendly

Neodite · 12 Aug 2013 at 17:18

Hi, my partner asked me to create a simple online portfolio for her work, nothing fancy just a simple design.

So i'm nearly finished and I looked at it on mobile to check it worked ok, and everything is squished.

How do I go about making it the same on mobile as it is on the desktop?

The site is removed if you would loke to see what I mean.

Cheers.

GravyMonster · 12 Aug 2013 at 17:19

Do a quick google for 'responsive design'. It basically means you can use a different set of CSS rules based on media queries for different screen resolutions.

Neodite · 12 Aug 2013 at 17:21

Spunkey said:
Do a quick google for 'responsive design'. It basically means you can use a different set of CSS rules based on media queries for different screen resolutions.

I have to do that even if I want it to look the same as the desktop version?

Th3M8dH8tt3r · 12 Aug 2013 at 21:41

Neodite said:
I have to do that even if I want it to look the same as the desktop version?

Unless you've used percentages and ems for sizing, it won't look the same as on desktop and if you do, it'll be tiny, will still require some jiggling and the user will be forever zooming and scrolling.

You need to look into responsive. Additional rules to control layout and styling for different resolutions. Is a full width carousel header image necessary on mobile? No, so remove it from the DOM using CSS. Things like this.

Doraku · 13 Aug 2013 at 00:29

Try using Bootstrap or Foundation.

They already have most of the groundwork for a responsive website - might just have to take an hour or two to read the manual to get the gist.

If you wanted all text to be white on a phone resolution (768px) then you'd do something like this:

@media (max-width: 768px) {
color: #fff;
}

Th3M8dH8tt3r · 13 Aug 2013 at 01:35

Doraku said:
Try using Bootstrap or Foundation.

They already have most of the groundwork for a responsive website - might just have to take an hour or two to read the manual to get the gist.

If you wanted all text to be white on a phone resolution (768px) then you'd do something like this:

@media (max-width: 768px) {
color: #fff;
}

Don't forget your media selector otherwise funny things can happen on differing devices and when people do things like print a page.

@media and screen (max-width: 768px) {
color: #fff;
}

You can use device specific selectors as well and things like viewport. Google media queries. They are essential for a page to look good on mobile. That's if it even works without them.

Neodite · 13 Aug 2013 at 06:03

Ah ok cheers guys.

Should be fun =\ (Damn mobiles lol)

Removed the link from OP now

zyfar · 13 Aug 2013 at 10:01

I use Foundation as mentioned above in all my projects these days, it really cuts down recreating stuff every time I go and make a new site. The upshot is, the more websites you use with these frameworks, you can really customise them and pick out bits and pieces to tailor them to your needs.

The idea of designing for mobile first is a good way to get started with responsive design. Have a quick search for mobile first approach