Showcase of 30 MORE Food & Restaurant Website Designs

A delicious showcase of 30 MORE food and restaurant website designs. Also check out an Showcase of 35 Food & Restaurant Website Designs for more inspiration.


Minne’s Diner

(more…)

Kennedy Center Website Updates

Lots of exciting website updates were launched last week with the Washington National Opera and Kennedy Center affiliation on July 1st… which were also the primary reason why my blog has taken a back seat for the past month.

Two primary updates (among many) in which I focused on their design and implementation were the new contribute pages for Kennedy Center, WNO, and NSO; and the new event pages. Both gave me the opportunity to further my jQuery and JavaScript knowledge as well as get more familiar with ColdFusion.

(more…)

JavaScript – Scrolling Sidebar & Offset

Jun 9, 2011 | Blog, Javascript, Web Design, jQuery

Learning JavaScript little by little, thought I’d start posting on my discoveries.

Early this week I was working on a secondary side navigation similar to this example. The accompany code tutorial works great, but the main problem I ran into was that the page content was separated via jQuery tabs. Also, the scrolling side navigation was located in an initially hidden tab via display=none (see diagrams below).

(more…)

Custom PayPal Form with Required Fields

May 18, 2011 | Blog, Javascript, PHP, Tutorial, Web Design

Built a custom PayPal form for a client today, and had trouble find resources regarding validating required form fields. In the end, I added some Javascript in the header to check required fields were not left blank as well as check one field was a certain length of characters. In the form code below I used a fake email, be sure to replace it with the receiving PayPal account email.

Javascript (in header):

function validateForm() { var x=document.forms["myPayPal"]["os0"].value if (x==null || x=="") { alert("Please enter a patient account number"); return false; } if (!(x.length == 6)) { alert("Please enter a six digit account number"); return false; } var y=document.forms["myPayPal"]["os1"].value if (y==null || y=="") { alert("Please enter a patient name"); return false; } var z=document.forms["myPayPal"]["amount"].value if (z==null || z=="") { alert("Please enter a payment amount"); return false; } }

Form (in body):

<form name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" id="payPalForm"> <input type="hidden" name="item_name" value="Fake PayPal Form"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="business" value="email@fakeemail.com"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="return" value="http://www.fake-web-address.com/success.html"> <input type="hidden" name="on0" value="Patient Account Number">Patient Account Number: <input type="text" name="os0" maxlength="60"> <input type="hidden" name="on1" value="Patient Full Name">Patient Full Name: <input type="text" name="os1" maxlength="60"> Amount:<input name="amount" type="text" id="amount" size="45"> <input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110429-1/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" value="Submit"> </form>

References
http://freelanceswitch.com/money/making-a-paypal-form-tutorial/
http://www.webcheatsheet.com/javascript/form_validation.php
http://www.w3schools.com/js/js_form_validation.asp

If you’ve had success with any other validation methods, or checking for other requirements, please leave a comment!

Mobile Web Design Resources

May 16, 2011 | Blog, Mobile, Resource, Web Design

I worked on the mobile website for The Kennedy Center not to long ago and haven’t had a chance to 1) post about my process for the mobile site’s design and user experience, or 2) make available the resources I used. Below will be an ongoing collection of links and articles that I used earlier this spring as well as what I continue to discover as I continue exploring mobile web design.

MOBILE WEB DEVELOPMENT
jQTouch

MOBILE WEB DESIGN INSPIRATION
CSSiPhone
60 Mobile Web Design Showcase by WS Blogz

MOBILE WEB DESIGNERS (INSPIRATION)
Brandclay

MISCELLANEOUS MOVILE WEB DESIGN RESOURCES
Mobile Usability Guidelines by Paul Hibbitts
Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers by Smashing Magazine
A User-Centered Approach To Web Design For Mobile Devices by Smashing Magazine
Adaptive & Mobile Design with CSS3 Media Queries by Web Designer Wall

Göteborgstryckeriet

May 1, 2011 | Blog, Inspiration, Print, Web Design

While looking at Sweden based Lundgren+Lindqvist‘s amazing portfolio, I came across the website they did for Göteborgstryckeriet, one of Sweden’s leading printing houses. While the website itself is wonderfully designed for the printing company’s recent rebranding, it is also a fabulous showcase of their vast work and great place for print design inspiration. In the gallery section, projects can be filtered by Print Category, Book Binding, and Paper Category, making it a great reference site. Below are a few pictures of the site and some of Göteborgstryckeriet‘s work.

(more…)

Showcase of Custom Wedding Websites

Apr 10, 2011 | Blog, Inspiration, Showcase, Web Design

Its hard to find interesting and creative wedding websites out there in a sea of templates, therefore this post will be a showcase of an ongoing list of custom wedding websites, individually designed specifically for each couple.


It’s the Jump Off

(more…)

Faraji Rosenthall

Feb 20, 2011 | Blog, New Work, Web Design, byK

New work for Northern Virginia Criminal Lawyer Faraji Rosenthall. I designed both his logo and website, and developed the site in WordPress. Click image for more images.

New Work: Update to Happy Spooner

Nov 30, 2010 | Blog, New Work, Travel, Web Design, byK

happyspooner-01

Recently updated my travel photo website – Happy Spooner – adding lots of new pictures as well as sprucing up the minimal design a bit. Still have a few more sections to finish adding photos to, but otherwise complete!

(more…)

New Work: Architecture Portfolio

arch-portfolio-01

My architecture portfolio is personal project that’s been in the works for quite some time, only recently have I been able to get it to a somewhat releasable stage. Currently it only showcases models (that lack a description of the project and materials used), but hopefully I’ll find the time to continue to expand upon it.

(more…)