I have created a responsive page, so that it is suitable for all different sized devices, such as a desktop, mobile, and even tablet:
I've worked a lot on these different screens and tried to figure out how I can make theme suitable for each device. The desktop screen is obviously a lot larger, hence the larger font sizes and image sizes etc. I've also included the main navigation bar in there also. Once the browser width gets below 940 pixels, the search bar become a smaller search icon, the navigation bar turns into a hamburger menu, while the logo moves centrally and the tagline disappears, as it would become too small to read anyway. The secondary navigation bar (to navigate within the category) also shifts to two lines rather than one, for when the browser width gets smaller. The social media icons also get smaller.
The font sizes all reduce, while the photos get smaller as the browser shrinks. As it keeps reducing in size, into the mobile width, the photos continue to shrink so that the whole photo fits on the screen at once, while the 'related stories' photos move into two columns rather than one, otherwise they'd become too small to see and read the headline. The comments sections become longer as the browser becomes narrower, in order to fit in the whole comment.
I am extremely pleased with how this has turned out!! I'm going to Photoshop up a mock-up to see how they would look on desktop, iPad and iPhone display, so that it puts it into context.
On Tuesday we have our final presentation before hand-in, so over the next few day's I'll continue to steadily work on the InVision prototypes, and once they're done I'll move onto the UX and UI Specifications, as well as the Speculative sitemap and Rationale. I feel like if I continue to work at the rate I have been so far in this project, I'll be able to polish it up to a standard that I'll be proud of and hand in work that is to the very best of my ability.
The font sizes all reduce, while the photos get smaller as the browser shrinks. As it keeps reducing in size, into the mobile width, the photos continue to shrink so that the whole photo fits on the screen at once, while the 'related stories' photos move into two columns rather than one, otherwise they'd become too small to see and read the headline. The comments sections become longer as the browser becomes narrower, in order to fit in the whole comment.
I am extremely pleased with how this has turned out!! I'm going to Photoshop up a mock-up to see how they would look on desktop, iPad and iPhone display, so that it puts it into context.
On Tuesday we have our final presentation before hand-in, so over the next few day's I'll continue to steadily work on the InVision prototypes, and once they're done I'll move onto the UX and UI Specifications, as well as the Speculative sitemap and Rationale. I feel like if I continue to work at the rate I have been so far in this project, I'll be able to polish it up to a standard that I'll be proud of and hand in work that is to the very best of my ability.
No comments:
Post a Comment