some advice on images for mobile website (responcive design)

[akurtula]

Hi

I am currently designing a portfolio website with wordpress. The idea is that it’s going to be all in one page, and use js to scroll up and down.

After coding the whole thing in fixed width, I thought of the responsive design. I started reading and I think I got the idea. Before doing anything else I am going back to photoshop and re-editing the design for mobile – to quickly see what I want for mobile (almost mobile first, at least on photoshop, kind of ignoring what I already have)

In my current design I display my work examples in slideshow. I am using this plugin https://css-tricks.com/3412-anythingslider-jquery-plugin/. My first instinct is to remove these slideshows when for mobile and use only one image for each work example. is that good idea?

Also I have seen some responsive design tutorials which use the same images for all resolutions and then scale them down with css. Should I have different (sized) images for mobile? for example

@media screen and (max-device-width: 480px) {

.img {

background:url(site-small.jpg)

}

}

@media screen and (max-device-width: 600px) {

.img {

background:url(site-large.jpg)

}

}

As I said my portfolio site is all in one page, and I use the jquery ScrollTo() feature to get this effect on navigation http://two24studios.com/. For mobile version, should I remove that or not?

I have some decorative images which simply look impressive and adds very little more to the interaction, would it be better if I remove them when screen gets smaller. And on this note (though I didn’t look into it yet) if I what to remove some content when on small screen, do I only use display:none or is there a way to prevent the content from loading for no reason.

I am using one embedded font for the design, is it ok to keep that for the mobile version or is there any restriction on that, such as do mobile browsers support @font-face embedding.

And the very final thing, I am planing to create a new page within wordpress, and call it something like “playground” which you could say it would be like the download page above, but of course Chris has that to help us as well, whereas I would have it just to show off my skills. should I include that in the mobile version or not. As for example if we take the download page here, can a mobile use take advantage of that?

I hope you can help me with any of these uncertainties that I have

Thanks

[Author]

Posts