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!
Ethan James featured bold colors and free fonts that can be completely customized to fit your brand. INCLUDES: Stylish homepage, about page, information page, and 3 gallery pages. Custom blog page with featured posts, most recent posts and a featured categories section. Design by Crystal Lee Design View Ethan James View all designs by Crystal […]
Josephine is full of colorful collages that capture the attention of everyone, for mobile and desktop viewers alike. Display your images in this gorgeous large grid format with a static sidebar to contain your menu, ensuring your visitors can always navigate with ease. Design by The Autumn Rabbit View Josephine View all designs by The […]
Part of the Luxe Brand’s debut collection of Showit site designs, No. 001 [Timeless] is effortlessly timeless and beautifully refined. Featuring SEVEN unique page templates, No. 001 [Timeless] makes it simple to add your own text and photography. Or, get creative and make your own pages from scratch! Custom fonts and colors are professionally selected […]
Create a Free Account
No credit card required