Marv’s Updated Landing page

Try out my updated Web Page and let me know what you think. Marv’s most excellent web site

I created the web site as part of my journey “Live every day like it’s your last and learn every day like you’ll live forever (Gandhi)“. And learn I did! It’s all vanilla HTML, CSS, and Javascript with a little jQuery thrown in for good measure. However, especially with CSS, its amazing how a really small code tweak cascades into massive changes in the content’s display.

I’m especially interested in its appearance on mobile devices. “Responsive Web” is probably an old concept to most Web developers but I’ve just heard about it in a class I took. The concept is to customize the view for each device type and size as you develop your web site. I attempted to use Responsive Web guidelines to construct the web pages after a first attempt fared poorly.  Using the guidelines I was actually able to add the mobile view without changing the content, only CSS and jQuery.

I’ve tested my web pages on my computer, iPad, and iPhone 6 and would be interested to hear how it displays on other mobile devices.

Some lessons learned by a real newbie:

  • Develop the content first then design the look and feel. I started the other way around and ended up deleting sections of the web pages.
  • One of the cardinal rules in a design tutorial I studied was “use a maximum of 3 colors”‘ but I’m using at least 4 and don’t understand. Another rule was “never use black”. I like black and used 4 colors. I guess the lesson learned is “it’s okay to break the rules so sometimes”
  • Go ahead and insert a link to the jQuery library in the header when you start a new project. I lost an afternoon trying to debug a problem after I inserted a jQuery call.
  • I developed the mobile view last. 90% complete quickly. Final 10% took forever. I learned a lot and the next time will be much quicker. Also, will style the mobile view first.
  • Use relative units of measurements such as % to facilitate the view on different sized devices. I tried to not use pixels, ems, or other absolute units of measurements, but could not eliminate all on images. This proved to be my hardest problem next to the navigation menu.
Advertisements

One Response to Marv’s Updated Landing page

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: