Responsive Web Design is today’s best choice

Tags

, , , , , , ,

This website called http://responsify.it/ allows you to create your own responsive website template. This is a great tool for people who are not sure how to create responsive websites and is a foundation for learning. For those of you who don’t know exactly what the term “responsive” means, it is basically a way of designing a website that will adjust it’s size (text, images, content placement) according to the size of the screen the website is being viewed on (ie, desktop, laptop, tablet, or mobile device). I can’t imagine that this is only a trend with mobile devices and cell phones changing everyday along with their various sizes. I highly recommend this website and it even gives you a .zip of your template when you are finished creating it. Very cool. Check it out….

How does it work?

Here is a brief look at the process to create your template.

 

Columns

Columns

1. Pick your number of columns

Gutter Width

Gutter Width

2. Choose the amount of space between each column

Breakpoints

Breakpoints

3. Where do you want the columns to break off as the screen size gets smaller?

Download

Download

4. Download your zipped file and you are ready to go.

 

 

Advertisements

How to embed a PDF onto a webpage.

Tags

, , , , , , , ,

I learned something new today. A client of mine wants to showcase his resume on a webpage and since I had never done this before I did a lil research and found this article:

“How to embed a PDF document into HTML web page

PDF the Portable Document Format, although created by Adobe in the early 90’s is now an open standard ISO format for documents.
It’s a great way of converting propriety documents (excel, word etc.) into a easily viewable/exchangable format.

Putting PDFs into web pages is increasing popular – you can view documents as they should appear with images and text formatted as the author intended.

So.. how do you embed a pdf into a web page?

The simple way is to use the standards-compliant “object” element, and looks like this:

<  object data="myfile.pdf" type="application/pdf" width="100%" height="100%"  >

  <  p  >It appears you don't have a PDF plugin for this browser.
  No biggie... you can <  a href="myfile.pdf"  >click here to
  download the PDF file.<  /a  ><  /p  >

<  /object  >

You can then style the div that this object goes in so that it fits with the size and layout of your website.
If you’re still not sure, or want more detail about this subject read the info over at pdfobject.com

After reading this article I thought to myself how would I link the PDF document for a user who does not have PDF plugin. Well Google has what is called Google Docs Viewer and it is a free tool. Just upload the PDF to your server and copy the url into Google Docs and generate code. Copy the url code into the paragraph <a href=”…”>url goes here</a> and you are done. Now anyone can view your resume.  Google also generates an iframe code that allows you to embed your pdf on your webpage, but I felt that using the object tag in html was more visually appealing. Love it. Check it out…
Embedded PDF on webpage: http://jamesbohannon.com/

Responsive Web Design

Tags

,

In today’s age, technology is rapidly changing and as designers, we have to work very hard to keep up with the ever changing world of web. Screen sizes vary so much now, that we have had to accomodate those changes with what is now called Responsive Web Design. I found this article featuring wonderful examples of these designs and also tutorial on how to implement these changes. It was very imformative, please check it out….

Note: For Free Responsive Web Design Templates Click Here

“Responsive web design term is related to the concept of developing a website design in a manner, that helps the lay out to get changed according to the user’s computer screen resolution. More precisely, the concept allows for an advanced 4 column layout 1292 pixels wide, on a 1025 pixel  width screen, that auto-simplifies into 2 columns. Also it suitably fixes on the smartphone and computer tablet screen. This particular designing technique we call “responsive web design”. Responsive web designing is a completely different designing version than the traditional web designing, and developers (especially fresher) must know about the pros and cons of responsive web designing. This blog is a mighty example of the approach so we will reveal a few facts about the uses of responsive web designing. The basic instinct might be to choose media queries to develop a responsive site. However, the hassle you face with media queries is that new queries can pop up from moment to moment; each time the user experiences sudden and drastic changes to the look and organization of the site. Experts suggest using some CSS transitions to ease the jump. Pages that include data tables pose a special challenge to the responsive web designer. Data tables are very wide by default and when you zoom out to see the whole table it becomes too small to read. When you try to zoom in to make the it readable, you are supposed to scroll both horizontally and vertically to look through it.  Well, there are several ways avoid this problem. Reformatting the data table as a pie or mini-graph is an approved solution. The mini-graph fixes even in narrow screens. Images in responsive web designs are called context-aware. Responsive web design images are primarily fluid images that can be replaced by context aware images, an updated version for better designing. This particular technique serves the purpose of responsive designing in true sense as the images serve at different resolutions, ranging from larger screens to smaller ones. The scaled images appear to change fluidly with the help of updated developer tools and coding languages, allowing designs to look sharp in every context. Responsive web designing is remarkably different from traditional designing in terms of technical and creative issues and a careful use of this can do wonder while designing.”

Responsive Web Design Examples

Andersson-Wise Architects

Stephen Caver

Sparkbox

Food Sense

The Boston Globe

Think Vitamin

Sasquatch! Music Festival

Internet Images

Seminal Responsive Web Design Example

Forefathers Group

Spigot Design

New Adventures In Web Design Conference 2012

Illy Issimo

Earth Hour

Clean Air Commute Challenge

Launch Kit

Ribot

Deren Keskin

Sweet Hat Club

Glitch

dConstruct 2011

Adaptive Web Design

Five Simple Steps

Splendid

Ryan O’Rourke

FlexSlider

El Sendero del Cacao

Do Lectures

St Paul’s School

Naomi Atkinson Design

Ben Handzo Photography

Stunning CSS3 Media Queries Example

Nordic Ruby Conference

Halifax Game Jam

Diablo Media

ASU Online

Kings Hill Cars

8 Faces

Asbury Agile

Alsacréations

Sleepstreet

Source: http://designmodo.com/responsive-design-examples/#ixzz20om5R05r

Not enough CSS in my life…

Tags

, , , ,

ImageAs I comb through the world wide web and browse the book stores for the perfect book about web development, I began to realize that there really isn’t much help out there for CSS or even HTML5 at that. I strive for knowledge and I love to read about anything new in the web development world, but it seems there may be a shortage on CSS. I took a trip to Books A Million tonight and I could not believe there were NO books about just CSS or CSS3. Not even a magazine. I ended up leaving with a Psychology magazine instead. 😦 Well I have been “Stumbling” the subject of web development for hours and I have found some great stuff on CSS. Please check it out….

All CSS Properties listed A-Z

Guide to Shorthand CSS

CSS3 Helpsheet