You need to take a simpler another approach
- there is no need to start with a larger width, particularly your header image (its 2000px wide), incorporate % units for the width, instead. Or resort of media queries to adjust the page elements per different viewport sizes.
- page stalls in IE at the preloader!
- why all the images? Plenty of textual areas in your page that can be done directly in Edge.
Just saw another post that may help you about the fonts:
You can adjust your composition with percentages as Darrell mentioned. Just starts one piece at a time and test it until you have all your pieces working as you want. Do not forget to set the minimum size.
Let me know what happens.
To answer the third piece, I have it all set to PNG cause the font choice I used for the page and largely for my branding is not a webfont, nor is their one that would work for my design as needed. As much as I would like to have physical text boxes within the page to help with load time, I havent been able to find a font to fix my needs.
But IMHO plan adaptive layouts from the start when you build your page otherwise it is really a pain to adjust later!
Heh, yes. I'm learning that. I'm from the htl era, where you build larger than eeded and build in the functionality later.
You are a great photographer too! Sorry I have not been much help with this - I do not deal much with responsive layouts!
Thank you! I appreciate all the help you've given me, however I might just scrap the Edge animate idea all together. As much as I love the interactivity it provides, it's also proven to be quite the hassle compared to other options. :-\
Can you provide me with some insight on how to go about rescaling it? I want the header to be full bleed, and the psd I built beforehand of the layout was done at 2000 px by 4600px to insure that it would work on the largest resolution (In normal webdesign, its always best to work large and scale down). How will I be able to incorporate that psd to be able to create a new layout thats responsive?
1 person found this helpful
Here is a small sample (exclusive of any coding) jus to give you an idea. Also sample is minimal just to showcase.
Preview example in browser and resize.
- Stage w is set to 100%, to provide full independant with
- Anything else on the stage is contained in blocks (nested divs) for mangement and position puposes. Example top area elements is in a nested div called 'Top'; bio elements is nested in a div called 'bioArea' etc.
The key with the positioning is to make the nested div blocks % (in my case 100% w) w/h and relative to the Top/Left (%) of the Stage. Select thee 'Top' div group for example and observe the Position and Size properties in the Property Panel.
The next key is to position the elements within the nested div blocks relative to its own container. So the same principle applies -. in the case of the 'Top' div it has your header image, a fake logo to the left, and a fake tag line to the right, and a menu bar. These elements are nested in the 'Top' div so to make them relative in position - set the X/Y to % and ensure the upper left position marker is active. This tells Edge to 'lock' the relative position to the parent container (Top) to the upper left. Select the fake byLine element, set X/Y to % and ensure the upper right marker is active.
Then work your way down, for each element relative to the container its in.
Note I only used 2 images in the above example. You can make good use of the Edge div/text tool where possible to avoid over-use of images.
Its a quick example and some trial/error will be required. Just make sure to test each element position before moving along. Also as you scale down to say a mobile phone width, some 'resize' event handler will be required to hide some elements, change font size etc where desired or applicable.