For upcoming and existing web designers, 2017 is going to be a year to start thinking beyond the margins. Considering the new devices getting into market, it leaves no option but to think of website designs that would emulate nothing less than sleek and efficiency on each and every platform. Additionally, the designs must adapt to all resolutions on mobile phones, iPads, laptops and even larger screens.
Google being a very influential web organization, they could most probably present a ‘material design’ to ripen and develop its influence. This along with other designs by dominant sites such as apple or amazon would then be implemented and incorporated by web designers. Better still, there could be a better way of doing things in terms of web development and design. As obviously, web designers would incline to use of newer trends and imminent ones joining the suit.
Thus, when we talk about website design trends for say 2017 and beyond, it’s important to look into what we’ve had until currently then envisage what would grow into the coming years and what wouldn’t in terms of importance. Conversely, what designers think of various websites designs cannot be ignored.
This article therefore puts together some of the ecommerce website trends you could expect come 2017 and even the years thereafter. Read below:
- 1. Mobile Design for Websites
Talking about ecommerce websites designs, there has been evolution. Years back, it was about stuffs like adaptive and responsive designs. Then, it proceeded to the idea of transforming desktop web designs to a design that could be used on various mobile devices like phones and laptops.
If we project this to 2017, its obvious mobile and light devices are taking over desktops and bigger computers that will probably remain in offices and homes. Therefore, web design would most likely take a new trend considering that most online stores as well as customers will be shopping with their mobile devices. The implication is designs for ecommerce websites must be adaptive and responsive for all existing devices and screens. Most importantly, designers must think of mobile designs.
For instance, hamburger/hidden menus will popularize, though the trend has been used for quite some time. Websites will most probably use full width of various screens unlike mobile designs that use smaller gutters. Buttons, icons and images that are more visible and large in size would also be incorporated into website design trends.
- 2. Growth of Material Designs
Material Design has been Google’s way of influencing and controlling the interfaces of android applications since its launch in 2014. As another way of branding, Material Design was rather instinctive way of laying out mobile applications or ecommerce websites.
Currently, most online stores have put into play card-like layouts as well as animations and transitions that are really responsive, and 2017 is going to be a year to grow and continue all these. Most sites will borrow from or adopt Material Design from 2017 onwards.
- 3. Sluggish Loading and Scrolling
Web designers should now start focusing on creating websites that easily scroll to greater lengths; and fast loading like every user would love it.
One perfect example is products category page on an ecommerce website, in 2017, it should load with about 10 or more products and as the user swipe vertically or scroll downwards, that page would add more of the products. It should allow the user to view close to 100 products before loading the next page.
- 4. Hamburgers Menus Positioned Left
Hamburger menus are slowly moving to the left of website pages. Designers who used Bootstrap framework and carefully trailed the Bootstrap 3 Navbar example, that design placed the hamburger menu on the right navigation side. This trend was followed by so many websites, but since Google as well as other prominent sites begun enlisting the hamburger menus to the left, the trend is set to grow in 2017.
- 5. GIF and Cinematographs
An animated GIF image could be coming back to ecommerce websites come 2017, but this time in a more fashioned and subtle form dubbed cinematograph.
Actually, this is a still picture; or rather a photograph to which a little recapping animation is added. It’s more of a mini-video looking more appealing and better than the usual animation.
Most probably, Cinematographs may be used as background images, banners, category headers or maybe product images. In 2017, it will be clear whether cinematographs will add engagement to ecommerce websites or not.
Colors and Web Design Versions
There are many trends to add to this list; however I could only mention two more. In 2017, there could also be a detonation of colors in website design. Also sites are beginning to adapt to the size of screens and types of devices and you could expect cutting-edge versions of web design, changing layers and visual acuity.
I just recently discovered OpenCart as a very powerful, but easy-to-use PHP based open source ecommerce platform. OpenCart is written in PHP's MVC framework. With OpenCart, you can add products with attributes, options, categories, discounts, and more. It also supports great SEO per product page.
One of my web design clients recent asked me to build them a manageable ecommerce system and I used OpenCart. That was a no brainer. However, she wanted a feature where only 5 options out of of 15 are allowed, so the customer cannot select more than 5. This functionality is not available in OpenCart for options. I either needed to accomplish this with PHP or jQuery and I chose jQuery.
If you have the same need to lock down a maximum number of checkbox options from a list, you can add the code from this hub.
You will access the common.js under catalog javascript.
What this code will do:
This jQuery code is for a restaurant and there is a selection of 15 sandwiches for a catering situation. My client's customer is only allowed to choose 5 from the list.
Under normal OpenCart circumstances, the customer would be able to check all 15 checkboxes, but again, we have to limit them to only 5.
We need jQuery to count all the checked boxes every time any of the checkboxes is clicked. We will only count the checked boxes and voila, we will have a number to compare to our defined maximum.
If the number of checked boxes exceeds our maximum, we will do the following:
- Popup an alert telling the customer that they went over.
- Remove the check from the checked box and leave it at the maximum.
So how does the above code work?
Explanation of the jQuery code
Line 1: Just the normal jQuery call that comes with common.js. I start developing below.
Lines 5 to 12: Declare some initial values for the variables that we will be using in this code.
- Line 5 - I need to keep track of which checkbox was clicked so we can remove it if the customer goes over the limit.
- Lines 6 and 7, we simply define an alert message when the maximum has been exceeded and an advice message. You can define these to say anything.
- Line 10: upmarketSandwichesChecked is the variable that will start from zero and increment every time one of the boxes are checked.
- Line 11: upmarketSandwichesMax - This variable is the maximum of allowed checked boxes and is compared to the upmarketSandwichesChecked variable on line 30.
- Line 12: upmarketSandwiches - This is an array that I prepared of all of the option-value-## where ## is the number ID assigned by OpenCart's MySQL database. You need to get these numbers by looking in your page source or at the MySQL database directly, but I can assure you that looking in the page course is easier and faster. These numbers will be different for YOUR website.
Lines 14 to 17 - Since OpenCart does not assign a CSS class to its checkbox options, we can use that to our advantage and have jQuery assign a class to all of your checkboxes using jQuery's each function. Call this class anything you want. We will use this class to iterate over tall of the checkboxes when one of them is clicked.
On line 14, I use the each function to go through each of the IDs in the array and assign the upmarketSandwiches class using jQuery'saddClassfunction to it so I can reference their clicks in line 19.
Lines 19 to 35 - This is where the real work happens.
- Line 19, I use the click function to see if any of the checkboxes in the upmarketSandwiches class have been clicked.
- Line 21: I grab the checked boxes ID (assigned by OpenCart) and assign it the idThatWasClickedvariable. We will use this on line 34 to remove its checked status in case that particular checkbox sets us over the limit set by our variable upmarketSandwichesMax .
- Line 22: We set the upmarketSandwichesChecked to 0 so we start our count from the beginning.
- Line 23: We start our each function and loop through each element in the upmarketSandwiches class.
- Line 24: We use a conditional to test the checked attribute and increment the upmarketSandwichesChecked on line 26 if the conditional comes back as true.
- Line 30: We have a conditional to test if we went over the maximum.
- Line 32: We show an alert box telling the customer that they went over.
- Line 34: We remove the check of the checkbox that the customer last clicked. Remember, we assigned idThatWasClicked to the ID of the variable that triggered the whole click function and then use that ID to set the attribute to checked=false.
That's it.
No comments:
Post a Comment