Responsive Web Design

You finally have a website up. Phew! But wait, what is this…a…mobile site? Isn’t my site going to squeeze and contort itself to the size of people’s phones and tablets and still look great?

Sorry, but the answer is no.

Mobile sites are the new “it” thing to do since so many people are accessing sites from their phones and tablets. I read an article recently that said more and more students are filling out their FAFSA applications on their phones. The screen may be smaller, but people are able to access information whenever and wherever. Oh, technology!

So I dabbled with learning how to make responsive websites, and, folks, it’s fairly easy. You just have to give up a lot of features that you really love from your website in order for people’s phones to load the page quickly. And, really, the most important thing to consider is that people get the information they’re looking for. I say the simpler the better. Skip the tricky navigation and banners, big logos and huge JPEGs. It’s really just a lot of text.

If you work with CSS like I’m doing right now, all you have to do is create a separate stylesheet for the mobile design and on your main HTML page, just tell the browser to display that if it’s a mobile device. It’s that easy! I found a great site for some templates if you’d like to try it out. One trick I learned to test out the site real quick on your desktop is to open the page in a browser and then make the window as small as you can. Play with the size and see what happens to your content. Everything essentially turns into a one column design.

Oh well, enough of my take on it. Go do some research and make an awesome mobile site like I know you can! 🙂

Advertisements

2 Week Summary of Things Learned

I’ve been so busy learning new things that my brain has been overloaded. I haven’t been able to post in a while. So here is a 2 week compilation.

Things I learned:

  • adding width and height to an image tag makes the image load faster (don’t forget the alt tag!)
  • new HTML5 code=figcaption; puts caption beneath image
  • meter element/progress bar
  • if you upload content to your server, it’s yours
  • a favicon is 16×16 pixels
  • css sprites (and no, there aren’t any css dr. peppers)
  • #1 reason people leave sites = slow load
  • RGBA = red, green, blue, alpha (for opacity)
  • css3 gradients
  • page layout design techniques=ice, jello, liquid (new for mobile=responsive)
  • css3generator.com (for those days you’d rather not code from memory)
  • appealing to 6 living generations in your design/content
  • Dabblet (see your design and code at the same time)
  • Bacon Ipsum (Lorum ipsum alternative with meat names)
  • Slipsum (Samuel L. Jackson ‘Pulp Fiction’ text generator)
  • Basic CSS Column Layouts w/ tutorials
  • Great Examples of HTML 5 Sites

Hope these can hold you over until my next post. School + Boyfriend + Blues games = One busy girl.