Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other CodePen observations and experiences on mobile

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #241820
    Beverleyh
    Participant

    Hi @chriscoyier

    I thought you’d like some feedback about my experiences of CodePen on mobile, by way of helping you improve the service further.

    I use mobile (iPhone 5S) a fair bit when I browse the forum, and for the most-part, everything is fine and dandy. However, this morning I was stopped dead in my tracks when I tried to fork a CodePen in order to offer help to another member.

    This large popup appeared on my screen: http://fofwebdesign.co.uk/template/_testing/test/images/codepen/IMG_0462.PNG

    I couldn’t really see much of it although I surmised that it was a form to sign up for a free CodePen account. I tried to move the form in order to read it’s instructions – I couldn’t.

    So, I flipped my screen to landscape and tried again: http://fofwebdesign.co.uk/template/_testing/test/images/codepen/IMG_0463.PNG

    Now I could definitely see that it was a sign-up or login form, except I couldn’t scroll the form in order to do either.

    I tapped around for a bit and worked out that if I landed a successful tap in the super-skinny sliver of dark grey at the very top of the form, them I could dismiss it, but it inhibited me from achieving my goal of creating a fork. I also could not sign up for an account or log in if I had one.

    So, I thought I’d try a different route – I tried to copy the contents of the CSS and HTML pane to paste them into another online code playground (more on this later) which is where I hit another problem; It was impossible to ‘Select All’. I could select all of what was visible (within whichever pane) on my screen (not much on mobile) but everything outside of the visible area in the HTML/CSS pane was ignored, resulting in short and incomplete snippets that I couldn’t use elsewhere.

    My dilemma was to struggle with copy & paste in an effort to jigsaw a larger code block back together, OR, close CodePen entirely. I chose the latter.

    Stuck, frustrated, unable to achieve my goal. I was ultimately prevented from giving help and had to lose my edited CodePen.

    I’ve been in this spot a few times before on mobile — where I can and want to offer help in the forums (I’ve been teased by a CodePen and know the solution) — and I end up going to JSBin, because I find it easier to use at that moment. Don’t get me wrong, CodePen is great on desktop and tablet, but during the times that I don’t have those devices handy, I’m left to use my mobile, and JSBin is the only platform that enables me to do live code edits with minimal hassle.

    I’ll list the reasons why I find JSBin more user-friendly on mobile (how and why I use this alternative platform) in the hope that you can use these observations in possible future CodePen updates;

    • JSBin presents the full desktop interface. Yes, this goes against the grain of the responsive world as we’ve come to expect it, but when editing code, it makes it easier to see the big picture and I can zoom in to make edits in whatever pane I need to.
    • I can easily dismiss/close the panes I don’t need. CodePen only allows me to do this on larger screens.
    • I can drag the dividing walls to change pane width in order to check the effect of media queries on HTML output at any custom breakpoint. There are only 3 size/scale presets in CodePen.
    • Easier to fork (currently unable to do this on CodePen) and share.

    Another observation about CodePen on iPhone 5S: When typing edits, the panes intermittently refresh and cause form focus to be lost. I have to keep tapping back into the panes to type again. This behaviour seems to have improved in recent weeks because there was a time when I could only type a few characters at a time before un-focus happened again. It is still present to some degree though. This was my initial reason for trying out other code platforms and learning that JSBin provided the most user-friendly mobile experience for me.

    That’s about it for now.

    No criticism – just my thoughts and user experiences :)

    Hope you can use them.

    #241875
    Chris Coyier
    Keymaster

    Thank you very much!

    This is a straight up bug, so I ported it over there:
    https://github.com/CodePen/CodePen-Bug-Reporting-Only/issues/245

    #241877
    Beverleyh
    Participant

    Thanks Chris. I should have known there’d be an official bug report system. I will keep that in mind in case I ever need it in the future.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.