Essential Tips to Build a Mobile Optimised Website

The web is increasingly moving towards mobile browsing, and this doesn’t seem to be slowing down. The number of people using mobile devices is increasing every day.

Here are a few tips that will help you build a website optimised for mobiles:

Select a responsive template for creating the website:

This is one of the most crucial aspects of building your website, as most users will visit the website through their smartphones. You can tackle this by partnering with companies offering responsive web design services as they have years of experience building mobile-first websites.

Choose the right web hosting:

Your web host needs to have an SSL certificate, and ideally, it should also provide cloud storage so that the users can view your website both on desktop and mobile devices without any hiccups along the way.

Prioritise your content requirement:

Elaborating your requirements through content is a fantastic thing, but only when provided on the website used on a big screen. But what for a mobile screen? With long-form content on mobile, you will lose users. It’s essential to prioritise your content and only provide what is necessary rather than posting everything.

Improve the website loading time:

The web hosting company should also provide you with a website speed test tool that will help you determine how fast your web pages are loading and where they’re taking time. You can improve the web page load times by using CDN or content delivery network services that distribute the web pages on multiple servers across different regions. These steps ensure that web pages load faster and provide users with a better web browsing experience.

Re-define website popups for mobile devices:

Popups are annoying on web browsers and should be avoided. However, if you want to use a popup for mobile devices, ensure that the website popup design is adjusted based on device type. Make it smaller in size, so it doesn’t cover all of the content above or below, impacting your web page rankings.

Optimise the images

Images are the reason behind slow web pages, which is a bad user experience. Ensure that images on the website are optimised and compressed as much as possible to reduce web page load time. Also, if the website is responsive, try to put in responsive images so that the web page can load quickly on any device.

Optimise CTA:

Ensure that the CTA (Call To Action) is small in size, minimally impacting the web page load time and the number of web pages that can be indexed by search engines like Google and Bing, etc. When it comes to CTAs on mobile devices, optimising the button’s size and considering how far apart each button is from the others and where they are located on the screen is essential.

Redesign your navigation menu

As web pages are getting shorter and the number of web pages that search engines can index has also reduced, it’s essential to ensure your navigation menu only shows what’s important. If there is no need for a web visitor to go anywhere else on your website other than where they already are, web designers should not include that web page in the navigation menu. It’s best to have no navigation and let your visitors get around by clicking on different headings if the website has only a few pages or only a few pages.

Test the design:

It’s essential to test the web page on different devices and browsers to ensure a great first impression for the visitors. Testing will help the senior web developer to identify and fix any issues with web page responsiveness or font rendering as soon as they appear.

Create a mobile app:

The market is developing every day, and so is the competition in the market. Web designers have the opportunity to create a mobile app or web-based software that can be launched simultaneously with your website so that you get a better chance of attracting potential customers and increasing sales conversions as well. Creating a mobile app with unique benefits that the website cannot provide attracts the users more and increases visits. Have a look at gb whatsapp, they are specialists in the creation of Whatsapp mod applications.

With web and mobile browsing becoming more and more popular, it’s essential to consider this when designing your website. To help you out with some tips for how you can optimise your site for mobiles, we’ve compiled a list of suggestions that will get you started on building an optimised website. Let us know if you need any other advice or talk about what type of strategies might work best in your industry!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Responsive Pinterest Style Layout With CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Our top 3 favourite WordPress Starter Themes

In this tutorial, we are going to go through our three favourites WordPress Starter Themes.

What is a Blank WordPress Theme?

A ‘Blank WordPress’ theme is a boilerplate that serve as a starting point for developing your own custom theme, hence the name; ‘starter themes’.

Blank WordPress themes come with basic WordPress PHP, CSS, and HTML code and theme files already filled out for you saving hours of coding time!

Unlike theme frameworks, most of the files in a blank WordPress theme are meant to be modified based on your requirement.

Why Use Blank WordPress Themes?

A blank WordPress theme speeds up your workflow by reducing the amount of code you need to write. Having a skeletal foundation means you don’t have to do the same initiation process over and over every time you need to start creating a new theme.

In addition, using a blank WordPress theme lowers the chances of you forgetting critical files or code required for a theme to function properly.

Some blank WordPress themes will also have useful integrated features like responsive layouts and sample data to help you test your theme.

Do not mistake these with Premium themes with ones you will find on ThemeForest, these are designed to be a ‘blank canvas’ to create your own WordPress Theme. We also use a starter theme like one of the ones below when creating bespoke websites for our clients.

Here are our favourite three:-

1. Underscores

Underscores, or _s, is a free blank WordPress theme developed by Automattic, the creators of WordPress.

The tutorial series by ThemeShaper (a major WordPress theme development company) will help you learn how to create WP themes using Underscores.

We use Underscores for every new theme we develop. It saves us hundreds of hours of coding! The great thing about it is that you can set the Theme name, Author & Theme Slug when you download which means you don’t have to do a find and replace when setting your theme name (which, coming from experience, can break things sometimes).

2. Roots

Roots is an excellent open-source WordPress starter theme. It’s built with HTML5 Boilerplate and Bootstrap (if you don’t need it, you can replace or remove it). It also has Grunt files for quickly compiling LESS code and combining your CSS and JS files.

A nifty feature of Roots is its Theme Wrapper, which helps you avoid having to write the same code in multiple files.

Check out themes built using Roots at the Roots Gallery. Get started with Roots by heading over to the project’s official docs.

3. Bones

Bones is a free blank theme built on top of HTML5 Boilerplate. It’s responsive and developed under the Mobile First philosophy.

WPtuts+ has an excellent Bones tutorial to help you get started with this awesome starter theme.

Conclusion

All of the three starter themes we have mentioned today is a great starting point to building any bespoke WordPress website. The best one to use is simply up to you, our favourite (underscores), may differ from your personal favourite, but we hope that by explaining the differences and advantages of each, that it makes your life easier in deciding which one you would like to use.

Let us know which WordPress starter theme you use when developing a bespoke website!

 

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Clean Website Design: How to Achieve It & Why It’s Useful

If you’re following the latest design trends, you probably know that sometimes less is more. Clean website design hasn’t always been the way to go through. In the past, the trend was to create 3D-styled skeuomorphic design websites.

The skeuomorphic design trend included heavy design elements and was very hard to adapt to mobile websites. That’s all changed with the new “flat” website design trend. It’s light, minimalistic and easy to adapt to multiple devices.

A good clean modern design will attract more visitors and ultimately increase your revenue from ads without increasing your spending. Making sure your business is nicely presented through clean design can work wonders in reducing ad costs and increasing conversion rates.

Here are 3 reasons why clean website design is important to your business:

1. Load times

Clean website design mainly focuses on simplicity. With that in mind, when you’re developing a website using clean design, you’re essentially avoiding all the complexity and implementing simplicity.

As your site loads faster, the bounce rate reduces and you are getting more visitors. This is especially important in this day and age, as over 50% of website traffic comes from mobile devices.

Google also takes notice of clean modern design. They utilise mobile-first indexing, which means they check the mobile website first and then the desktop version. Another thing Google does is rank the faster and more mobile-friendly websites higher than the desktop-only and resource-heavy websites. There are a lot of factors that come into play when working with optimising your website load speeds, but usually, your web hosting provider, optimised images & asset loading are a good start.

2. Better exposed products and services

While the previous web design trends focused on cramming as much as possible into a web page, clean design takes a different approach.

Clean design websites utilise white space, paddings, margins, and similar things to the best extent. Fact is, visitors won’t read your website top to bottom or left to right, or in any way you’ve imagined. It’s very likely they’ll just scan through the website to find the information that matters to them.

When you take the time to clean up the website and strip down the unnecessary elements, you’re left with only the most important bits. With this done, no matter how the reader scans the website, they’ll end up on this information, because there’s not much else to see.

3. Timelessness

A clean website design won’t die out. It won’t grow old and stop being useful. It might become a little outdated, but that will happen much slower and even when it does, it’ll still be very easy to navigate.

The main features that attract visitors to a website are the basic principles of clean design. Easy navigation is very important for clean website design, without that a website would grow old very quickly.

Clean styles which are consistent over all the web pages are a must in order to make it easier for the user to scan through the website.

Fact is, a lot of people will be coming to your site from social media. But social media sites are usually crammed with information, so the fact that your site is relaxing will make the visitor spend more time on it.

How to achieve a clean website design?

Building a clean website is not as hard as you might think. There are a few basic principles you need to follow, but it’s definitely worth it.

1. Pay attention to detail

You might think that dedicating attention to extreme details isn’t gonna pay off in the end. But you’re wrong. The visitor might not even consciously notice the shadow on that menu, but it creates a better impression than if you didn’t have it.

There are many of these mini-styles that you need to focus on like borders, shadows, textures, image overlays and more. These are all very important to create a beautiful clean website design. But use them in moderation, in a balanced way.

Take Microsoft’s website for example. If you mouse over the menu items, a black line pops up below them, you might not consciously notice it if you’re not looking for it, but it does tell you that the item is clickable, right?

In the same way, if you mouse over the images below the slider, their brightness increases slightly. All these details make a difference. If they didn’t, Microsoft wouldn’t implement them.

2. Consistency

All the elements and styles you’ve designed should be consistent on all the pages of your website. Any good website design will be consistent over all the pages.

The only exclusion to this rule can be the buttons, specifically the CTA (Call-To-Action) buttons, they are sometimes coloured differently than other buttons to indicate a different kind of action.

Other than that, every other element – headings, paragraphs, fonts, and colours should be defined at the start and used throughout the whole website.

I frequently see people neglecting this rule with images. You need to do this even with the images. Don’t go and make them exactly the same, but if your website consists of mainly cartoon-style images, make them all cartoon-style. Having one cartoon-style and another real-life makes for a confusing experience

3. Perfect alignment

Perfect alignment is a key feature of a clean modern design. When people are reading a website or looking for information, they tend to want a more organised look. The same is probably true for you. It makes finding information much faster and easier.

You might want to use a grid to align elements, to make sure they’re perfectly aligned. But in some cases, it’s not required. Just make sure the website looks organised when you’re done creating it.

A website that has grid-based design is Jucophoto. It’s a photography portfolio, so grid-style is kind of a must for that. But take note of how perfectly the images are aligned, each made to fit exactly the size it needs.

Conclusion

Clean website design is a must for anyone who wants to have an up-to-date website. It makes the website load fast, get better search rankings, reduce bounce rate, and more. There’s really no reason not to use clean design.

There’s no other way to remain competitive in today’s digital age. You need to follow the trend and be on top of it. All your customers will thank you for implementing a clean design. It literally makes their life easier.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Bootstrap – Responsive Carousel – Changing the number of visible slides

In this example, we are going to show how to configure the Bootstrap 3 carousel to show many panels at once but only slide one at a time.

See the JSFIDDLE to see how this works. On a desktop, it rotates one item at a time and has 3 elements in view. If you shrink the browser to mobile you will not see it rotates one item at a time but only has one element in view (as opposed to it usually stacking 3 elements).

Here is the code you need from the example:-

HTML


CSS


.carousel-blog .carousel-control {
  width: 4%;
  background-image: none;
}

.carousel-blog .carousel-control.left {
  margin-left: 15px;
}

.carousel-blog .carousel-control.right {
  margin-right: 15px;
}

.carousel-blog .cloneditem-1,
.carousel-blog .cloneditem-2,
.carousel-blog .cloneditem-3,
.carousel-blog .cloneditem-4,
.carousel-blog .cloneditem-5 {
  display: none;
}

@media all and (min-width: 768px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -33.333%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 33.333%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-1,
  .carousel-blog .carousel-inner .cloneditem-2 {
    display: block;
  }
}

@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

@media all and (min-width: 992px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -16.666%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 16.666%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-3,
  .carousel-blog .carousel-inner .cloneditem-4,
  .carousel-blog .carousel-inner .cloneditem-5 {
    display: block;
  }
}

@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

.container {
  margin-bottom: 50px;
}

body {
  font-family: 'Bitter', sans-serif;
  color: #E54A41;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  margin-bottom: 2em;
}

h2 {
  margin: 2em 0 1em;
}

.logo {
  margin: 20px auto;
  height: 100px;
}

@media only screen and (min-width: 768px) {
  .logo {
    margin: 28px;
    float: left;
  }
}

.title {
  padding: 28px;
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

jQuery


(function() {
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // http://getbootstrap.com/javascript/#carousel
  $('#carousel123').carousel({
    interval: 2000
  });
}());

(function() {
  $('.carousel-blog .item').each(function() {
    var itemToClone = $(this);

    for (var i = 1; i < 3; i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-" + (i))
        .appendTo($(this));
    }
  });
}());

If you need to modify the code to show more slides or change the breakpoints, just remember to update these four key elements:

  • Update the html classes for responsive rules
  • Update the css item widths
  • Add in the required .cloneditem-n management
  • Tweak the js loop to control the number of cloned items

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to make Responsive Slanted Divs in CSS

Do you need to create a slanted div for your website? Well you’ve come to the right place!

We are going to create a slanted Div using CSS only without the use of images as this would be a waste of resources! We are going to use pseudo elements, applying a CSS3 transform on them, skewing the whole element and hiding the overlapping areas. Here is the code:-

HTML


Silva Web Designs

Okay, so I guess this is a good way to make a slanted div aye? I am also responsive which is pretty cool. Instead of using a background colour you can use a background image instead which works very nicely. The possibilities are endless! :)

CSS


.container {
  padding-top: 60px;
}

.main-container {
  background: #169fe6;
  position: relative;
  color: #FFFFFF;
}

.main-container:before {
  content: '';
  position: absolute;
  left: 0;
  top: -36px;
  width: 100%;
  height: 72px;
  background: #169fe6;
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  -webkit-backface-visibility: hidden;
}

section {
  margin: 10px 0;
  padding: 0 20px;
  padding-bottom: 10px;
  position: relative;
}

And there you have it, I hope this helps! 🙂

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share