Mobile Pages In Web Design Apps

In my previous article I discussed the importance of having some type of mobile friendliness to your websites. It really is a necessity if you want to keep up with the way the web is going and the way people view websites these days. There are several different ways to incorporate mobile friendliness to your site.

 

Options

There are several ways to bring mobileness to your sites. The easiest way, but maybe the most expensive, is to hire someone to do it for you. There are several companies on the web that advertise creating mobile friendly websites. You could just hire one of them to do it.

Or, you can do it with whatever app you are using to do your sites. Most web design apps today have some type of mobile friendly design template included. Lets explore this template idea a little further.

The Apps

I use several different web design apps to do my websites. These days, they all have some type of mobile functionality. Here is what Everweb has to offer:

Everweb offers templates, but it is also works quite well at designing websites from scratch. All of it’s templates offer this 480 pixel wide mobile page. 480 pixels is a standard iPhone in landscape mode, but this mobile page looks pretty good in portrait mode as well.

I use a fun app called Sparkle to do some of my websites. Sparkle takes a little different approach. After you have built your full sized website you can then choose what other sizes in which you wish it to appear:

You can choose Portrait Tablet, Landscape iPhone and Portrait iPhone sizes. The app scales the site down to fit any of these and you can go in and modify stuff to your hearts content.

I also use a longstanding website design app called Freeway Pro. They have recently incorporated mobile page capabilities:

Once your website is designed you can go into various other mobile modes and see what it will look like. Then in these modes you can modify elements to fit that particular page size.

The Pages

So, what does a mobile page look like? There are different ways to do it, depending on your target audience and what you are trying to convey. Here is the mobile site that I do for our local garden club:

You can use the link to go to the regular site to see what it looks like. The mobile page in this case is just a basic place holder. There is a contact form and an email link down below which you cannot see. There is too much content on this website to do mobile pages for each web page, so I just did a place holder page.

Her is the Macessence blog mobile page:

The WordPress template I use for the site has a mobile page, most WordPress templates have mobile pages these days. Pay special attention to the “Menu” at the top of the page. Many mobile pages have a menu like this if they have other mobile pages on their site.

One more thing. The expensive website design apps refer to these various page sizes as “break points”. In other words when someone moves their browser down to say, iPad Portrait size there is a break point in the website design that automatically redraws the page in that format. On and on it goes with various “break points” for various sized screens. It is a cool concept, the programs that I have mentioned kind of do this for you already, not as much control perhaps, but it still works pretty well.

Conclusion

I am by no means a great website or mobile page designer. But just having some type of mobile page up there is half the battle. Here are a couple of websites with information about how to design mobile pages. If you do not have some type of mobile page presence for your website it is high time you did.