Question

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 http://css-tricks.com/3412-anythingslider-jquery-plugin/. my first instinct is to remove these slideshows when for mobile and use only one image for one each work. is that good idea?

Also I 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 would have a list of demos on html5, CSS3 and the like just to show off my skills. should I include that in the mobile version or not. As I think a mobile user can’t really take advantage of that?

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

Answer 1

Mobile users have more limited bandwidth and slower connection speeds. That’s something you want to keep in mind when considering how quickly the page will load as that can greatly impact user experience.

I would avoid using the slideshow for mobile — or at least doing a slideshow that uses smaller images appropriate to the screen size. You don’t need to download an image that’s 720px wide when you’re on a 360px wide screen, for example.

Scroll to will probably work fine. One consideration you may want to take is to use touch events rather than click events if you’re using JavaScript for the “scrollTo” functionality. (A presentation on touch events.)

As for your playground page, that will depend entirely which demos you’re planning to put there. I’d test out your examples on mobile to see if they make sense and function properly there; if they do, then display them. If not, either improve them to work on mobile or don’t show them on mobile.