New SP-Studio: mobile version

September 30, 2020   42 Replies

Today I want to show you the new (and very likely final ;)) design of the new SP-Studio’s mobile version. I already showed this to my Patreon supporters and in my Twitch livestream last weekend, but now it’s finally time to share some screenshots in this blog as well. So let’s have a look at what Lars developed for us, because I can’t wait to show this to all you!
Please remember: This is work in progress. I like the design very much and many functions are already implemented, but there is still room for changes until launch. For example a new font is very likely to be used. But everything you see in these screenshots is actually running.

You might remember my first layouts from 2018 for a mobile design. Back then my main goal was to make one design work on all devises, just in case I won’t be able to afford a programmer to code different versions. But as I explained in my last blog post Lars offered help with the software development in React – and he created a way better mobile version than I hoped for!

A big change is the vertical design, which is more comfortable for your hands. There will be an improved version for big screens as well, but for now Lars concentrated on the mobile version. While the space on a smartphone is very limited the UI still feels intuitive and lets you move through categories and options smoothly. When you click on the menu button in the center you have instant access to all categories. Each category is devided into 5 subcategories. You can scroll through the item list and tap on an item to add it to your picture.
You might wonder: How is the item menu supposed to work? It would have been difficult to tap at a small item, so we changed it completely. Now these little “options” icons appear on each thumbnail after you added items to your picture. Click on it again (or double click) to access the item options (color changes, moving, flipping,…). The options are not ready yet so I did not include a screenshot yet. But you don’t want to search for the thumbnail of an item if you want to edit it later? No problem. There also is the pencil icon which directly leads to a list of all included items currently in your picture. You can see it in the right screenshot down there. From this list you can easily edit or delete all items in your picture. There also is a button to clear everything if you want to start from scratch.

How about saving your artwork? This is already working, so I can confirm that you will be able to save your picture as an image file to your computer easily. In addition we have a new button, which will give you a link you can send to a friend or save for yourself. With this link you can continue to edit a picture later. It saves the items you included and how you edited their position or colors. I love this new feature and I am sure the SP-Studio visitors will love it as well! Your progress can also be saved automatically with cookies.
There are two more buttons in the main menu. The one on the left gives you access to the different areas of the SP-Studio website (blog, contests, forum,…). So there is no need to scroll the mobile website, everything has its place. The icon on the right leads to information about copyrights or how to use the SP-Studio. This is not included yet, but I can tell you about a special feature Lars included: multiple languages! The new SP-Studio can detect the language of your browser and change accordingly. For launch Englisch and German are the two supported languages, but more might come later if I find native speakers who want to help with the translation.
Everything you just saw works in your web browser. No need for any plugins anymore. But the current plan is to make it work as a Progressive Web App as well. Then it would even run offline on your mobile device.

That’s it for today. Feel free to ask any questions in the comments and give me feedback. After struggling with the Flash problem for nearly 3 years and getting really depressed because of this whole situation I feel super happy now about the progress. Thanks to Lars of course, because I could not have coded this. So I hope you liked what we showed you so far. 🙂 Things are looking good that the new SP-Studio will launch around the end of the year when the Flash version will stop working.

42 thoughts on “New SP-Studio: mobile version”

  11. TheBrosProsYT

    I can translate that im learning spanish
    Spanish
    Esta muy buena página me ayudó a hacer mi personaje y ¿cuándo saldrá más o menos la versión móvil ???
    English
    This very good page helped me to make my character and when will the mobile version more or less come out ???

  22. Janina Post author

    Hve you tried clearing your browser cache as described here?
    Unfortunately I get many reports on mobile lately and we don’t know yet was causes these errors. If you hace access to a computer you could use this until the problem is solved.

  24. Janina Post author

    It worked until about 3 weeks ago. The current loading problems are only because too many visitors try to use it at the same time. It’s because of this TikTok trend.

  27. Janina Post author

    I fixed the loading problems on Monday by adding a CDN (worldwirde server network), and the new stats look good. There aren’t many loading errors anymore.
    So if you still exoerience loadind errors today it is very likely to be a problem with your phone (browser cache / settings?) or internet speed.
    Of course there are still many people trying to visit the website, most of them come fom TikTok. So there always are some of them who have problems. But it is difficult to tell what exactly is the cause for you. So I am sorry, if I cannot give you more help. I can just say that the SP-Studio and server structure work fine at the moment.

    Here’s a tip though: Kkeep in mind that the SP-Studio only has to load many files in the beginning, but after this you don’t need to load anything. So if it takes 3 or 4 minutes at first you can relax afterwards and just keep the app open in the background.

  29. Janina Post author

    It works offline if you keep it open in the background.
    But when you close it, it might try to load the files again and then it needs an internet connection.
    Lars (who coded it) wanted to add an actual offline function, but this is compliacted. So we cannot promise yet when or if it will be included.

  33. klara

    angry , beatrice , why are you commenting janina in the old updates and the coments , wh cant you just comment in the new update , you guys cant stop comenting in the old updates , sigh , sorry jani , i was angry because the people just comment you in the old update , and it mae me mad that they comment you in the old upate

  37. Janina Post author

    Just visit sp-studio.de in your browser. It’s that simple 🙂
    Or since you are already here: Click on the main menu and then “create”.

  39. Shibss

    I don’t know why but when I start to use this in a mobile device it kept on loading and didn’t work when the loading is done

Leave a Reply

Your email address will not be published. Required fields are marked *