New Website Design

Responsive Design & Why it is Important

Responsive design is a very important aspect of web design and web development. In this day and age, with as many smartphones there are out there, mobile website traffic is roughly equal to desktop browser based web traffic. With so many people using their phones to view websites it's critically important to have a website that looks good on any screen size, to make sure that your content is easily view able without any issues and that your visitors can navigate your website and get the information they need or become your customer or loyal fan easily.

 

The goal of responsive web design is to ensure that your users have a good experience on your website. The best system in place at the moment, and the one that you will find on nearly every website that takes advantage of responsiveness, is the grid system. Grid-based systems usually work by making use of media queries like the one below:

 

/** This is an example of a media query that will activate if your screen has a width of up to 680px; It will then (and only then!) apply the contained CSS. */
@media screen only and (max-width: 680px) {
    .someGridElement { max-width:50%; }
}
/** The below media query only applies to view sizes above or equal to 680px width.* Setting it to 681 is so that we don’t have overlapping rules.*/
@media screen only and (min-width: 681px) {
    .someGridElement { max-width:25%; }
}

 

If you have been using CSS for a while, this shouldn’t be too big of a step up from what you are used to, but a nice part about responsive design being so prominent is that there are frameworks built already that will make development times a lot shorter!

 

A few examples of these frameworks are below. Please keep in mind that there are a very wide variety of web design frameworks out there that can be built on and used to construct a myriad of different websites. What's most important is that you know the benefits and disadvantages of each yourself before investing in any one framework very deeply. Many frameworks are also compatible with existing tools and Content Management Systems, for instance Bootstrap can be installed on an instance of a WordPress website and can be expanded upon, but doing so has its own separate set of advantages and disadvantages. We recommend you look further into any software set before launching your next project.

 

The standard for grid-based, responsive design. It is built on both LESS and SASS, but also has a pre-compiled version in case you don’t feel like being pre-processy. It also comes bundled with a redesigned version of basically all of the default html elements such as check boxes, input fields, buttons, and also has a few that aren’t default, like hover tooltips and an icon font. You can also view everything on GitHub if you feel like making your own fork of it or contributing to the base project. Bootstrap 4 is in the making, and it even has an alpha version available for those who want to give it a test run and give feedback to the developers.

 

This is another grid-based responsive system that is pretty common around the internet. It is maintained, also on Github, by Yahoo, and is frequently updated. There is also a feature-selector and custom package builder available so that you can choose the breakpoints for the responsiveness. It is also built upon Normalize.css, which is a css file that was created to keep the browser styles between browsers unified instead of having differences in crucial attributes like padding and margins.

 

For something that focuses on looks right off the bat, there is foundation. Foundation is another responsive framework that is built on SASS. Its modular design can be expanded upon easily with pre-built, aptly-named, "Building Blocks" that add new functionality to the framework without cluttering the default installation. Things like carousels, overlays, sticky sidebars, and even an effects library, can be added in minutes.

 

Overall, these are a very few of the total number of responsive frameworks. There are dozens to choose from, but these are three that you might run into contact when looking around. Generally the larger the number of people using a specific framework the more likely it is that you will be able to find resources and updated versions of the software as time goes on. Almost all software solutions today will require ongoing maintenance and upgrades to handle new security threats that emerge over time.

by Owen Carver

Creating a Good User Experience

User Experience, abbreviated as "UX", in web design and web development is not a new thing by any means. Ensuring that your user has an easy, attractive, and intuitive way to interact with your website and all of its functions is everything. UX encapsulates form interaction, information display, menus, and any other element that you can add to a website. The goal of having good UX is to give the user a pleasant and useful flow of interaction that is helpful and absent of any inconveniences or wasted moments or actions during their visit on your website.
Improving usability, accessibility (screen readers, and the like), and creating a pleasurable experience for users interacting with your product is what good UX is all about. Things like stunning visuals, tasteful animations, and even elegant error messages can contribute to creating an overall positive user experience.
However, it is often difficult for web and graphic designers to put themselves in the users' shoes, but luckily there is an easy way to get around that, using feedback and testing. When you are working on a project, don’t rely purely on what you think looks or "flows" nicely. Have a friend or relative try it out and see what they think. Having a fresh set of eyes on your work can help immensely with finding the points in your work that would otherwise be very difficult or impossible for you to find on your own.
There is no rule-of-thumb for getting good UX, but there are a few good practices:
  • Get feedback from friends, family, A/B testing, page analysis tools, and anything else you can get your hands on. These are crucial for any high-end or high traffic web design project.
  • Keep your design consistent. Reuse design elements to give a sense of unity. This means, stick to your colors and light/darkness percentages.
  • Make tasteful use of animation. Tasteful is hard to define, and it is ultimately left up to you, but find an animation that works for you and the functions that your application performs. Smooth movement is great eye-candy, and will reinforce the feeling of completed an action or creating a sense of progress as users navigate through your site.
  • Make use of load times, but keep them short. Having an animation or smooth transitions will reduce the perceived load time, and making things load quickly will help retain users and make sure that they do not get bored or impatient.
Overall, making good decisions for your website's UX from the very start will make the rest of the process much smoother and easier for you as the designer and/or developer. Knowing how you want to notify users of actions, how you will apply changes to information dynamically, and how things like navigation are going to be laid out are really large steps that can help ensure your users have the best possible experience while interacting with the product and brand.

by Owen Carver

Las Vegas Website Design Company Tips: Less is More

As a Las Vegas Website Design Company we like sharing tips to help you improve your online business and brand. As Google and user behavior has evolved over the past few years, the theme of 'less is more' has never been so important as it is today. A website with too much clutter can become difficult to navigate, while a more stripped down look can appear more sleek and modern. This direction of minimal and simplified web design has been trending for a while now, and it's important to take the potential benefits of this design philosophy seriously. Here are a few tips on how a more simple website design helps improve the user experience of your visitors.

1. Only the Essentials:

One of the first things to do when seeking improvement in your website design is to limit your website to the essentials. The process of trimming down the website can be a challenging one but is definitely a process worth some attention. A good rule of thumb to follow is the 80 - 20 rule, which states that 20% of what’s on a page should give 80% of its value. Consider what content on your pages are most essential and where you want your visitor’s attention to really be.

2. Number of Pages:

Having enough pages on your website is important for SEO purposes, however, along the same lines as what’s been said above, you don’t want to go overboard. You want to make sure your website design is user-friendly, don’t make it too difficult for your visitors to navigate by giving them too many choices of where to click to find what they need, it might make them not want to return. One way to still have lots of pages and content while still keeping your web design clean and organized is to utilize categories and sub categories within your main site pages and blog to minimize the number of options a user is presented when first deciding where to go to find what they’re looking for.

3. Consider What’s Above the Fold:

When a user loads any page your website, the first things they see is the area of your website usually referred to as “above the fold”. This refers specifically to the area of your website that appears in a user's browser before they scroll down. This area often changes depending on the size of the browser window you view a website on. But being aware that this area is the first impression your visitors see, it’s best for a website’s design to carefully consider the first impression and type of content you want your visitors see at first glance. Although it’s been shown that most users naturally scroll down webpages to view additional content on websites, it’s important to consider what information, media, or call-to-action you want your visitors to see first. It could determine whether they stay or click-away.

4. Fewer But Carefully Selected Colors:

Don’t go crazy with too many different types of colors for your website design. When in doubt, find a small handful of colors and stick to those, anything else may become a distraction or complicate the user’s visual experience. Consult with a professional web & graphic designer when selecting your website’s color scheme and background elements.

If you need a trusted, Las Vegas website design firm, look no further than All in Web Pro. Our experienced web and graphic design team will work with you to find your brand’s voice and help you translate it onto your webpages. If you are ready to take your brand to the next level, contact All in Web Pro today.

by Owen Carver

New Website Design: Prakti - Changing the World with Cookstoves

Changing the World

PraktiDesign.com is the website home of Prakti, an exciting new social venture startup that's working hard to develop innovative technology that will significantly improve the health of women and children in developing countries. Their innovation is clean cookstove technology! They've created an advanced cookstove system specifically designed to be affordable for mass distribution in the developing world, and they've already begun operations in India, Haiti, and Nepal. Most people wouldn't think smoke from a cookstove could be such an important issue, but it's one of the top 5 killers in developing countries today, causing over 1.9 million premature deaths every year mostly among women and children who cook food in covered indoor stoves which release harmful particulates into their homes.

Owen Carver had the opportunity to meet the founder of Prakti, Mouhsine Serrar, last year at the UnReasonable Institute in Boulder Colorado during the 2 days leading up to the UnReasonable Climax event. The Climax is a startup stage where 25 entrepreneur graduates from the UnReasonable Institute's 6 week program present their for-profit social ventures to a packed audience of academics, investors, and like-minded individuals passionate about changing the world.

Prakti was one of two startups presented that received awards from Siegel & Gale, a global strategic branding firm based in New York, which entitled them to receive free banding services from the firm along with a blue-print for a new website. After some time Prakti reached out to All in Web Pro for help with the execution of these brand strategies through the redesign of their website.

While working closely with Prakti and the Siegel & Gale team, we generated an modern interpretation of this new user-friendly and easy to navigate website aimed at providing key information to investors and partners through a story-based content system designed for easy ongoing maintenance and expansion.

We're proud to be able to support Prakti in their mission to change the world through innovative cookstove solutions and are honored that they look to us for their web design needs.

by Owen Carver