Hi. I have 2 sites operating that I imported from the web into sparkle and they seem to work well, originally designed in adobe Dream Weaver. I am now putting up a page from scratch in sparkle. The advice I had was to design it for phone (device) and the pc / iPad will sort itself out.
I only have a place saver page up at the moment and I’m a little unhappy between devices.
the site: ogsoundz.com.
Looks ok on phone, scrunched on pc and hmm on iPad.
When I select each device and change them, the changes seem to flow through so I have to compromise. What advice do you have that I might improve the looks.
Ok I have just had another look and it seems to be better than before … perhaps I didn’t refresh. A lot of grey shows in the phone version but I had to add that because the iPad had white at the bottom. Do i need the initial layout block to be full size and everything else on top? How do I know where the bottom of the page is? All these questions … truly a newbe in sparkle!!! Warren
The choice of whether you design for large or small screens first is really dictated by where you view your primary audience coming from. If you think they are most likely to be heading to your site from mobile devices, then design your site around that device size and work your way up. If, however, you think most of your audience are more likely to see your site on desktop. laptop or tablets, do things the other way around.
In many respects, a site designed for desktop/laptop will display just fine on most tablets, but you may like to make some tweaks on a tablet version of the site to account for the fact these are touch screen devices - so you may want to have a different menu (maybe a hamburger menu) and have larger buttons so they are more easily targeted by ‘stubby fingers’. The general idea is to make the site work like the device its being displayed on.
Whichever way round you decide to work, the same general principles apply - complete one version of the site and THEN move on to creating a scaled versions for other devices. Breaking your page down into layout blocks can help when it comes to resizing and repositioning things on other devices. Layout blocks can be moved up and down the page very easily and all the elements within the block will move with the block. Work on one layout block at a time, setting new font sizes, resizing and rearranging page elements to better suit the device.
I generally start work on a desktop site and get everything into layout blocks. Then I will switch to the mobile device layout and initially have the zoom level set to ‘Fit Entire Page’. Then extend the size of the page by a significant amount by dragging the size handle at the bottom of the canvas - this gives plenty of room to work with. Then drag all but the topmost layout block down the page to give yourself space to work with on your first layout block. This is when you can zoom in to start resizing/rearranging. When your first layout block has been changed, go find the second layout block - move it up the page to under the first block, and start working on that one.
Working in blocks like this makes it very simple to readjust your page to suit different device sizes. Just remember to not add or delete any elements already on the page - that would make changes across all devices. IF you have an element that you don’t want shown on a particular device, just have it not SHOW on that device.
It’s really all about having a good working system. The first priority is to design a really good looking site first and foremost. Use colours and images wisely, Use subtle animations if you want to incorporate movement, and finish up one complete version of your site before moving onto to other device sizes.
Layout blocks have always caused me stomach ache in the past, as not everything worked as I had imagined.
When you now say “everything in layout blocks” does that also include a header with a menu (stick to top) and a footer?
Do you still see any problems that might be solved with a new release?
I have watched one of your new tutorials (animation) and I think it is very well done. Especially that you took up my suggestion from earlier and first present the final result and then the implementation step by step.
A layout block is very similar to grouping objects - the block acts as a container for anything you place inside of it. That can include images, boxes, navigation - you name it - you can add it to a layout block.
In your particular use-case - a header with a menu, you would typically create that as a an independent layout block - say separate from a hero section which would typically be the next block on the page. Having created the layout block you can have it stick to the page top by selecting the block and checking the ‘custom scrolling’ option in the style panel. This will reveal the option to ‘stick to page top’. That’s all there is to it - it doesn’t matter where on the page that layout block is placed - the moment it hits the top of the screen, it stops moving and the page continues scrolling behind it.
One note: if you create a heading block like this, be sure to move it to the TOP of the layers tree on the left of the screen. This will ensure that it stays above all other elements on the page - ensuring the page scrolls BEHIND it, and not over it.
Thank you. I will work on things when I get to do the next pages. I do understand what you are saying think I’ll have a better understanding as I go along. Warren