Category: Web Development

The long spirally road of web development

Alexander Brown / / Design Ideas, HTML & CSS, Web Development

So I haven’t posted many updates recently and the reason mainly has been there hasn’t been much to post. The last couple of weeks have consisted of trying to find the right tools to tackle the task at hand. I have experimented with quite a few different methods and softwares to try and get the parallax scrolling to work in a way that works for us.

This includes:

  • Using CSS alone to create a parallax effect <— http://keithclark.co.uk/articles/pure-css-parallax-websites/
  • Using a standalone parallax scrolling Javascript library <— e.g. Scrollr.
  • Adobe Dreamweaver
  • Adobe Edge Animate
  • Brackets
  • Adobe Muse <— What I decided on.

The only software I have previously used to develop websites on has been Dreamweaver. I experimented this time with using Brackets, which has the great feature of extracting CSS from a PSD file. This let me easily format all the elements on the page very quickly. I also far prefer the layout, finding it much simpler and more straightforward than Dreamweaver. However, I had a lot of trouble getting to grips with Parallax this way. I just found the process too complicated and fiddly to achieve the effect I wanted. This prompted me to search for software that would do some of the heavy lifting, leaving me to focus on the visual aspects of the site.

I experimented with Edge Animate, using the ‘EdgeCommons’ Javascript library to link the timeline to the user scrolling. Whilst this did work, it made it hard to synchronise the scrolling on different device widths. As I was working on solving this problem, I stumbled upon this video which I found very helpful.

This led me to experiment with Muse which I had never previously used. It was exactly what I had been looking for. It made the whole process of parallax far easier to achieve, letting me concentrate on other aspects of the site.

Here is my update on what the main page of the site currently looks like:

Whilst it still needs to be populated with content, I think the layout of it and design is nearly there.

 

What i’ve learned from all this experimenting is that I shouldn’t be afraid of new tools. If I had just stuck with Dreamweaver I don’t think the site would be anywhere near this stage. And whilst I understand that with Dreamweaver and Brackets you have far more power and control over your final site, if another tool offers everything that you want and is simpler, why shouldn’t you use it?

 

No beer now, only work.

 

– Alex

Now lets justify parallax…

Alice Louise Eagle / / Design Ideas, Idea Development, Web Development

Parallax scrolling has become a very popular technique recently and it appears to be popping up everywhere.  It seems to be one of those design elements that can either be done incredibly well, or incredibly poorly, and obviously Alex and I want our use of it, to come under the category of ‘incredibly well’.

 

Our reasons for choosing to go down this route are simple and minimal.  We wanted to create a website that encouraged users to want to revisit, something that would generate a ‘regular’ customer, who wants to buy a more than regular product. You’ll be more than likely to revisit a website if not only the product was worth purchasing, but the experience in purchasing it was just as good, right? That is our intention.

 

Parallax is capable of many things, it just depends on what you decide to do with it.  We want a website that is easy and enjoyable to navigate, smooth and consistent.  We believe introducing parallax to our designs will enable them the full ability to do what they were intended, and that is to engage an audience.

 

We aren’t using parallax, because it’s a common trend and we want to keep up.  We are using it because it fits.  The Bearded Brew has it’s own personality already, one we believe to be distinguished in it’s approach to encouraging simplicity and enjoyment. And that is our justification.

 

Parallax; you may be used and abused throughout the web-design industry, but you are effective when used appropriately…and we are using you appropriately.

 

– Alice + Alex

 

 

Individual Gantt Chart

Alice Louise Eagle / / Design Ideas, Idea Development, Web Development

Hola,

 

 

Below shows the Gantt Chart that Alex and I intend to follow in order to carry out individual tasks.  We have decided to avoid making someone a developer and designer and, instead work collectively on both.  However, in the lead up to the build of the website, Alex has mainly taken on the designer role, whilst I have been testing out different routes to follow with the development.  This has allowed us to work on both sides of the project, in order to expand our skill set and have creative input in every aspect.  It can sometimes be difficult working within a group, and usually specific roles would be given out to individuals but our overall aim is to create something awesome, and we work best when putting our ideas together throughout every element of design.

Screen Shot 2015-11-02 at 13.09.40

 

 

 

– Alice

Boy-Coy Analysis – Javascript vs CSS

Alice Louise Eagle / / HTML & CSS, Web Development

The website http://www.boy-coy.com/#home is one Alex and I found at the very beginning of our research, and have continued to appreciate since then.  The website has earned a place in the top 20 parallax websites of 2015, which is quite the success considering parallax scrolling has quite recently become a popular design tool. Even though the style of this website differs in many ways to the one we want to create, the overall experience it provides is fantastic. Therefore, I decided to find out how it was made, and whether we could benefit from using similar techniques in our own work. Again, following on from the Javascript vs CSS discussion.

 

From first glance, I thought the website had very cleverly used purely CSS in their build, due to the smoothness of the scrolling and how well it works in a variety of browsers. The animated movements are all very basic, yet work well with the theme, and the main attraction to the design is how layers blend by moving over on another at different speeds. However, after more research and spending some time inspecting the style elements behind this website, I found that they have in fact, used both Javascript and CSS to create this style of parallax.  This wasn’t something I considered to be an option before, I thought it would be better to stick with one over the other, although now I think working with both could benefit the stylistic approaches we want to consider for our website.

 

The previous post showed how I played around with CSS to create a quick, basic parallax site. Here is an example of the code I used, using both CSS and Javascript to create a similar styled site.
#home {
background: url(Javascript%20Proto/desert.png) 10% 0 repeat fixed; min-height: 100px;
}

#about {
background: url(Javascript%20Proto/legend-of-the-bearded-brew.jpg) 50% 0 no-repeat min-height: 1000px;
}

#home {
background: url(Javascript%20Proto/desert.png) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}

#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}

#about {
background: url(Javascript%20Proto/legend-of-the-bearded-brew.jpg) 50% fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}

$(document).ready(function(){
$(‘section[data-type=”background”]’).each(function(){
var $bgobj = $(this); // assigning the object

$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data(‘speed’));

// Put together our final background position
var coords = ‘50% ‘+ yPos + ‘px’;

// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});

 

Overall, I found that using CSS alone creates a site I particularly think would better suit the style of website we want to create. However, there are ways of using Javascript that will allow particular animated movements to happen, that CSS couldn’t do.  We have a lot to think about.

 

Beer and stuff.

 

– Alice