<< Stay Connected with FHU | Feeling Like a Real Developer >>

Responsive Web Design

June 10, 2011 8:11 AM

More improvements on the Backchannel App this week! One that I especially like is the addition of responsive web design. Its more than just a web design principle with a fancy name. What responsive web design means is that the App will be displayed differently depending on the size of the area its being viewed in. For example, if it is being viewed on a laptop it will show the full app, but if an iPhone is the device being used a more mobile friendly version will be displayed. The app will have 3 styles: Desktop, iPad, and iPhone.

Its interesting to see how this works. If tech-talk frightens you just skip down to the next paragraph. All of the styling is still in primarilly one stylesheet (other stylesheets are for plugins and such). Responsive web design uses media queries in the CSS to establish parameters for when certain CSS rules should be applied. These queries are related to screen resolution which allows us to target the different mobile devices and style accordingly.

This part of the Backchannel App has been fun for me. When I first heard we would be implementing responsive web design I thought it would be very complicated. Instead, its been suprising to see what all can be done in less than 100 lines of CSS.

E-mail to a friend | Comments (51)

Comments (51) -

Mark 6/10/2011 4:54:33 PM

I like the responsive web design idea. I think that will be a great benefit to have the display in three styles depending on whether you are displaying on Desktop, iPad or iPhone. Backchannel just keeps getting better!

alan dsuza 6/11/2011 6:48:05 AM

Excellent overview, it pointed me out something I didn’t realize before. I should encourage for your wonderful work. I am hoping the same best work from you in the future as well. Thank you for sharing this information with us.

Steve Rice 6/14/2011 10:32:59 PM

Android apps need to change some of this, and then we will have the ultimate benefits, please let me know if you use android, or have plans for any android apps soon,I would very much like some support on this.

Zakary Faithfull | Web Design Alton 7/7/2011 11:36:18 AM

Looks like a fantastic app and I look forward to your future posts on further development! Keep up the good work!

Web Design Studio 7/7/2011 1:22:04 PM

This is my first visit and I have to say this is an excellent blog. I will bookmark this and share on my FB.
As Mark in the first comment, I also like an idea of responsive web design and I think that application is really great.
I totally agree with you when you said that's been surprising to see what all can be done in less than 100 lines of CSS.

titi 7/19/2011 9:36:40 PM

this is my second visit and i have to say this is a perfect blog.thanks for post

St Paul Web Design 8/9/2011 6:58:25 AM

hi, good work. I really like this site. I enjoyed reading this article. keep it up.

Best Website Designs 8/12/2011 5:57:54 AM

Keep up the wonderful piece of work, I read few articles on this internet site and I think that your web blog is rattling interesting and contains sets of great information.

Cheap Designs 8/13/2011 6:21:49 PM

Very interesting!
So is this all done in CSS or a JS library?

Either way it is definitly amazing to have this functionality in an app in a world of many mobile devices.

Best Website Designs 8/23/2011 6:40:34 AM

Nice blog here! Also your website loads up fast! What host are you using? I wish my website loaded up as fast as yours lol !

Web Design Company 9/16/2011 6:13:46 AM

Now a days lots of person using responsive web design, through responsive web design we can attract main part of our website to visitor.

Tanawat wattanarach 9/19/2011 7:00:00 AM

thank for this information

Mr 9/19/2011 7:11:12 AM

Thank for this information

Piamsak Naiyakul 9/21/2011 9:05:20 AM

I like this app and I look take to your future posts on further development. Good luck!

culinary arts 9/26/2011 11:59:27 PM

Continue the wonderful good article, I just read couple of articles about this web page and i believe that the blog is rattling intriguing and consists of sets of helpful information.

Buy Tramadol 9/29/2011 4:06:01 AM

Continue the wonderful good article, I just read couple of articles about this web page.

Sacramento Website Design 10/4/2011 4:44:32 AM

Responsive web design is a critical component in today's world of multiple device platforms. Thank you for sharing your thoughts on the subject.

Alex Whinfield 10/4/2011 3:57:03 PM

Looks like a great app guys, Downloading now!

Website Design Australia 10/10/2011 3:04:45 AM

I’ve been reading a few posts and really and enjoy your writing. I’m just starting up my own blog and only hope that I can write as well and give the reader so much insight.

Sildenafil 10/14/2011 5:58:05 AM

Good blog! I have found here much useful information for yourself and would like to thank you for done by work.

Web Design Company 10/17/2011 4:02:10 AM

Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.

Tablete Android 10/20/2011 8:06:19 PM

I’ve been reading a few posts and really and enjoy your writing. I’m just starting up my own blog and only hope that I can write as well and give the reader so much insight.

Nicolai Busekist Ohlsen 10/23/2011 4:12:39 PM

Responsive Web Design is the new black. Every web designer with respect for themselves is having smartphones and tablets in mind. I can recommend Ethan Marcottes book called "Responsive Web Design".

SEO Company India 11/3/2011 5:13:18 PM

This blog Is very informative, I am really pleased to post my comment on this blog. It helped me with ocean of knowledge so I really believe you will do much better in the future. Good job web master.

Webdesign Stuttgart 11/18/2011 3:15:13 PM

Very informative article. I think particularly on mobile devices, a good, easily understandable design is very important. I still come across apps which are designed in a MS Mobile-style: small icons, not made for using it with fingers only.

Mohan Kumar Raju 12/5/2011 6:50:08 AM

Very Great Idea, Hope every thing goes success and thank you for giving good post

Web Design and Development 12/5/2011 11:24:01 PM

Extremely informative. I wanted to thank you for this excellent post. I surely enjoyed each little bit of it and I have you bookmarked to check out more new stuff you post in the future.

web Designing Company 12/20/2011 6:09:59 AM

Arizona Web Designer 2/17/2012 3:23:20 AM

CSS is one of the best things that's ever happened on the web, at least in my opinion. I've just proven this to myself by figuring out how to use it to do what I previously only did using JavaScript, which is slower and more CPU intensive and unnecessary. I was spending way too many lines of code and too much time writing image-swapping functions (it's easy, I know) but i'll never have to write another one again.

Responsive web design is great too. Screens now are DEFINITELY not "one size fits all". Every phone has a different screen, we have 27" iMacs and desktops with 17" monitors and dual screens. You really have to be able to adapt to what potential viewers have.

Nice post, short and sweet.

samual 2/18/2012 4:39:44 AM

Exceptional entry! I found it very interesting. I’ll check back later to see if more posts are added

Ashish 3/8/2012 6:53:45 AM

I hope you will keep updating your content constantly as you have one dedicated reader here.

Ashish 3/8/2012 6:54:09 AM

http://www.focus-studio.net

Neil Johnson 3/9/2012 1:03:57 PM

This Backchannel App is one the best Apps i have seen on Mobile. I love the Concept of Peeling Corner. http://hinchinbrookhabitats.com.au/

Influence Media 7/4/2012 4:27:38 PM

Good blog! I have found here much useful information for yourself and would like to thank you for done by work. <a href=http://www.influencemedia.ca>Influence Media offers: <a href=http://www.influencemedia.ca>Web Design</a>

web design and development 7/10/2012 7:19:40 AM

I have read this post. Collection

of post is a nice one ..that am

doing <a

href='http://abarissolution.blogspo

t.in/2012/04/web-development-india-

website.html' title='Web

Development India'>Web Development

India</a> and <a

href='http://abarissolution.blogspo

t.com/2012/04/erp-software-developm

ent-erp-solution.html' title='ERP

Software Solution'> ERP Software

Solution </a> That I will inform

about your post to my friends and

all the best for your future

posts..

PS3 reparatie 7/18/2012 9:29:38 AM

This is a very great blog!

webDesigner 7/20/2012 10:32:49 AM

hello a very comprehensive explanation about it. I will link my post to this one for reference concerning <a href="http://mediagroup.my">website designing</a>.
Thank you and keep up the good job.

designer 7/23/2012 5:06:06 AM

Best web designing courses http://www.nhschoolofdesign.com/ india

wordpress drupal web design services 7/24/2012 12:30:16 PM

Fantastic review, it indicated me out something I just didn't recognize before. I should motivate for your amazing perform. I am expecting the same best perform from you later on as well. Thank you for giving this information yo us.

iPad App Developer 8/8/2012 1:46:17 AM

Responsive web design you defiantly claque in your mobile. nice post.

Cat Responsive Design 8/12/2012 8:35:24 AM

Responsive Web Design is mandatory now. I have to remake all my old sites.

Cat Responsive Design 8/12/2012 8:37:13 AM

I just made this site with Responsive Design http://www.cat.com.ar based in a template with edited for Chrome.

AO Website Consulting 8/15/2012 4:22:24 PM

As most people have and use their mobile phone to go online, Responsive Web Design is the way to go.

Web Design Harvey Bay 8/17/2012 1:21:19 AM

Wow! Very interesting to read. Web Design is the most important part of website that customize the looks and appearance so other people may attract to their services and products.

Thanks for sharing this one.

Cheers!
__________________________
www.itagmedia.com/web-design-hervey-bay

UK Web Design 8/19/2012 1:32:57 AM

I think that Responsive Web Design is the way forward but there is no indication at present that webmasters are taking notice on a massive scale.

Most websites feel that 1-5 variables in design concerning screen resolution, broswer software and appliance are sufficient, and I tend to agree with them at present.

http://www.ukemarketing.com/

jimmy 9/20/2012 12:53:25 AM

nice design this is called the creativity of a real designer. http://www.webdesignbizz.com/

John Steven 10/8/2012 10:41:36 PM

Great web design idea. I like your write up and knowledgeable ideas. Great job!

Lawcrossing 10/29/2012 11:05:56 PM

I love your blog, you should add an RSS feed feature so I can get automatic notifications of new blogs. If you set one up please email me! i will bookmark you for now. Again Excellent Blog! <a href="lawcrossing.weebly.com/.../a>;

CMS developer London 11/1/2012 3:52:10 AM

I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorite’s web page list and will be checking back soon. Please check out my site as well and let me know what you think. Thanks.

Website Development 11/20/2012 6:15:11 AM

I like this blog

Pc suite Downloads 12/10/2012 4:13:58 AM

Nice design and perfect look like a professional http://www.pcsuitedownload.blogspot.com

Add comment

Name*
E-mail*
Website
b i u quote

Comment
Preview