Simple responsive website tutorial for iPhone

I’m here again with a wonderful tutorial,

Sample responsive website tutorial for iPhone

What I also like to call it is as a Responsive web development tutorial for the Intermediates.

Responsive website tutorial for iphone - PepFry

If you had gone through my last post, I had put forth a tutorial on Basics of responsive web design & development. Hope you got to grab a nice piece of information there.

Here I’ll be very specific with the topic & you’ll enjoy a lot.

 It’s not Enjoy while you learn. Instead it’s Learn something while you enjoy Learning

So, that’s that – I’ll take you through the flow of this Post.

  1. You’ll be taken deeply into Responsive technique, like mandatory things to be incorporated on your Responsive HTML pages for them to respond to the conditions put-forth.
  2. You’ll see that I will be taking you through a sample Web Page which responds to conditions
  3. You’ll get complete code of the tutorial zipped. You can download them & work on!

Hope you had gone through my last post & you might have come across the major difference with the Layout when Responsive & when it’s not responsive. So, that was the overview of what is what & where.

Once again to remind you – I would like to take you through deeply into the layout structures, different kinds of them, how they work in real world etc like things. So, I want you carefully read along this post at least once, so that you’ll understand something before you workout practically. I’ll show you examples for each of the scenarios.

Let me introduce you the main key that plays an important role in making the Device respond to queries that you write & want that particular Styles to be applied.

If you are targeting devices like Mobile and Tablets, then it’s imperative that you should not forget to include the <Meta> tag containing viewport. Below is what I was talking about.:

You will need to add this in the <head> section just below the <title> tag.

Again, the above tag should be put within the <Head></Head> tag in you HTML file. Now, you might be thinking what the use of the Meta tag then, when the web page is already responding to the queries when I re-size my browser window, the same will be on iPhone also. What is the use of Meta tag viewport then?

I’ll explain you what it does.

1. name=”viewport”: Viewport was introduced as a Meta tag by Apple in mobile Safari (Safari browser on iPhone) – in order to allow web developers build their mobile websites to define the viewable area where their sites should appear in the browser.

Here you go, think of Desktop & you re-size the browser – then, the view port is the region that you see on the browser after you re-size. If you stretch it back to the initial stage as the browser was in the beginning – then, you see much space – that is again viewable area. Hope I made it clear!

2. content=”width=device-width”: This tells the browser to use the width of the device(iPhone/iPad etc) as the width of the viewport. So, instead of assigning a width that we take assuming – we will give a chance to the Device itself to choose its allowed space & assign.

3. initial-scale=1.0: This indicates the zoom level at which the user initially sees the Web Page. This makes the web page sit within the allowed space & show you the content at a point that you are able to view clearly.

Below are screenshots from iPhone, where it shows you one with initial scale defined to 1.0 & the other with no initial scale defined.

Initial scale defined to 1.0

Responsive website tutorial for iphone - PepFry

Initial scale not defined

Responsive website tutorial for iphone - PepFry

If you want your user’s not to scale it furthermore, i.e. if you do not want them to zoom into the page – then, you can limit them with an additional attribute “user-scalable=no” to disable the pinch-to-zoom feature.

Here you go:

Here are some of the Pixel widths of the Devices when their orientations change:

I’ll update you on other Devices in near future.

Now, I’d like to show you a  fully working example of responsive web page with all the points that I had explained in my last Post as well as what I have just explained you above.

I will be working on the same template that I had posted in my previous Post to show as examples of templates when Responsive & when not.

Here we go,

First, we have to clearly mark up our HTML keeping in mind that we should be using the same markup for the Responsive version as well. Like, what if when Responsive I want the sidebar come down instead towards the right. So & so.

Here is what I’ve written:

Now that, we have put up a pretty decent Markup – we’ll focus on what & how the styles are laid out respectively both for Non-Responsive & Responsive version.

The CSS that I’m gonna show you is currently written internally (Internal CSS).

Here is what the CSS for Non-Responsive version would look like:

Here is what the styles for Responsive version would look like:

So Guys, that was what we were looking for, I have segregated thing to make  your life easy!

Now I’ll break the code & explain you step by step.

First, I’ll take you through the Markup, So that you’ll be able to understand how things goes around when I start explaining CSS.

So, here we go,

Now, I’ll take you through the Styles written for the Markup when not Responsive. Read properly, this is only when not Responsive. I’ll consider only Important part of the Styles.

Clear: left/right/both is used after any Floated Elements in the markup been used. So that the Element after the floated Element clears itself from following the Floating Elements. HTML Elements tends to float behind the forcefully Floated Elements if clear property is not assigned to the succeeding Element. Hope that clears the doubt.

Now, I’ll take you through the Styles written for the Markup to respond when it is Responsive.

So, If you go through the comments, you might come across the difference when Non-Responsive & when Responsive.

Guys, follow the above steps carefully & understand what is what, where is it used, why should it be used? ask your self the question & try to work around this small Responsive Project and let me know if ever you didn’t understand any thing properly or If I wasn’t that clear in reaching you – I’m always ready to help you out with my existing knowledge.

Here is the fully working code of this tutorial [Responsive website tutorial for iphone] zipped – Simple Responsive Website – please click the below link.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

2 thoughts on “Simple responsive website tutorial for iPhone

  1. Hi Sumesh,

    You have created the tutorial on responsive design using DIV. Can you write a similar post using tables as well. Thank you in advance.

    • Sumesh M.S March 3, 2014 at 8:37 am - Reply Author

      Hi Joe,

      Sure, I can write a tutorial on simple responsive website using tables.

      Thanks for your suggestion.

      Thanks!
      Sumesh M.S

Leave a Reply to Joe Cancel reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">