Adobe Edge Reflow - SO BUGGY

The program I'm using (RF) is reallllly buggy. Nowander it's called a 'preview' version.

I had troubles with the background and the divs, I had to work 3 hours just to get around the bugs to get what I really wanted.

There's this bug where you might accidentally drag your element too much to the right, then it would leave a white space in the background- which is impossible to fill although I played around with the percentage values/re-uploaded the background again.

I only have two more days left to code, so help me god.

Plus, my interface design doesn't really support responsiveness because it's so textured and rigid. Unlike plain bg's where.. AHHH. I can't think anymore.

At least my design is 100% done, and showreels too.

It's just the coding part which I thought would be really easy but isn't.

Okay since its a jpeg background it won't be scaling properly like the elements inside. I would looks like this:

Textured bg and solid bg. It's always safer with a sold BG.

5 Aug: Currently I have finished coding two pages. The work tab and the Homepage.

The homepage was easier because it didn't have too many elements.

Two things I discovered:

To unsee an element I could either choose to Display:None / or to hide the element.

Display none works better because it wouldn't effect the other resolution sizes unlike the 'Hidden' function.

TOOLBAR
As you can see from the picture on the left, I have changed the position of the ribbon as the horizontal div berserks my code in so many ways. I have resulted to just displaying the text there.

The ribbon is no longer going down the middle.

Jesus. I have 5 more pages to completion.

Designing Content Pages

So this is one of the sections: Installations

I have decided to put only my best installation works into the site to avoid overloading of information. So instead of four, I have decided to just put two of my most recent ones.

             

Two more to go! These are all desktop sizes.

Now my problem would be linking fonts.

Content Page Design

ABOUT + CONTACT ME DESKTOP Version

I have made some modifications.

I decided to drop the dropout menu and just go with the click function which directs to another page. I noticed that it was going to be a hassle if it were to be viewed on mobile. I don't like using my stubby fingers to click really small tabs.

This is the best I can do for now, I wanted to replicate an old book that people used to wedge dried leaves and stamps into.

The right page has too many colors and the grids are too random! Well, I guess it will do for now. I need to start designing the other pages if I was ever going to finish the whole artefact in time.

Below are a list of references of where I got my stock images from.

References

Beloit, (2003). Nurember Chronicle - Morse Library, Beloit College. [online] Available at: http://www.beloit.edu/nuremberg/book/addenda/Blank%20Pages.htm [Accessed 2 Aug. 2014].

Iconarchive, (2014). MetroUI Apps Adobe Photoshop Icon. [online] Available at: http://www.iconarchive.com/show/ios7-style-metro-ui-icons-by-igh0zt/MetroUI-Apps-Adobe-Photoshop-icon.html [Accessed 1 Aug. 2014].

Kenmorestamp, (n.d.). 1894-1895 2 cent Washington Triangles. [online] Available at: http://www.kenmorestamp.com/1894-1895-2-cent-washington-triangles [Accessed 2 Aug. 2014].

Psdgraphics, (2013). Vertical ribbons template (PSD). [online] Available at: http://www.psdgraphics.com/templates/vertical-ribbons-template-psd/ [Accessed 2 Aug. 2014].

Site Map and Flow Chart

I realised that I forgot to make a site map and a flow chart for my website. I want to keep the navigation simple and straight to the point!

Video Coding and Linking Pages

To insert my show reel into the landing page, I thought of using a lightbox. But there was a problem, it wouldn't be responsive.

So I searched online and found this software called VideoLightBox. I tried it awhile but the results looked really corny. So I played around abit and looked through other tutorials online.

Playing around with the code, I actually made the site redirect to a full-screened Youtube video.

Good thing:
-  It's full screen and resizes accordingly.

Bad Thing:
-You can click away from the page, you need to press back.

So, I was finding a way for the video to redirect itself back to my page once it finishes playing.
Found this really effective code.

<div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              height: '100%',
              width: 'auto',
              videoId: 'ROmBhg54IjQ',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {      
            if(event.data === 0) {        
               window.location = "#";
            }
        }

    </script>

Let's just see how this goes.



LINKING PAGES
As for the page linking, since this program is only on preview mode it only saves css per page.
So, I'm going to have alot of css documents. Hopefully I could reuse those styles. But I do manage to link them though.
It's just that I would have different css's.

I could reuse the Boilerplate.css though, but as for the personal styling on each page, I'd have to save them separately.

CONTENT PAGES
I've tested the content page and I wanted it to look like a book as much as possible. At first I wanted it to be half a page, but figured, the whole page would be better!

Reminder to self:
- Add pages at the bottom!
- Navigation Toolbar
- Icons
- Visual>Text!

EDIT//

REMOVING DIVS IN MOBILE VERSION

I tried deleting the entire div when it comes to the mobile size, but it removes itself from different sizes as well.

Solution: Reset 100% to 0% =D

Designing Mobile Progress

I had a couple of mobile layout references before translating my desktop version of the design to a mobile version. Alot of examples online show how mobile layouts display information on chunk at a time.

It is highly likely that the interface would contain too many buttons on the page. It is kept to a minimum. As for the menu, after analysing various interfaces from Instagram and Facebook and other popular mobile sites, I discovered that the navigation for the menu are always at the top right.

Icons are used to simplify user experience and the buttons are kept to a minimum in each one.

This is a screenshot from my phone.

Picture (b). FrankCollective.

Here's the updated version of the: 

Desktop Version. I have added a flare at the Enter Site button to make it more obvious.

And this is when they click the video, a light box will appear and the video will play. Users can navigate away from the video just by clicking the surroundings of it.

I didn't design the tablet form for this as it would just have minor changes, ie. the placement of the Enter Site button.

Mobile Version.

To me, this looks like a bunting for a book release. I would probably need to redesign it. But for now, due to time constraint, I would just have to settle with this. 

I'm thinking about the placement of my show reel as well. (I don't want light boxes for mobile versions) Should it be above the Book or below it. I want people to view my show reel fist though.

There's also redundant information on the top of the mobile version where it states my name and career and in the book picture below where it says it two more times. I would want to fix this in the future.

*Edit/ I have switched them around and I could say it looks more like a mobile layout now!

Actually I might not even need the Book and rock texture. I could just put the Enter Site button.

I think I'll stick with this. The easier to navigate the better.

Tomorrow I will be designing the content pages.

References

Frankcollective, (n.d.). Frank Collective. [online] Available at: http://www.frankcollective.com/projects/tech-media-network/ [Accessed 1 Aug. 2014].

Mobile layout reference. Picture (b).

Shutterstock, (2014). Blue Shine Stars,disco Ray Light,Christmas Background,fiber. [online] Available at: http://www.shutterstock.com/video/video/clip-3022744-stock-footage-blue-shine-stars-disco-ray-light-christmas-background-fiber.html [Accessed 27 Jul. 2014].

The flare I added at the Enter Site Button.

Trying out Edge Reflow

Okay so today I have decided to practice Edge Reflow and it turns out to be really easy! I used some random images from my computer to do so. The tutorial was really helpful.

Here are my outcomes previewed on Chrome 

For desktop:

For Tablet:

And for mobile:

There are a few bugs like how I can't drag element to certain places, but those are just really minor. As for the light box and linkage, I'd have to import it to Dreamweaver to do so! In the meantime, it looks really good!

I did it in just 30 minutes. 6 days left! It looks really feasible and I'm really excited about the outcome.