After lots of research, trial and error and inspiration I have finally produced the final magazine inspired design, in this blog post I will take about the design, technical considerations and justify all my choices, I will run down the website and discues each part, firstly the header:
Unlike the rest of the website which is percentage width’s because of what was on the header, I decided to us an adaptive design on the header, using media queries when the screen reaches a different size the header bar will adapt, there is three of these for all different screen resolutions/devises.
To keep with the magazine theme which I took upon, a magazine always has a front cover, something visually exciting, I wanted to give my website this, something visually exiting and at the same time fits in with my social network magazine style theme, I came up with a cover, the cover is the large purple area which is JQuery customised plugin which is responsive and an ever-changing image design at the top of the page to welcome you to the site, it’s visually existing and ever-changing which is exactly what I wanted to achieve.
Next up to design was the sidebar, I wanted this to be like the contents page of a magazine, but I wanted it to be visually exciting and something which is fun/easy to look at and what I achieved I think it exactly what I had in mind, to start with there is a large top to the header, which is the profile image to the user who would be logged in, under that is the social links which on the website would allow you to filter your social stream, keeping inline with my social theme from my mid-point presentation, this is also adaptive using media queries and the CSS :after rule the text after the number changes depending on your screen size.
Next up was some social integration to complete the sidebar, so I put in a simple broadcast box for you to (if it was a real website) update your status on all your social networks, and then beneath this what images you’ve been tagged in recently, the whole of the main content on the website is also using percentage as width’s so as you resize the window/different screen sizes the content will reduce to fit your screen, with the CSS :after rule I think creates an easy to view website.
I then wanted to create the content which would be in the magazine and becasue the content of a magazine can be many different things I tried to do this, I did this in a newsfeed type style, keeping in with the sidebar design, you know what content this is from, the colour of the line on the post (a few of the embeds I used such as Spotify don’t respond well to screen size, but I kept them there for design/example purposes), again with the percentage width’s for a responsive site, along with media queries it creates a nice feel website.
On the sidebar there is some spaces for what would be advertisement which are also responsive. For the footer, I decided that a magazine is a never ending thing pages of content to discover, so I decided not to use a footer, but to show an example of what would happen on the real site when you reach the bottom, it would loads more content/text/posts for you to discover.
I got feedback from friends at family at multiple points throughout the making of the site, and removed stuff as I went (such as the slide out menu in a previous post, which after asking people to test out was too slow), on the mobile website I could have also styled the content more to give it a better look, but I decided to let it repsond gracefully, so that you get to see the video/images at the best size which is what you want on a mobile browser.
I also used the target ÷ context = result within the website to give the best responsiveness, I have tested the website on Apple browsers and Windows/Mac browsers, but not had a chance/availability to test it out on Android browsers, so I’m, unsure of what the result will be, the website is also HTML Valid (except for the YouTube embed).
To summarise my website and how I have worked I think with more time I would have improved the stream look further enhance the responsiveness of the website, I tried to also link back to the magazine theme and social theme as set out in my mid-presentton, but I think with more time I could have further met this requirement but believe what I produced does reflect the brief. I I think the website was successful though and I have learnt many things which I will continue to use in my work from this point on.
The final parts of the site which are handed in are, there could have been many but I believe I showed a good example of my work in these 2 pages:
http://127.0.0.1/pluddle/index.html – main page with feed
http://127.0.0.1/pluddle/about-us.html – this would be a simple page example