{"id":6007,"date":"2020-09-30T11:12:05","date_gmt":"2020-09-30T09:12:05","guid":{"rendered":"https:\/\/www.sp-studio.de\/?p=6007"},"modified":"2025-07-29T15:04:53","modified_gmt":"2025-07-29T14:04:53","slug":"new-sp-studio-mobile-version","status":"publish","type":"post","link":"https:\/\/www.sp-studio.de\/w\/new-sp-studio-mobile-version\/","title":{"rendered":"New SP-Studio: mobile version"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook-300x300.jpg\" alt=\"\" width=\"300\" height=\"300\" class=\"alignright size-medium wp-image-6026\" srcset=\"https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook-300x300.jpg 300w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook-150x150.jpg 150w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook-624x624.jpg 624w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook.jpg 700w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><strong style=\"color:red\">\u26a0 This is an old blog entry from 2020. The SP-Studio mobile version is released by now. You can use it by simply visiting <a href=\"https:\/\/sp-studio.de\" rel=\"noopener\" target=\"_blank\">sp-studio.de<\/a> in your mobile browser (no app store needed).<\/strong><\/p>\n<p>Today I want to show you the new (and very likely final ;)) design of the new SP-Studio&#8217;s mobile version. I already showed this to my Patreon supporters and in my Twitch livestream last weekend, but now it&#8217;s finally time to share some screenshots in this blog as well. So let&#8217;s have a look at what Lars developed for us, because I can&#8217;t wait to show this to all you!<br \/>\n<strong>Please remember: This is work in progress.<\/strong> 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.<\/p>\n<p><!--more-->You might remember my <a href=\"http:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/screen_sp-sremake01.jpg\" target=\"_blank\" rel=\"noopener\">first layouts<\/a> 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&#8217;t be able to afford a programmer to code different versions. But as I explained in my <a href=\"https:\/\/www.sp-studio.de\/news-about-the-new-sp-studio\/\">last blog post<\/a> Lars offered help with the software development in React &#8211; and he created a way better mobile version than I hoped for!<br \/>\n<a href=\"http:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook1.jpg\" title=\"main category menu &#038; item selection\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook1-785x628.jpg\" alt=\"\" width=\"604\" height=\"483\" class=\"aligncenter size-large wp-image-6009\" title=\"main category menu &#038; item selection\" srcset=\"https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook1-785x628.jpg 785w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook1-300x240.jpg 300w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook1-768x614.jpg 768w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook1-624x499.jpg 624w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook1.jpg 1250w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/a><br \/>\nA big change is the <strong>vertical design<\/strong>, 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.<br \/>\nYou might wonder: <strong>How is the item menu supposed to work?<\/strong> It would have been difficult to tap at a small item, so we changed it completely. Now these little &#8220;options&#8221; 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,&#8230;). The options are not ready yet so I did not include a screenshot yet. But you don&#8217;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 <strong>list of all included items<\/strong> 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.<br \/>\n<a href=\"http:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook2.jpg\" title=\"backgrounds &#038; list of included items\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook2-785x628.jpg\" alt=\"\" width=\"604\" height=\"483\" class=\"aligncenter size-large wp-image-6010\" title=\"backgrounds &#038; list of included items\" srcset=\"https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook2-785x628.jpg 785w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook2-300x240.jpg 300w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook2-768x614.jpg 768w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook2-624x499.jpg 624w, https:\/\/www.sp-studio.de\/w\/wp-content\/uploads\/blog_sp-studio-remake_firstlook2.jpg 1250w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/a><br \/>\n<strong>How about saving your artwork?<\/strong> 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.<br \/>\nThere are two more buttons in the main menu. The one on the left gives you access to the different areas of the <strong>SP-Studio website<\/strong> (blog, contests, forum,&#8230;). So there is no need to scroll the mobile website, everything has its place. The icon on the right leads to <strong>information<\/strong> 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 <strong>two supported languages<\/strong>, but more might come later if I find native speakers who want to help with the translation.<br \/>\nEverything 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 <strong>Progressive Web App<\/strong> as well. Then it would even run offline on your mobile device.<\/p>\n<p>That&#8217;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. \ud83d\ude42 Things are looking good that the new SP-Studio will launch around the end of the year when the Flash version will stop working.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s have a look at the design of the new SP-Studio&#8217;s mobile version. A lot of it is already working and there are some exciting features to show.<\/p>\n","protected":false},"author":1,"featured_media":6026,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[29,28,25],"class_list":["post-6007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-behind-the-scenes","tag-making-of","tag-new-functions","tag-relaunch-2020"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/posts\/6007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/comments?post=6007"}],"version-history":[{"count":5,"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/posts\/6007\/revisions"}],"predecessor-version":[{"id":6484,"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/posts\/6007\/revisions\/6484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/media\/6026"}],"wp:attachment":[{"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/media?parent=6007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/categories?post=6007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sp-studio.de\/w\/wp-json\/wp\/v2\/tags?post=6007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}