Default style
Web browsers have their own basic default style for any code they are given. This is shown well when I created a basic html document without any styling.
This is the code I used to create my test website. Although it has code to create imbedded styles for the website there is no code giving a style to the content. I have adde6 6 headings one at each heading level the web browser will automatically style.
This shows how the web browsers would display each header without any added styling.
It makes header one the biggest and works its way down to header 6 which is the smallest. web browsers also have styling for other things like links, body text.
default CSS styles
second mock up
This is the second mockup I made, it is also very simple but as I made it in illustrator I was able to show the difference that will between the desktop and mobile versions of the site. On the left of the image it shows how the website would look on a phone and on the right it shows how the site would be different on desktop.
The main changes I am looking to make between the different views of the site would be the navigation, on the desktop site I am planning to have navigation along the left of the site much like in my first mockup and how the navigation was placed in my ibook. On the mobile site I am planning for the navigation to be a drop down selection from the top of the site which will allow more of the screen space to be used for the content and then allowing me to add all the content to both versions of the website.
The second main change I am making between the desktop version of my website and the mobile version of the website is the main content. On the desktop version of the website there is 1 main content area that takes up most of the page allowing some space on the left for the navigation. on the mobile version of the website there is one main content area but it is smaller so with the same amount of content displayed on each the audience would have to scroll down the page more.
I am also going to making the navigation a fixed navigation so that for someone navigating around the website they will always be able to switch between each chapter they are on without having to scroll back up to the top. This gives the user freedom to explore the site in the order they feel works best rather than sticking to the order it is presented in.
mock up
This is the first basic mock up I made. it is really simple and just shows the first ideas I had.
This it the first simple mock up I created it was taken from one of the pages in my ibook. I then added two white sections to the right of the page to show where the main content would be if this were a website and not a page in the ibook I created. The navigation between ibook pages would create the navigation between each page in my responsive website. It shows how my idea is simple and as close to the design of the ibook as possible, this helps make the design between the two stay consistent and also the layout making it easy for the audience to use both without a struggle to learn a new layout when switching between the ibook and website.
Fonts
I have also chosen to use the font I used for the headings in my ibook as this is another factor I will be using to keep the visual style from my ibook to the website the same the font is called snow which I got from www.dafont.com and I will be using www.fontsquirrel.com to create the code to add to my website.by using font squirrel I can upload a font and then save the code that allows me to use it in my website. by doing this I am not restricted to the fonts that are currently available to use on websites.
I feel the font snow worked well for headings but I have decides to change the main body font from my ibook to my website as most of the websites I looked at used a san-serif font making it easier to read on a computer phone or tablet screen.
colours
I have chosen to use the same colours that I used in my ibook being mostly light blue and white with some black, this works well as it will help keep the theme and visual style between my ibook and my responsive website. I am planning to use the same images as backgrounds for each section as I found they worked well in my ibook and provided a large part of my visual style that I can keep the same. Another reason why they would work well is because they are photos and give the realistic and believable feel to the website, unlike drawings or a graphic style that could become less believable and realistic. These are the images i have chosen to use.
WWF
After looking at responsive websites I then started looking at websites that were about a similar subject as mine would be. By looking at similar websites this gives me the advantage of knowing how other websites look and respond. The first website I looked at was WWF
This is the main home page of the WWF website. It has a main colour scheme of white on a black background with some orange in the top right of the page to help highlight some of the important sections like where you can donate to the WWF or where you can adopt an animal.
The layout is simple with the main navigation along the top and consisting of white text on a black black background. Under the navigation is a main image banner that scrolls through like a slide show of different images. under that is 4 sections for 4 smaller images and then the bottom of the page includes a footer. By using big images at the top of the page it will attract the audience to look and also reduces the content that can be on each page avoiding making it text heavy but by being a slide show it also keeps the audience interested and maximises the space it takes up.
This shows the website when reduced to phone or tablet size. the main differences apart from the size are in the top section of the site, first being the navigation which is hidden under a burger icon in the top right. In the computer view of the site the navigation was originally across the top of the page but by being hid in the burger button it gives the option of a drop down menu that can be hidden to maximise the amount of screen that is used for content and therefore maximises the amount of content that can be on each page. The other main change of the website is the colours where as the website opened on computer uses white on a black background and then uses orange to hi light sections this version of the website uses black on a white background and also uses orange to highlight some of the sections.
Subscribe to:
Posts (Atom)