It's here. Available to the public and ready to download directly from the Mothership. The new Showit update adds some amazing features that I shared in our First Look and on Showit Live. After designing mobile sites for some of you awesome Showiteers, here are a few sizing tips to get you started!
Design sizes that work for both Tablets and Phones
Showit's default sizing is designed for iPhone users in mind, and starts at 1500px long by 900px wide. This is a great place to start for many mobile users, and since it's the default you don't need to change a thing. One thing to note, using these dimensions means that when you flip an iPad sideways you will start to get gutters or bars (usually the same as your background color) appearing on the sides. For this reason our preferred dimensions for our projects starts at 1900 long x 1040 wide. We have found this to work extremely well as a starting point to cover both mobile phone platforms and tablets. When you are setting up your Stylegroup you will want to make sure you are on the Stylegroup level, and then make the changes under Page Dimensions on the right hand side. When you need a page(s) that is longer than another, you will need to create a new Stylegroup and increase or decrease the page length as needed. It's often easier to duplicate your current Stylegroup (to keep the menu, etc) and then delete the pages you don't need, and re-size for the ones your are working on! An important note to keep in mind is that the shorter your pages are, the faster your site will load. So be clear on your message, goals for mobile users, and keep your mobile site focused. We have the ability to cater to both mobile and desktop visitors in unique ways, so coping your desktop site in it's entirety is rarely the best solution.
It's OK to have less pages on your mobile site!
Don't expect to use 14pt font on your desktop site, and use the same size for mobile. The best thing you can do with text is re-write it to make it more concise, use less of it, and make it more visible (bigger font) on your mobile device. Case Study: Amy & Jordan Demos For Amy and Jordan's site we decided to get rid of their top navigation in the traditional sense because there was too much for their mobile site and it wouldn't help the flow. If you visit their site (amyandjordan.com) the navigation text they use is at 11pt Times International. It looks fantastic and gives them the room they need for their navigation options! However, for Jordan and Amy's mobile site, the minimum font size we used was 34pt on Times International. We did this using our preferred page width of 1040px wide. Compare the two sites by visiting their website on your mobile device! It's often hard to nail down a good size because each font is different, and every page dimension layout will adjust that effect. If we would have used a different font, 34pt may have been to small still! If we used the default Showit page dimension of 900px wide, it would have looked a bit big, so make sure to spend the thought going into your sizing choices- it will save you hours! Recap: Getting Started on Your Mobile Site. There is a lot of information here, but I will break it down into our standard starting settings for each mobile conversion or site build.
We are super excited to see what you guys are creating with this new release. If you have questions feel free to tag me (Jason Toevs) in the Showiteer group on Facebook! I can't wait to see your new creations! Keep an eye out for more on mobile design articles here on Showiteer.com!
Antiquarian was built for fine art photographers — inspired by shooting film and all things vintage, this site design exemplifies a classic layout that’s perfect for displaying your beautiful images where it matters most — on the home page. With three different gallery layouts to choose from and clean but unique ‘About’ and ‘Details’ pages, […]
Hillcrest is a contemporary website for bold and fun photographers. Geometry, asymmetry, a complementary color scheme, and plenty of negative space will catch the eye of visitors who are fun and creative like you. This design is anything but boring! Hillcrest contains multiple pages, is easily customizable, and includes a matching blog and corresponding mobile […]
Have you be able to step away from your computer long enough to notice it’s July already? If you have to edit photos, you have to edit photos. However, there is no reason to add to your time indoors and becoming a slave to social media. This month you have to promise yourself that you […]
Create a Free Account
No credit card required