My portfolio site that I'm currently working on. This shows the current progress in Firefox, although it is hand coded to work in any modern browser or resolution.
The logo was made by my amazing girlfriend, @Nayla Smith, who also drafted me (thanks!).
@Mike DeLeon I'm using media queries for this as liquid layouts have their limitations. Changing font-size and switching out some of the backgrounds helps a lot in making it look good on every device. I don't know if its possible to make a site that looks good all the way from 200px to 4000px wide with a liquid layout.
Another thing I'm doing with the media queries is switching out the thumbnails depending on screen size.
@Arno Wendorff Yeah definitely, media queries are the way to go. Really once you build a solid framework for yourself, its easier then building a mobile dedicated version (m.yoursite.com).
A good trick i've learned with images, in your case thumbnails, is to set the img to max-width of 100% and a height of auto.
By doing that your images automatically resize with the container, and eliminate the need for new images at different resolutions.
@Mike DeLeon I do like the trick with having the images resize with the container. I'm sure I will use it with images elsewhere but I'm concerned about using up too many resources on phones if I use it for everything. For thumbnails for example I can probably save about 50kb per image and the processing power required to resize them (and with that battery life). I think its worth it for mobile users.
7 Responses
My portfolio site that I'm currently working on. This shows the current progress in Firefox, although it is hand coded to work in any modern browser or resolution.
The logo was made by my amazing girlfriend, @Nayla Smith, who also drafted me (thanks!).
3 months ago
Pro
Nayla Smith
This is awesome! So glad you're here ♥
3 months ago
Pro
Caleb Royce Lummer
@Arno Wendorff ^ dopeness! welcome, Arno
3 months ago
Props for hand coding it to be responsive in all resolutions, that's a task I know. @media queries or just a liquid layout?
Btw welcome to dribbble!
3 months ago
@Mike DeLeon I'm using media queries for this as liquid layouts have their limitations. Changing font-size and switching out some of the backgrounds helps a lot in making it look good on every device. I don't know if its possible to make a site that looks good all the way from 200px to 4000px wide with a liquid layout.
Another thing I'm doing with the media queries is switching out the thumbnails depending on screen size.
3 months ago
@Arno Wendorff Yeah definitely, media queries are the way to go. Really once you build a solid framework for yourself, its easier then building a mobile dedicated version (m.yoursite.com).
A good trick i've learned with images, in your case thumbnails, is to set the img to max-width of 100% and a height of auto.
By doing that your images automatically resize with the container, and eliminate the need for new images at different resolutions.
3 months ago
@Mike DeLeon I do like the trick with having the images resize with the container. I'm sure I will use it with images elsewhere but I'm concerned about using up too many resources on phones if I use it for everything. For thumbnails for example I can probably save about 50kb per image and the processing power required to resize them (and with that battery life). I think its worth it for mobile users.
3 months ago