Web Projects:

Designed and built for artists, makers, small businesses, and the service industry

Here are some sites I'm working on and a few that are *live* in the wild. Every project is built using mobile first concepts (see below) and follow standard "best practices" for accessibility, readibility, and security. Custom digital photography and graphic design enhance the uniqueness of each site. Web hosting by Green Geeks provides fast load times and consistent service. Plus they're an eco-friendly, solar-powered company!
Let's get together and build your site...

Beulahland PDX

Beulahland

Beulahland is a unique family-owned, old-school Portland restaurant and lounge. This responsive WordPress site features blog categories for publishing fresh content and a built-in social media sidebar.

 PCC's student newspaper The Bridge

PCC's The Bridge

The Bridge is the student newspaper of Portland Community College. The new WordPress site is constantly updated. Legacy documentation and a child theme provide future stability as new editors work on the project.-30-

 bootstrap 4 template logo

Bootstrap 4

This sample site is built with Bootstrap, a popular and versitile front-end framework for web development. It features HTML & CSS templates for forms, buttons, navigation systems other elements for building responsive web design.

 the range finder

Maynard's site

This is Craig Maynard Scott's online photography portfolio. Currently, it's just sample images & placeholder text. Live site coming mid 2018. Features: mobile first design and social media links.

 Ace in the Hole MultiSports

Ace in the Hole

"MultiSports for Every Body." The Pacific Northwest's most inclusive and fun weekend event. Features: PHP registration form, Facebook feed, Twitter feed, image gallery, and live weather report widget.

 Burrito Masala

Burrito Masala

Hypothetically, one of the greatest food carts in Portland. Realistically, it's a tight mobile first website. Features: integrated Google map, one-click text to order, and the full menu.

Web Design

Concepts & Tools:

Mobile First

The “mobile first” concept implies a website is designed for optimal use and fast load times on smart phones – where most web traffic originates. When the site is viewed on larger screens, additional styling and functionality contribute to the user’s experience (progressive enhancement). Google actualluy downgrades search rankings (SEO) when a site isn’t properly mobile optimized.

WordPress

Use the right platform for your site. A mobile first site will work if you only need a few images, an about section, and social media links. WordPress is used for more robust sites with galleries, forms, a shop, etc. WordPress is FREE, and is the most popular and user-friendly content management system (CMS) on the web. Its dashboard makes it a snap to create, update and/or edit content.

CSS Grid

CSS Grid is a powerful tool for creating flexible, responsive web layouts in both vertical and horizontal directions (surprisingly, a new-ish concept in web design). This amazingly versitle system streamlines the design process by reducing specificity when styling individual elements and it maintains the content's underlying semantics. Resize your browser to see it in action!

Usability

One of the most important – and often overlooked – concepts in web design is thinking about the site’s visitors. Is the focus of the site clear? And is the site user-friendly? There are actually measurable usability factors too. Providing your visitors with a quality experience (coupled with style and functionality) will bring them back again.

Design Process:

Meet & Discuss:

  • Intent & mission of the site
  • Determine primary visitors
  • Estimate the budget & timeline
  • Produce a Statement of Work

Gather Assets:

  • Images, logos & other graphics
  • Text & other written content
  • Social media links, forms, etc.
  • Compile a brand book

Design & Test:

  • Create structural wireframes
  • Build a working template
  • Ensure all forms & links work
  • Test on multiple browsers

...Deploy:

  • It's time for the soft launch!
  • Announce site on social media
  • Get WordPress documentation
  • Final deliverables & backups

Contact:

Thanks for taking the time to make contact.

Let's get your web project started. Drop a note in the comments section describing your concept and I'll get back to you shortly. Use the contact form to send an email, click the envelope in the footer to launch your email app, or send me a Facebook message. I'm looking forward to working with you! Thanks again.- Mario