How to build an iphone website

By Dugul | 29.03.2021

how to build an iphone website

10 Best iPad & iPhone Website Builder Apps 2020

Tutorial: Building a website for the iPhone Setting up your page. Just like any other web browser, Safari needs all the usual html code at the top and bottom of the Laying out the content. Before we get into the clever javascript and CSS we need to get the content in place and set the Onto the. Apr 29,  · Download Universe: odishahaalchaal.com the Universe app, you're able to elevate your brand and create a website in a matter of minutes

This story appears in the October issue of. Subscribe ». Weebly broke ground in when it launched a powerful free program that makes it easy for entrepreneurs and others to build websites without any coding or blogging knowledge. But this past How to become a registrar uk, the company did something few thought was possible: It introduced an eponymous iOS app that allows mobile users to update their content, add photos and images, moderate comments, monitor stats and even build an entire site or blog right from their iPhones.

And it's free. The app lets them respond to customers and comments right away," says David Rusenko, who founded Weebly with his Penn State college buddies Dan Veltri and Chris Fanini. Rusenko is mum how to write bubble letters exactly how many of Weebly's roughly 13 million-plus users have downloaded the mobile app, but he says it was among the top three productivity offerings on the iTunes App Store for a week and a half after it was first released.

An updated version, released in Julyhas a five-star average user rating in the App Store. She downloaded it in June and uses it for her own website to moderate and respond to blog comments from readers when she's away from her desk. Users who have created online forms on Weebly. In addition to allowing for rapid responsiveness, the app also offers users the ability to post how to polish and seal concrete countertops entries to Facebook and Twitter with one click.

The downside: It's not how to build an iphone website for Android users. Weebly makes money from premium versions of its website-building package, which offer extra multimedia functions and better support. Rusenko pegs small businesses percent of which still don't have websites, according to research by Google--as Weebly's target market.

Entrepreneurs require more than just money, which is why we aim to empower you, as well as act as a catalyst for value creation. Latest Video Start A Business. Insider Technology. Next Article link. Image credit: Shutterstock. Gwen Moran. Magazine Contributor. October 30, 3 min read. More from Entrepreneur. Entrepreneur Select: A Fund For Entrepreneurs, By Entrepreneurs Entrepreneurs require more than just money, which is why we aim to empower you, as well as act as a catalyst for value creation.

Learn More. Get A Quote. Discover a better way to hire freelancers. From business to marketing, sales, finance, design, technology, and more, we have the freelancers you need to tackle your most important work and projects, on-demand. Latest on Entrepreneur. Technology This is the Chinese short video app that wants to fight TikTok. Technology Your Company is a Castle.

You should also read…

Well, we did promise we'd get around to a tutorial eventually, so here you have it! The Engage Interactive school for all things internet proudly presents: How to build a website with orientation specific content especially for the iPhone! This tutorial will cover the basic setup and creation of a web page for the iPhone that will detect and change the content based on the phones orientation. You will need some way of viewing your files on the iPhone or you wont see the fruits of your labour.

We'd suggest uploading it to a location on the web and browsing to it on the phone. Other than that everything else can be done with any old text editor. Anyway, enough chat - Onward to the tutorial! I completely forgot to mention how to detect the iPhone on your normal website and send it to your iPhone version. I've added the script here. Just like any other web browser, Safari needs all the usual html code at the top and bottom of the page and there's still no harm in throwing a few keywords in for good measure as Google will still be able to spider your content.

In addition there are also some iPhone specific meta tags you can use to control the way content is rendered. I have an example of what the code in the head tag should look like below.

If you look at lines 3 , 4 and 6 you'll see a few lines you probably haven't come across before. Line 3 tells Safari that the viewport should be the same size as the iPhone screen. Usually the iPhone's screen acts like a window and the web page is the background scenery.

Setting this line forces the content to always fit the window. The next part of that line sets the scale of the page. Because we are making this website specifically for the iPhone's small screen we don't need to have the page zoomed in.

Line 4 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in. You do not need to add the shine or corners as the iPhone will do that for you. Line 6 is part of the orientation detection.

Safari simply executes a javascript function each time you turn the phone. This however doesn't have any way of acting upon which way the phone is being held.

The javascript has to take care of that aspect. More on that later. For more options on the viewport check out this page you need to be registered with the apple developer program. Before we get into the clever javascript and CSS we need to get the content in place and set the initial styles that will be default so that you can't see everything at once before the site has finished loading. First, we need a wrapper that will contain all the content on the page.

This is very important as the javascript will be changing the class of this wrapper which will effect a lot of elements inside of it. Next, I've put in a logo. This is optional obviously, but it's an example of content that will always be visible regardless of the orientation should you want it to be. Lastly, we have all the content areas.

Although at the moment the iPhone only supports left, right and upright orientations there is a chance that it might eventually support a flipped over orientation holding the phone upside down so I've put it in just in case. Each of these content areas are unique so we may as well use ID's rather than classes. Leave that to the content within them.

The CSS is very important in switching the content. Using classes and ID's we can make sure that only the correct content is being displayed. First though, we need to set up the page so that none of the iPhone's default styles will interfere. The most important part in that is the -webkit-text-size-adjust:none; This line stops Safari from adjusting the text size when you rotate the screen.

By default it assumes that holding the iPhone on it's side requires larger text size - which is true in most cases as the sites become more zoomed out - but in this case we are fitting the website to the screen so it's not necessary. These styles simply set the colours and font sizes for a few elements and also style the logo and page wrapper.

You may have noticed, I've used the font Helvetica. It's already on the iPhone and it's a great font so I might as well. No more Ariel! It's the far better alternative to.

The following CSS controls which containers are currently on display and which are hidden which will be controlled by the javascript we'll get to in a bit.

First we need to hide everything by default. When the page loads this will ensure that you don't get an ugly flash of content before it is hidden. Next the width of the containers is specified. If you're building a site that fits the screen exactly you might want to put some heights in here.

Finally the clever bit well, not that clever really. These classes are going to be set by the javascript. It would be possible to do it all with javascript, however I built the Engage site with several little tricks in place that needed the classes to apply certain styles.

This is the genuinely clever bit! Now I must admit, I didn't write all of this myself, various parts have come from numerous examples and samples from around the web. I've listed a few of the resources I used at the end of this article. The concept however is a genuine Engage Interactive exclusive! This first line initialises the orientation change. Without this, the orientation wouldn't be detected on load, only on the first time it is changed.

This is the function that actually makes the changes to the page that allow the different content to be displayed. Lets go over it step by step:. There is also one more little trick we've used to make the most out of the iPhone's nice big screen. This javascipt waits until the page has loaded and then scrolls to the named element. This hides the location bar straight away rather than having to scroll it manually off the screen.

Handy if you want to make a page that fits the iPhone exactly. To view the finished example head to www. It wont work on your computer obviously, but you can still have a look at all the code. So that was the technical side of building a website for the iPhone, you'll have to come up with creative stuff yourselves. I've listed a few helpful pages and resources that should help you on your way below. Before you embark on your own iPhone website, here are a few things I had to keep reminding myself:.

Apple has kindly supplied a whole host of information for people to use when they embark on a web application for the iphone. Hidden away under many layers helpful hints though I've found the most important pages which you have to register to use :.

These links worked at the time of writing, but as I've discovered over the last few months, Apple seem to insist on reorganising everything on what seems to be a weekly basis. So what is there one week might be mysteriously moved the next.

They have a pretty good search though so you shouldn't have much trouble re-discovering the pages linked above. And absolutely nothing to do with Apple themselves, I found this little gem. A great source of examples for Safaris abilities. My favourite being the ability to round corners with a simple line of CSS!

I hope you found this little tutorial useful, and don't forget to post a comment with a link to your own creation, we love to hear from you! This little bit of script will detect the iPhone or iPod touch and send it on it's merry way to whatever page you wish.

Will oversees all aspects of user experience from prototyping through to production. With a keen eye for detail and a focus on movement and animation, Will ensures that an Engage product feels and acts as good as it looks!

By using this site you are agreeing to our cookie policy. Setting up your page Just like any other web browser, Safari needs all the usual html code at the top and bottom of the page and there's still no harm in throwing a few keywords in for good measure as Google will still be able to spider your content.

Laying out the content Before we get into the clever javascript and CSS we need to get the content in place and set the initial styles that will be default so that you can't see everything at once before the site has finished loading. It's the far better alternative to The complicated CSS The following CSS controls which containers are currently on display and which are hidden which will be controlled by the javascript we'll get to in a bit.

The grand finale: Orientation Detection and another useful trick This is the genuinely clever bit! Lets go over it step by step: Line 1 names the function which is run each time the phone is turned. This was what we enabled earlier in the body tag. From there the CSS takes over and styles the page accordingly.

Clever huh? Right click and save as on the following files to download the source. The HTML: index. Things to remember Before you embark on your own iPhone website, here are a few things I had to keep reminding myself: Every single iPhone is the same. If it works on one, it works on all the others. How nice it is to not have to bug check! You can design your site to fit pixel perfectly to the width and height. On a related note; there is no way of increasing text size, so feel free to use pixel sizes instead of em's or percentages.

3 thoughts on “How to build an iphone website

  1. Zukora

    Just got the app, now I gotta learn how to use it

    Reply
  2. Gucage

    Nord vpn should have used todays sponsor, expressVPN.

    Reply

Add a comment

Your email will not be published. Required fields are marked *