NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
Welcome to Series 2! Now you're well versed in the planning and processes of a website design pro, your ready to dive in and get your hands dirty. This series is entirely practical and is made up of a few relatively quick steps to configure your brand's styles to transform your website in moments.
ADDING YOUR LOGO
Simply upload your logo to get started.
Before uploading, remove any background colours from your logo image (e.g. white background). You can do this by saving the image as a png with a transparent background.
Before uploading, size your image dimensions. If your logo is going in the top left, consider a rectangle around 400x100px (no wider). We'll do the rest to make it work on all devices.
Toggle padding 'On' and 'Off' as you please. You can add some padding to your logo. In the Header, this applies a 16px padding around the outside of your logo. However, many designers like to set their own padding in the actual logo image before uploading to make it just right.
The MOBLE Logos Area showing the different types of logo, padding option, and preview.
ADD YOUR FAVICON
Your Favicon is the small icon that is often seen in the browsers address bar or next to the list of bookmarks.
Size your image dimensions before uploading. Your favicon should be a square, ideally, aim for either 16px or 32px though MOBLE will automatically optimise the file size for you.
Consider removing any background colours from your favicon image (e.g. white background). You can do this by saving the image as a png with a transparent background.
Favicons for DirtyFeet.com.au & MOBLE.com.
ADDING YOUR MOBILE LOGO
Given that mobile screens are quite different from desktop and tablet screens, you might wish to have a different version of your logo for mobile devices. Perhaps a square icon, or perhaps even just the logo icon without the business name.
If you do not add a Mobile Logo your Logo will show on mobile by default.
The mobile logo on DirtyFeet is in the top right, it actually uses the same logo as the desktop. Interesting we made a special icon to load the Drawer Menu from the top of the screen.
ADDING YOUR EMAIL NOTIFICATION LOGO
When your users complete a form, and you elect to send them an automatic email notification, a logo will display in the body of your email. This is your 'Email Logo' and you upload it here.
You can upload a regularly sized logo,
or, to create a banner look, you can upload a banner image that is 600px wide.
ADDING YOUR APPLE TOUCH ICON
Often you might like to save your website Home page, or perhaps your Enquiries page to your mobile phone home screen. The 'Apple Touch Icon' is the icon is the icon that will appear on your iPhones Home Screen.
HOW TO SAVE A WEB PAGE TO YOUR IPHONE HOME SCREEN
Open the web page on your phone
Click the 'Upload or Share' icon at the bottom of the screen
Click the 'Add to Home Screen' icon
The web page will now be shown on your Home Screen with you Apple Touch Icon
This is nice branding should your website visitors wish to have your website feel like an App on their phone.
Often clients ask MOBLE to develop a pop up that appears when users visit your web pages, to encourage them to add your website to their Home Screen.
Whatever the size of your website, all MOBLE Plans come complete all the features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!
Do it yourself or Hire a Pro! We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.