MOBILE FIRST – Holly Foster Media

MOBILE FIRST

Let us be clear: If you plan on running a successful eCommerce website, or any website, you absolutely must cater to mobile users and consider mobile shopping. Not doing so is simply ignoring a majority of your potential customers. This has implications on how you consider the design of your eCommerce website …

Justin Smith, CEO Outerbox Design

It makes sense.

Consider how often you use your phone. Things you used to buy using a desktop are now just as easy to purchase on your tablet or mobile. And if they’re not, you’ll probably shop somewhere else.

My potential clients are two skilled artists in need of a website to market their reclaimed tree art. These unusual pieces have been purchased by local businesses and showcased in art shows and restaurants. Basically, it’s high-end upcycling using natural materials.

Upcycling is the process of converting old or discarded materials into something useful and often beautiful.

What is Upcycling?

Sizes span from six inches square to four feet square, and include a range of background colors. Custom works are often made to order for professional office spaces.

3 x 4 ft. Tree Cookie Art on display at Acupuncturist Office

Winning Website Design

In her blog, Lindsay Kolowich shares the ten “basics” needed to design a winning website.

  1. Responsive Design
  2. Branding
  3. Eye-catching Image
  4. Clear Navigation
  5. Prominent Phone Number & Contact Information
  6. Punchy Persuasive Headlines and Copy
  7. Important Information above the Fold
  8. Blog, Videos, Downloadables
  9. Strong Calls to Action
  10. Trust Indicators

Responsive Design

It’s not number one on the list for nothing — responsive design is a must.

A responsive website design will respond or adjust to the screen size of various different devices. Mobile internet browsing has officially overtaken desktop browsing: thus, having a responsive website has become a basic necessity for small business owners.

Lindsay Kolowich

Here’s a brief outline of the design process I used for “Art by Nature.”

Branding

Branding involves logos, fonts and colors. To reinforce the eco-friendly theme I chose three colors: two shades of brown and one shade of green.

Two typefaces were used — Impact for the title and Helvetica Neue for the tag line. The title “art by nature” can stand on its own or be combined with the two tagline sentences.

Eye-catching Image

Photos of the art speak for themselves; the work is amazing. Here’s a piece called “Hot Salsa.” Incredible.

Navigation, Phone Number, and Social Media

  • Best to handle mobile site navigation by using the conventional symbol of three stacked lines in the upper right hand corner.
  • We’ll definitely include the phone number right up top, especially since many of their pieces are made to order.
  • Links to their social media sites are also included in the top portion of the site.

Important Information above the Fold

Next I added four small images and one larger piece of the art work to include a variety of pieces. Visitors can click on the white shopping cart link at the lower right of an image to add the art to their shopping cart.

So far we’ve covered 1 through 7 on the list — not too bad for a new web presence. We’ll definitely add numbers 8 through 10 as they’re developed in the future.

An email subscription link is also included at the bottom of the site to help our artists generate a future mailing list.

And let’s not forget our desktop version, with a slightly different logo …

When designing websites — desktop, tablet, or mobile — remember:

  • People prefer visual content over text.
  • Include textual details but keep it brief.
  • Make the site easy to use.
  • Most of all, be sure you capture your visitors’ attention quickly.

And keep an eye out for artbynature.biz, coming soon to a cell phone near you!

until nxt time …

References

Color Name & Hue – Colblindor. (n.d.). Retrieved from https://www.color-blindness.com/color-name-hue/

Kolowich, L. (n.d.). The Anatomy of a Winning Website Design [Infographic]. Retrieved June 30, 2019, from https://blog.hubspot.com/marketing/anatomy-web-design Check out this comprehensive list of the basics of designing and building a great website.

Smith, J. (2019, April 22). Mobile eCommerce Statistics (Updated 2019) Percentage of Mobile mCommerce Shopping Trends. Retrieved from https://www.outerboxdesign.com/web-design-articles/mobile-ecommerce-statistics

What Is Upcycling? | Hipcycle. (n.d.). Retrieved from https://hipcycle.com/what-is-upcycling

Written by

0 thoughts on “MOBILE FIRST

  1. Hi Holly, Thank you for sharing your webpage. So interesting how different our websites turned out, my website is black, white, and red, while your site uses browns and greens. It definitely helps give off the tone of nature and being ecofriendly. Kind of curious as to why the “call” is in a different color than the rest of the text used on the site. Is it clickable? Or is it used to catch the audiences’ attention? I really like your usage of the white shopping cart on top of each piece of work, this way it is easier for the visitor to quickly add the item to the shopping cart. One suggestion I have is to maybe add a quick view as well, so if the customer wants to get a better glimpse on their smaller screen they have the option.

Leave a Reply

Your email address will not be published. Required fields are marked *