Viewing Dynamic Width (Page Layout)
Dynamic Width (Page Layout)
|
User: pumpkin 12 years ago
|
|
|
Can someone explain to me what that's for? Centered and left-aligned, ok. But what and how would I use dynamic width layout?
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Roddy 12 years ago
|
|
|
Most traditional website designs are centered in the browser window although you will occasionally see some that are left aligned. Nowadays left-align is sometimes used to make fixed width sites for mobile devices although there are more disadvantages to advantages in doing so. Dynamic width means that the widths are percentages and that the content flows in and out with changes in browser width. This is used in responsive designs so that the content adapts to the fixed width of mobile browsers on different devices. For responsive design I use a 100% width but set a maximum width and center the page by using - margin: 0 auto. This means that a fluid width site can be viewed on personal computers without spreading all over the place and looking odd by being left aligned. Example... http://mobile.ezmacwebdesign.com/ This design uses jQuery Mobile which is normally left aligned and I have adapted it for computers as well as mobiles. For the unskilled designer with little or no knowledge of code it's probably easier to create two versions of each site - one for desktops and the other for mobile devices. The former being fixed width and the latter dynamic. Responsive designs require a knowledge of media queries which is probably not something most users will want to know about! In another topic a forum member was bemoaning the fact that the drop down menu didn't work as planned in iOS. Mobile devices don't have hover because you don't hover with a finger. Instead, in a responsive design, the menu will disappear on mobile devices to be replaced by a more suitable one... http://www.ezmacwebdesign.com/Demo/toast/demo.html Decrease the browser width to see one menu be replaced by another. Note also how the columns change with different widths. This is the kind of stuff you need to learn to create responsive sites. I don't think those who balk at the idea of inserting a simple <h1></h1> will be interested in pursuing this concept. Although the online designers like Wix and apps like Adobe Muse can create responsive designs they either are very limited in style or produce huge amounts of code to compensate for the users lack of knowledge. These designs may look the part but a quick look at the source code will tell you that the creator is just faking it and they don't know code from cod. Mobile design also needs a more simplistic approach with the focus being on suitable user inputs and clarity on small screens. A lot of conventional designers fail badly at this since they are used to using quantity instead of quality. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: pumpkin 12 years ago
|
|
|
Thanks for your post, Roddy. Quite helpful. I guess I know what dynamic width means. There's an option in the page inspector to choose from (Left-Aligned, centered, dynamic width). I don't see any difference at all when I choose dynamic width there. No matter how many text boxes, graphics and whatnot I have on the page, they don't scale, resize like what you've shown on your pages. It looks static like then I choose the centered layout. Here's the setting I mean:
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
 Screen Shot 2013-06-11 at 07.54.05.png |
|
|
User: Roddy 12 years ago
|
|
|
Quote: It looks static like then I choose the centered layout It is static because you will notice that you can't enter percentages into the metrics inspector at this time. The main difference that I can see between the centered aligned page and Left/Dynamic is that the centered one places items in two divs - one positioned absolutely and the other positioned relatively within it. The Left/Dynamic layouts use one div to position the item absolutely on the page. Coded designs are a lot more efficient since they don't have to include all this positioning info. Items are - in the main - positioned by the order in which they appear in the HTML. EasyWeb actually has very efficient code compared with other drag and drop editors. Take a look at the code of a site created with Adobe Muse for example. What you see in the HTML is just the tip of the iceberg. Dig around in the other scripts and you will see why their performance in the browser is so poor. I have no idea what the developers' intention is with dynamic width but I would assume it would have to work in conjunction with dynamic divs for the content items such as text, images, media players and so on. I personally would rather see EasyWeb develop into an app that can produce dynamic mobile compatible designs than become another one that is bloated with all these features that are not appropriate for web design - never mind mobile sites. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: pumpkin 12 years ago
|
|
|
Agreed on that, Roddy. Though I'd still love to see some more advanced features in a later version;-)
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Yelena 12 years ago
|
|
|
Quote: For responsive design I use a 100% width but set a maximum width and center the page by using - margin: 0 auto. This means that a fluid width site can be viewed on personal computers without spreading all over the place and looking odd by being left aligned. Example... Roddy, where exactly can you set these up? When I choose Dynamic Width nothing changes in the column below - it still has the same numbers, I don't see options for percentages.... ------------------------------- Yelena MacBook Pro OS X 10.10.3 IMac 21" OS X 10.10.3 |
|
 Screen Shot 2013-06-11 at 9.02.39 AM.png |
|
|
User: Roddy 12 years ago
|
|
|
Percentages haven't been implemented yet.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Yelena 12 years ago
|
|
|
Got it, thank you!
------------------------------- Yelena MacBook Pro OS X 10.10.3 IMac 21" OS X 10.10.3 |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
The dynamic width option sets your page width to the browser width (or 100% by default). Notice the content width box becomes disabled.
------------------------------- Paul EverWeb Developer |
|
|
User: Yelena 12 years ago
|
|
|
Quote: Notice the content width box becomes disabled. Doesn't look disabled though... See the image above... ------------------------------- Yelena MacBook Pro OS X 10.10.3 IMac 21" OS X 10.10.3 |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Yes it is. Notice the border is a light grey.
------------------------------- Paul EverWeb Developer |
|
|
User: Yelena 12 years ago
|
|
|
I am sorry Paul, I am not sure what you mean... I am able to manually change the Content Width by clicking on the up/down arrows...
------------------------------- Yelena MacBook Pro OS X 10.10.3 IMac 21" OS X 10.10.3 |
|
|
User: pumpkin 12 years ago
|
|
|
Same here.
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Christopher 12 years ago
|
|
|
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: pumpkin 12 years ago
|
|
|
Why would you only want your entry site to be responsive? And the image remains centred when I increase or decrease the browser site. Not sure if I understand your problem...
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
| Post Reply |
| You must login or signup to post. |