Server-Side Technology

Great article on which server-side technology to use: http://www.adobe.com/devnet/dreamweaver/articles/which_serverside_technology.html

(The reason I can’t write a lot about this topic is that I don’t quite understand it all just yet. But we were discussing it in class and I thought I’d just share a great page that breaks it all down.)

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! 🙂

Recreating a Website From a Photo

After only 3 weeks of learning HTML 5 & CSS, I was given a class homework assignment to re-create a website from an image. I think I did pretty good. Let me know what you think.

PSDtoHTML

This was my reference image.

PSDtoHTML_2

This is my work after 8 hours.

At the end of the week I was given a test to do the same thing…and it took me 16 hours to complete it. After 16 hours of frustrating fun, I did it. It wasn’t perfect, but at least I finished it. This was probably the most challenging thing I’ve done in this class so far.

Sample image.

Sample image.

Finished project.

Finished project.

So is it easier to create a website from a picture (i.e. laying it out in Photoshop first) or just building it from scratch? I like to visualize and plan things out first, but this project was hard. I think if I was just doing this on my own, and not under the gun, I would’ve done better.

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.

New Term Learned: @Font-Face

You pick a real cool font to load on your page; the only problem is that most people won’t have it loaded on their computer, therefore it won’t show up. Your page will not look as cool as  you intended it to.

The solution is easy: download the font file to your server and with some simple coding, viewers are prompted to download the file if they don’t have it.

How to do this: @ Font-Face Generator (This site is also great for free fonts.)

Another cool site I found today: ColorCombos.com – If you want to know the many forms of color values something is (RGB, Hex, CMYK) or if you need some great color combos, this site is perfect. You can even enter a URL and it will tell you all the colors on that site. Color could not be any easier when working with this awesome page.

Google's colorsGoogle’s site colors

Helpful Sites – Part 1

I’m a graphic designer studying to be a web designer, so I have a lot of sites I visit when I need help. Whether it be for picking color schemes, cool fonts, background images, etc., these following sites have served me well.

When I need color schemes – kuler.adobe.com

When I need free and cool fonts – dafont.com

When I need a quick cheat sheet on HTML/CSS – visibone.com

When I need free Photoshop brushes and images – deviantart.com

When I just need simple advice on web design – lissaexplains.com

And that’s all I can think of at the moment, but I’m always finding new and interesting tools all the time. One thing I’ve always liked to do is share my knowledge, so this blog will be updated regularly.