Webprem Website Redesign

Webprem is excited to announce the implementation of our redesigned website.

The previous version of our website was implemented back in 2011. Technology has changed by leaps and bounds since then.  Website design trends and concepts have also radically changed.  Both the previous version and current website were designed using WordPress.   

Responsive and Mobile Friendly

Resposive, mobile friendly web design makes your web page look good on a variety of devices (desktops, tablets, and phones). Responsive Web Design is about using a combination of HTML and CSS to resize, and move the content around on a web page to make it look good on any screen. The width and height, called viewport, of the device you are using to view the website plays a major factor. A website that is responsive, mobile friendly looks quite different on a mobile device (phone) then it looks like on a desktop and/or laptop.

Viewport size

Viewport size of a laptop

To find out what your viewport width and height are go to http://whatismyviewport.com/.
In 2011 Webprem found too many issues with responsive design so the previous version of Webprem was not responsive.

Responsive Webprem Web Design

Full Width Design

Webprem’s redesigned website contains multiple web pages that take advantage of the full width of the web page.

On our home page the area underneath the main menu displays a full width video.

The blue area underneath the video with the title of “View Our Portfolio” is also full width.

The portfolio items also take advantage of the full width of the web page.  This allows more portfolio items to be showcased and quickly viewed with larger porfolio images than in the previous version of our website.

Webprem Redesign



The previous version of our website used what is commonly called a boxed design. Our website did not have hard borders on the left and right side of the website, but the content of the website was limited to 960px wide.

Back in 2011 960px wide was a standard size used by web designers based on the most common screen size width.

Webprem previous version of website

Utilizing Various Different Types of Headers Under Menu

For years we at Webprem thought a website should have a common look and feel. That made sense years ago but times they are a changing.

We decided that our website should offer different types of header designs (the area under the main menu) so that we could use our own website when asking future clients what they wanted the top section of their website to look like.

Here are some of the header designs we have used in this website.

Webprem Header Home Page

Video with color overlay and a call to action button

Webprem Header About Us Page

Background image with color overlay and part of the page content peeking into the header



Webprem Header Services Page

Background image with color overlay and down arrow to move to web page content

Webprem Header Testimonials Page

Background image with color overlay and down arrow to move to web page content



Webprem Header Portfolio Page

Portfolio header flips into view

Webprem Header Blog Page

Background image with color overlay (same image is used with different color overlays on all of the blog listings pages)



Webprem Header Client Resources Blog Page

Background image with color overlay (same image is used with different color overlays on all of the blog listings pages)

Webprem Header Seo Blog Page

Background image with color overlay (same image is used with different color overlays on all of the blog listings pages)



Webprem Header Social Media Blog Page

Background image with color overlay (same image is used with different color overlays on all of the blog listings pages)

Webprem Header Tech Tips Blog Page

Background image with color overlay (same image is used with different color overlays on all of the blog listings pages)



Webprem Header SEO Ranking Blog

Background is solid color with blog title and meta information about the blog under the Blog Title. Each individual blog post has a different header color.

Webprem Header Auto Buy Sell Directory

Background image with color overlay. Each individual portfolio item has a different color overlay that ties to the colors in the web site design.



Webprem Header Contact Us

Background image with color overlay

Webprem Header Website Redesign Blog

Background image with color overlay and down arrow to move to web page content.The same background image was used on the services page, but with a different color overlay.

Eliminated Sidebars

For years Webprem considered sidebars to be a mandatory website design consideration for all web pages other than the home page. It is extremely important that website visitors are easily able to find what they are looking (intuitive navigation).

Over the last 6-9 months we started to notice the elimination of sidebars from web sites Webprem admired. We first thought “yuck”, and felt some of the intuitiveness of those website designs were being lost. Once we got over that shock we quickly realized it is important to have an open mind, especially when designing full width web pages.

However, sidebars are useful if the client utilizes them as a place for displaying ads, or if they have content that they want highlighted on multiple pages, such as physical location, and hours of operation. Every client has different needs when it comes to their website design.

Here are 2 blog articles that Webprem found that helped us embrace the concept of getting rid of sidebars on our website. They are:

Replaced Slideshow with Video on Home Page

This change was a big one for Webprem. Webprem has advised clients for years on the benefits of have a slideshow on their home page. There are some clients where a slideshow on the home page is still a good design concept, but to slideshow or not to slideshow should be thoroughly thought out. We can discuss if a slideshow makes sense or not depending on your type of business.

Webprem ran into this funny but seemly true blog article that made us want to try something other than a slideshow on our home page. That blog is “Sliders suck and should be banned from your website” by Yoast who is a well respected SEO company.

In the redesign of our website Webprem really wanted to try using a video on the home page to draw people into the movement. Webprem will watch to see if this was a good design decision based on feedback from current and future clients.

Webprem has tried out many different types of slideshow images over the years but during the last couple of years Webprem was trying slideshow images that were a combination of yellow and light grey over a black background. Below are the 5 slideshow images that were on the previous version of Webprem prior to our website redesign.

best-web-design-designer

Slideshow image 1 from previous Webprem home page design

best-web-design-designer1

Slideshow image 2 from previous Webprem home page design



custom-web-design

Slideshow image 3 from previous Webprem home page design

connect-with-your-customers

Slideshow image 4 from previous Webprem home page design



contact-us

Slideshow image 5 from previous Webprem home page design

 

Blog Design Layout Overhaul

In the section above titled “Eliminated Sidebars” Webprem discussed our decision to eliminate sidebars from our website. We now decided to overhaul how our blog listings pages (where more than one blog post is shown) and our individual blog posts themselves should look.

We decided to use a masonry blog layout because we found it a pleasing web design. To see what we mean by “masonry blog layout” please take a look at Blog Listings Page. This design concept allows us considerable flexibility in the type of featured images we use and display on our blog listings page.

Our previous blog listings design layout used a standard stacked blog design and always required a wide but not very tall featured image for each blog. We feel it will be easier now to write new blog posts since our image restrictions have mostly gone away.

We also plan to create some none standard blog post designs. We will come back and update this section at a later date.